using onErrorRetry without compromising on Exponential backoff algorithm

[sairajchouhan]

Essentially I want to do these

• Do not retry if the status of the response is 404
• Retry for all other errors

I am using onErrorRetry in global SWRConfig for this purpose.

// _app.tsx
 <SWRConfig
      value={{
        fetcher: (baseURL, config: AxiosRequestConfig) => axios({ ...config, baseURL }),
        onErrorRetry: (err) => {
          if (err.response.status === 404) return
        },
      }}
    >
      <Component {...pageProps} />
</SWRConfig>

but it seems that I do not retry exponentially after I provide onErrorRetry, and it is well documented too

You can also override this behavior via the onErrorRetry option:

Is there any way, that I can stop retrying for 404 errors without compromising on the Exponential backoff algorithm for other types of errors

Click here for the codesandbox with demonstration

[mpeterdev]

I think this behavior would be a great addition to the library. Would the team accept a contribution to add a configuration which allows bailing on certain errors without overriding the entire error retry process?

I think it would make sense to be able to provide a function that receives the error and returns a boolean on whether to proceed with the default retry logic. I could see this being a new config or updating shouldRetryOnError to also accept a function

swr/src/use-swr.ts

Line 307 in de17eb6

if (config.shouldRetryOnError) {

could be updated to something like

if ((typeof config.shouldRetryOnError === 'function' && config.shouldRetryOnError(err)) || (typeof config.shouldRetryOnError === 'boolean' && config.shouldRetryOnError)) {

then if you want to keep using exponential backoff but bail only on 401s for example, you could provide the following

shouldRetryOnError: (err) => err.statusCode !== 401

[shuding]

updating shouldRetryOnError to also accept a function

This sounds like a great feature to have, feel free to open a PR for it! 👍

[sairajchouhan]

I thought this was not a good thing to have since no one replied to it😅

[zgreen]

Was looking for the same thing and stumbled on this discussion. But it seems this feature was actually added in 1.2.1: https://github.com/vercel/swr/releases/tag/1.2.1 (it's not just not well documented right now)

So, thanks!

[wmadden]

For anyone who finds this thread in the future, you can simply delegate to the original SWR implementation of onErrorRetry(), which implements the exponential backoff, from your own implementation. E.g.:

import { defaultConfig } from "swr/_internal";

<SwrConfig value={{
  onErrorRetry(error, ...args) {
    if ( ... ) {
      // Your custom logic
    } else {   
      // Otherwise use the default behavior
      defaultConfig.onErrorRetry(error, ...args);
    }
  }}
/>

[samuliasmala]

Has anyone found a good solution for typings when delegating the onErrorRetry()? The type of the config parameter is not correct when delegating it:

The error message I get for the underlined config is as follows:

Argument of type 'Readonly<PublicConfiguration<ResData, ErrorResponse, (args: string) => FetcherResponse<ResData>>>' is not assignable to parameter of type 'Readonly<PublicConfiguration<any, any, BareFetcher<unknown>>>'.
  Types of property 'onLoadingSlow' are incompatible.
    Type '(key: string, config: Readonly<PublicConfiguration<ResData, ErrorResponse, (args: string) => FetcherResponse<ResData>>>) => void' is not assignable to type '(key: string, config: Readonly<PublicConfiguration<any, any, BareFetcher<unknown>>>) => void'.ts(2345)

I can fix it with the following by changing the fetcher type from the correct (path: string) => Promise<ResData> to (path: string) => unknown but it feels like a hack since it uses a wrong type and an import from swr/_internal.

import useSWR, { useSWRConfig } from 'swr';
import { PublicConfiguration } from 'swr/_internal';

  const { onErrorRetry } = useSWRConfig();

  return useSWR<ResData, ErrorResponse, string>(path, fetcher, {
    onErrorRetry(err, key, config, revalidate, revalidateOpts) {
      const configForDelegate = config as Readonly<PublicConfiguration<ResData, ErrorResponse, (path: string) => unknown>>;
      if (err.status === 404) return;
      onErrorRetry(err, key, configForDelegate, revalidate, revalidateOpts);
    },
  });