Return stale data instead of error if fetch is aborted due to page unload

[hrabur]

In case of slow connection if user navigates off (unload) the page during the revalidation, browser aborts the fetch with an error and useSWR hook returns an error while page is still visible (after "beforeunload", but before "unload" event).

In such a case the user may see an error message or error alert for a while when clicks on a link moving to another page (outside the SPA) causing frustration.

The fix is to always returning stale data after "beforeunload" event is triggered instead of error. It could be implemented in the application logic itself, but isn't it the best to be handled by SWR?

Here is an example code of the in app logic fix to depict better the problem:

export default function Test() {
  const [unloading, setUnloading] = useState(false);
  const { data, error } = useSWR("/test");

  useEffect(() => {
    window.addEventListener("beforeunload", () => setUnloading(true));
  }, []);

  if (!unloading && error) {
    console.error("ERROR!!!");
    return <h1>ERROR!!!</h1>;
  } else if (!data) {
    return <h1>Loading ...</h1>;
  } else {
    return <h1>{data.message}</h1>;
  }
}

[huozhi]

@hrabur I'm not sure what kind of fetcher you're using, but you might be able to handle the error thrown from fetcher due to browser navigation. if the error is caused by navigation, you can ignore it and let fetcher resolve. swr will use the error thrown from fetcher as returning error.

[hrabur]

@huozhi Thanks for your answer, but I think it doesn't help.

I use Window.fetch, but there are 2 problems not related to the fetcher:

• for example Firefox throws NetworkError indistinguishable from other network errors, but in your proposal I need to know when to hide it (after "beforeunload") and when to let it rich SWR
• even if hide the error and let the fetcher resolve I have to provide from somewhere the stale data in order to let SWR return it to the React component. Is there a way fetcher to return something that tells SWR to return stale data?

[huozhi]

there's a way to use cache API to retrieve the last resolve data in swr cache as below.

import {cache} from 'swr'

function fetcher(key) {
   const lastData = cache.get(key)
   // ...
}

or you can use mutate API with lastData to update data or clear error when "beforeunload" event is triggered

[hrabur]

Thanks a lot @huozhi .

Inspired by you proposal to use mutate API and based on the documentation:

Note that data and error can exist at the same time. So the UI can display the existing data, while knowing the upcoming request has failed.

I've implemented a solution that uses the last data when errors appear after "beforeunload" event to update the cache. It works fine for my case.

const useUnloadingAwareSwr = url => {
  const [unloading, setUnloading] = useState(false);
  const handleBeforeUnload = () => setUnloading(true);

  useEffect(() => {
    window.addEventListener("beforeunload", handleBeforeUnload);
  }, []);

  const result = useSWR(url);
  if (unloading && result.data && result.error)
    result.mutate(result.data, false);
  return result;
};

Because navigating out on slow connection or slowly responding API, sounds like not very unusual case. Do you think it is good idea to make SWR itself handle this case. I imagine option like returnStaleDataOnUnload that if true will handle the case internally. What do you think?

[huozhi]

this is definitely a very good case for SWR to enhance itself. 👍 we might want to have a more general flag to identify SWR is paused/idled, and define the corresponding behaviors like: skipping fetcher calls, swallow network errors, hang up renders etc.

we'll surly consider it! thanks for bringing this up

[arnarleifs]

Has this been enhanced in SWR? I am facing a similar issue, where I am running a page which offers a dashboard with data based on filters. Every time the user changes the filter I want to abort the previous HTTP request so we aren't running multiple HTTP requests in the background with data which is not relevant anymore. If I abort the previous HTTP request and select the same filter (results in the same key) I get an error state until I get the data back from the server. Is there a way to clear the cache key once aborted - so I start the process like I would issuing a brand new request?