onError callback in global SWRConfig not being called

[RaddishIoW]

Hi all,

I have a global SWRConfig, returned by a custom hook, that I'm using to wrap SWR calls, with an onError callback defined, but the callback is not being called - it just throws the error up to React.
I'm sure I'm just missing something, but not sure what it is I'm doing wrong. Any ideas?

My SWRConfig is returned thus:

export const useHaylControllerSWRConfig = (handleError?: Function): Object => {
  return (
    {
      fetcher: fetcher, // defined elsewhere, uses axios
      refreshInterval: 30000,
      suspense: true,
      onError: (error, key) => {
        if (error.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          if (error.response.status >= 400 && error.response.status < 500) {
            // The error falls within the range that the user or app should be
            // able to fix, so we will just pass the error up
          } else {
            console.log('Error Response Data: ', error.response.data)
            console.log('Error Status: ', error.response.status)
            console.log('Error Response Headers: ', error.response.headers)
          }
        } else if (error.request) {
          // The request was made but no response was received
          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(error.request)
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', error.message)
        }
        console.log(error.config)
        // Call the error handler callback, so the app can decide what to do
        if (handleError) { handleError(error) }
      }
    }
  )
}

Then in my component I have:

const handleError = (error) => {
  console.log(error)
  // will handle errors like 401, 404, etc
}
...
const UpcomingJobsList = (props: Props): React.Node => {
    const { drivers } = useDrivers() // This is a custom hook that uses SWR and returns the data
    return ( ... render some stuff ... )
}
...
const WrappedElement = (): React.Node => {
    const config = useHaylControllerSWRConfig(handleError)
    return (
        <SWRConfig value={config}>
            < UpcomingJobsList />
        </SWRConfig>
    )
}

[promer94]

In Suspense mode, if an error occurred, you need to use an error boundary to catch it.
you can check the doc and example.

[RaddishIoW]

Ah! Right, yes that makes sense. Thanks for the help.

If I may though - how would I go about catching the error with meaningful info in? The error I receive at the ErrorBoundary just contains a message and the request config. I would need to know what status code was returned from Axios to handle the error appropriately (for example, asking the user to login again if the response was 401). It seems like SWR only passes back minimal information in the error object? I'd like it to pass back things like status codes, etc.
I've tried modifying the fetcher I pass to SWR thus, but it doesn't catch the error:

const fetcher = (url: string, token: string): ((string, string) => Function) => async () => {
  try {
    const res = await axios.get(url, { headers: { Authorization: `Token ${token}` } })
    return res.data
  } catch (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      if (error.response.status >= 400 && error.response.status < 500) {
        console.log(error)
        // The error falls within the range that the user or app should be
        // able to fix, so we will just pass the error up
      } else {
        console.log('Error Response Data: ', error.response.data)
        console.log('Error Status: ', error.response.status)
        console.log('Error Response Headers: ', error.response.headers)
      }
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request)
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message)
    }
    console.log(error.config)
    // Call the error handler callback, so the app can decide what to do
    // if (handleError) { handleError(error) }
  }
}

[3pleFly]

swr is receiving just what you are returning to it via the fetcher. notice that your fetcher is returning only response.data. so the rest of the response properties are left behind. check if response is instanceof AxiosError, then return/throw the response otherwise return response.data