Error handling with prefetch streaming Next 15

[falboe]

Hi, I have a problem with error handling when streaming using Prefetch. The issue is that when a fetch call throws an error using throw new Error(), Next.js reports the following error:
"Switched to client rendering because the server rendering errored:". So how can I deal with such a message and handle errors properly?
Btw the promise rejection is correctly caught by error.tsx.

Code:

export default function HelpLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-1 flex-1 overflow-hidden lg:grid-cols-12 lg:divide-x lg:divide-border">
      <LayoutSidebar>
        <TopicsHeader />

        <Suspense fallback={<TopicsListSkeleton />}>
          <TopicsListServer />
        </Suspense>
      </LayoutSidebar>
      {children}
    </div>
  );
}

export function TopicsListSkeleton() {
  return (
    <div className="p-4 space-y-3 animate-pulse">
      <div className="h-4 bg-gray-200 rounded w-3/4"></div>
      <div className="h-4 bg-gray-200 rounded w-1/2"></div>
      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
      <div className="h-4 bg-gray-200 rounded w-2/3"></div>
    </div>
  );
}

export async function TopicsListServer() {
  const queryClient = getQueryClient();
  queryClient.prefetchQuery({
    queryKey: ["user-conversations"],
    queryFn: getConversationsQueryServer,
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <TopicsList />
    </HydrationBoundary>
  );
}

"use client"
export function TopicsList() {
  const { data } = useSuspenseQuery({
    queryKey: ["user-conversations"],
    queryFn: getConversationsQuery,
  });

  if (data.data.length === 0) {
    return <TopicsEmptyList />;
  }
  return <div>Hello</div>;
}

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
        retry: false,
      },
      dehydrate: {
        shouldDehydrateQuery: (query) => {
          return (
            defaultShouldDehydrateQuery(query) ||
            query.state.status === "pending"
          );
        },
        shouldRedactErrors: (error) => {
          return false;
        },
      },
    },
  });
}

let browserQueryClient: QueryClient | undefined = undefined;

export function getQueryClient() {
  if (isServer) {
    return makeQueryClient();
  } else {
    if (!browserQueryClient) {
      browserQueryClient = makeQueryClient();
    }
    return browserQueryClient;
  }
}

export const getConversationsQueryServer =
  async (): Promise<ConversationsListForUserResponse> => {
    const client = await getServerApiClient();
    const response = await client.request(`/conversations`);
    if (!response.ok) {
      throw await parseErrorResponseWithZod(response);
    }
    return response.json();
  };

[TkDodo]

Is this not a nextJs specific question? As you said, you would get the same behaviour if you throw new Error() inside a server component without using react-query ...