Error Catching not working with suspense true

[AmmarMohamadIsmaeel]

useSWR catching errors is not working when adding to the options suspense true

The code will never enter the if the statement of the error and the website will carshes
and If we remove the suspense true everything will work fine

 const fetcher = url => Axios.get(url, authHeader()).then(res => res.data);
    const url = `${apiUrl}/info/5`;
    const { data, error, isValidating } = useSWR(url, fetcher, , { suspense: true });
    if (error) {
console.log('error');
    }

[koba04]

@AmmarMohamadIsmaeel As the document describes, you have to use an error boundary instead of the error property.

But if an error occurred, you need to use an error boundary to catch it

https://swr.vercel.app/docs/suspense

[AmmarMohamadIsmaeel]

Thank you for the reply @koba04

I want each component to handle its different errors, How could I do this?
For example, for a specific component, the 403 means something and for the other components it means something else and I have to display a different message.

[koba04]

@AmmarMohamadIsmaeel
You can handle errors differently on each component by creating each ErrorBoundary or passing different props to a single ErrorBoundary.

<ErrorBoundaryA>
  <PageA />
</ErrorBoundaryA>

<ErrorBoundaryB>
  <PageB />
</ErrorBoundaryB>

or

<ErrorBoundary errorType="a">
  <PageA />
</ErrorBoundary>

<ErrorBoundary errorType="b">
  <PageB />
</ErrorBoundary>

Does it make sense?

[AmmarMohamadIsmaeel]

Yes, Thank you but How Can I use such a thing inside a map for routes?

  <Switch>
           {dashboardRoutes.map((route, i) =>
               <PrivateRoute key={i} isAuthorised={isAuthorised} isLoading={isLoading} {...route} />
            )}
          <Redirect to={{ pathname: '/404' }} />
</Switch>

[koba04]

Sorry, I'm not sure about your router implementation, but couldn't you wrap your page components by error boundaries?

[AmmarMohamadIsmaeel]

Yes, It worked, Thank you so much for your help!

[koba04]

👍 BTW, vercel/swr enables GitHub Discussions, so I think it's the best place to post a question like this😄
https://github.com/vercel/swr/discussions

[koba04]

@AmmarMohamadIsmaeel Could you close this issue if you don't have any other questions?

[AmmarMohamadIsmaeel]

In the end, I use the package react-error-boundary to handle the error:

function ErrorFallback({ error }) {
        console.log('error', error.response);
        return <Redirect to="/500" />
    }

and place it between the routes.
And for a custom error that I want to handle in a specific component, I added an error handler in the fetch like this:

const fetcher = url => Axios.get(url, authHeader()).then(res => res.data.data, error => handleError(error));

But still, I am having a problem, is that the SWR is caching the error, so the error boundary is still handling the error even when its resolved, Can I use isValidating in the error handler function to only redirect if isValidating is false ?

[koba04]

Could you create a CodeSandbox project to reproduce it?
https://react.new/

[AmmarMohamadIsmaeel]

@koba04 Here is something like my code.

https://codesandbox.io/s/zealous-williams-38jhe?file=/src/App.js

My problem is: If the rest api resturns me and error for some reason maybe 403, and then I fix the problem in the api, and try again without refreshing the page, The response will also be 403 error since its cached and I am returning back to the error page

[koba04]

@AmmarMohamadIsmaeel How about the solution?
#193 (comment)

[AmmarMohamadIsmaeel]

@koba04 Unfortunately It did not work, I am now in an infinite loop of calling the request and the error boundary is not handling the error.

[koba04]

@AmmarMohamadIsmaeel Thanks. How can I reproduce your case?

[AmmarMohamadIsmaeel]

1- Make an api call using axios and swr with suspense true in a compoenent...Something like this:

const fetcher = url => axios.get(url, authHeader()).then(res => res.data);
    const url = `${apiUrl}/student-home`;
    const { data } = useSWR(url, fetcher, { suspense: true });

2- Implement Error Boundary with fallback between the routes...Something like this:

 function ErrorFallback({ error }) {
        console.log('error', error.response);
        return <Redirect to="/500" />
    }

 <ErrorBoundary FallbackComponent={ErrorFallback}>
                        <Suspense fallback={loader}>
                            <Switch>
                                {dashboardRoutes.map((route, i) =>
                                    <Route key={i}  {...route} />
                                )}
                                <Redirect to="/404" />
                            </Switch>
                        </Suspense>
                    </ErrorBoundary>

3- Add The swr global config in the App.js to clear the cache on error...Something like this:

<SWRConfig value={{
                          onError: () => cache.clear()
                      }}>
                          <Suspense fallback={loader}>
                              <Switch>
                                  {dashboardRoutes.map((route, i) =>
                                      <Route key={i}  {...route} />
                                  )}
                                  <Redirect to="/404" />
                              </Switch>
                          </Suspense>
                      </SWRConfig>