Application error: a client-side exception has occurred

[kopeclu2]

Hello i have issue. When apollo cannot connect to backend server it shows this error exception on page. I want to show client onlz error section, but the whole page should works normally, only failed section should be rendered as some error div etc. How to avoid client shutdown the page like this. The page should be prerendered but onlz section with properties needs to be fetched with server data on income to page.

For context backend now is shutted down.

Even if i use useQuery instead of useSuspendQuery same problem happens.

Can you please help me to solve this issue ?

Thank you so much for help 👍

Page code:

export default function AboutProperties() {
  const { data } = useSuspenseQuery<GetAllPropertiesQueryType, GetAllPropertiesQueryVariablesType>(
    GET_ALL_PROPERTIES_QUERY,
    {
      variables: {
        paginationInput: {
          pageSize: 6,
          page: 1,
        },
        filter: {},
        sort: 'DESC',
      },
      errorPolicy: 'all',
    }
  );

Apollo config:

// ^ this file needs the "use client" pragma
import process from 'process';
import { useCallback } from 'react';
import { HttpLink } from '@apollo/client';
import {
  NextSSRApolloClient,
  NextSSRInMemoryCache,
  ApolloNextAppProvider,
} from '@apollo/experimental-nextjs-app-support/ssr';

import { useLocalStorage } from '../../hooks/use-local-storage';

// have a function to create a client for you
function makeClient(token: string) {
  const httpLink = new HttpLink({
    // this needs to be an absolute url, as relative urls cannot be used in SSR
    uri:
      typeof window === 'undefined'
        ? process.env.SERVER_GRAPHQL_URL
        : process.env.NEXT_PUBLIC_GRAPHQL_URL,

    headers: {
      'Access-Token': token || '',
    },
    // you can disable result caching here if you want to
    // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
    // you can override the default `fetchOptions` on a per query basis
    // via the `context` property on the options passed as a second argument
    // to an Apollo Client data fetching hook, e.g.:
    // const { data } = useSuspenseQuery(MY_QUERY, { context: { fetchOptions: { cache: "force-cache" }}});
  });

  return new NextSSRApolloClient({
    // use the `NextSSRInMemoryCache`, not the normal `InMemoryCache`
    cache: new NextSSRInMemoryCache(),
    link: httpLink,
  });
}

interface Props extends React.PropsWithChildren {}

// you need to create a component to wrap your app in
// @ts-ignore
export function ApolloNextAppProviderWrapper({ children }: Readonly<Props>) {
  const token = useLocalStorage('token', {
    token: '',
  });

  const createClient = useCallback(() => makeClient(token.state.token), [token.state.token]);

  return <ApolloNextAppProvider makeClient={createClient}>{children}</ApolloNextAppProvider>;
}```

[phryneas]

Have you already tried adding an Error Boundary around the components that are erroring?

[urieloliveira]

I solved this issue by enabling CORS on my server. If you have control over the server, you can add the necessary headers to the response.