[enhancement] Edge case for loader refetch errors (offline mode?)

[kentcdodds]

Ok, this one's tricky and I'm not sure what do about it. I got an email from one of my users with a situation they ran into on my site:

I just recently pulled up a ton of blog posts to read offline on a flight which worked just fine...until I scrolled to the bottom of the page. Here is an example of the error:

500 - Oh no, something did not go well.
"/blog/how-to-give-rendering-control-to-users-with-prop-getters" is currently not working. So sorry.

Context:

• I loaded up a bunch of blog posts pre-flight in Safari
• Turned off Wifi
• Verified I still could access the previously loaded page
• Closed laptop and awaited flight
• Aboard flight started reading said posts
• Reads to the bottom...and...
• Haha! No more blog post for you! Look at this nice error page instead!!

Here's what I said to them:

The reason this happens is because when you reach the bottom of the article it marks it as "read" in the database. This is a mutation and Remix automatically refetches all data on the page to keep everything up-to-date (like the team rankings which changed because of your read). When that data fetch fails, remix renders my error boundaries which gives you the Kent grimacing 😬 face 😅

Like I said, I'm not sure what to do about this, but I think what I might want is the ability to say: "go ahead and refetch the data, but if it fails, then ignore it" ?? maybe? Definitely open to other ideas here. I'm not sure whether a change is needed in remix...

Thinking about the use case more holistically, if I wanted to build an offline supported version of my app, I would need some way to tell Remix to not attempt to make network requests when the user is offline.

[sergiodxa]

I think Remix can just be smarter here and say "hey the user is offline, so this may fail, let's try anyway in case the app works offline but if it fails do it silently". Doing this will open the door to make offline apps easier, you could for example cache in a Service Workers your loaders or keep some queue of pending mutations there.

This way Remix doesn't even need to know that exists, you make your app as if it was always online, Remix ensure in case you are offline and already loaded a page that page will keep loaded and you can add your offline features in the SW.

[justrhysism]

Are there any plans for Remix apps to leverage Service Workers? This case could then be handled by responding to the app that the request was received and 200 All Good, while the SW deals with the reconnection/resending in the background.

[mattveraldi]

Are there any updates on this issue? I am studying remix, and my only concern so far is that it might not be suitable for PWA apps that needs some offline functionalities (yet).

[manV]

I am using fetcher to load data periodically on a page to refresh it with latest information from the server. I am not sure how to handle network errors in this case. Currently if the browser goes offline while refresh is in progress, the error thrown is caught by error boundary, but in this case I would still like to show user the stale data. I am not sure if I am doing things in the "Remix way" so apologies in advance. Thanks.

[tgdn]

Is there anything new about this? Apart from using something like useQuery I don't see any other solution

[devxpy]

This is stinging us a lot, sometimes with users that are not actually offline, running into TypeError: Failed to fetch , seeing an error page and losing context

Sentry just shows this error, and it's very hard to figure out how to handle this.

TypeError: Failed to fetch
  at <anonymous>(../../../node_modules/@sentry/src/instrument.ts:174:1)
  at fetchData(../../../node_modules/@remix-run/react/dist/esm/data.js:46:24)
  at handler(../../../node_modules/@remix-run/react/dist/esm/routes.js:126:26)
  at runHandler(../../../node_modules/@remix-run/router/router.ts:3503:7)
  at callLoaderOrAction(../../../node_modules/@remix-run/router/router.ts:3550:22)
  at results(../../../node_modules/@remix-run/router/router.ts:2187:9)
  at Array.map(<anonymous>)
  at callLoadersAndMaybeResolveData(../../../node_modules/@remix-run/router/router.ts:2186:24)
  at handleLoaders(../../../node_modules/@remix-run/router/router.ts:1553:13)
  at startNavigation(../../../node_modules/@remix-run/router/router.ts:1294:56)
  at unlistenHistory(../../../node_modules/@remix-run/router/router.ts:897:16)
  at handlePop(../../../node_modules/@remix-run/router/history.ts:620:7)
  at sentryWrapped(../../../node_modules/src/helpers.ts:98:1)

Remix also throws this sometimes after a TypeError: Failed to fetch -- doesn't make any sense to me

TypeError: Cannot read properties of null (reading 'appendChild')
  at <anonymous>(../../../node_modules/@remix-run/react/dist/esm/links.js:73:19)
  at new Promise(<anonymous>)
  at prefetchStyleLink(../../../node_modules/@remix-run/react/dist/esm/links.js:54:10)
  at Array.map(<anonymous>)
  at prefetchStyleLinks(../../../node_modules/@remix-run/react/dist/esm/links.js:51:35)
  at loadRouteModuleWithBlockingLinks(../../../node_modules/@remix-run/react/dist/esm/routes.js:110:9)

This is my error boundary:

export function ErrorBoundary() {
  const error = useRouteError();
  captureRemixErrorBoundaryError(error);

  // when true, this is what used to go to `CatchBoundary`
  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <p>Status: {error.status}</p>
        <pre>{JSON.stringify(error.data)}</pre>
      </div>
    );
  }

  return (
    <div>
      <h1>Uh oh ...</h1>
      <p>Something went wrong.</p>
      <pre>{`${error}`}</pre>
    </div>
  );
}

[colinramsay]

@devxpy we are also seeing this when using useRevalidator. It is sporadic and I'm not convinced the users are offline when it happens. Which hosting provider are you using?

[ishaank15]

Any update of how to handle such offline errors in the middle of the navigation?
I tried via useFetcher hook and check network status before making an actual call. This trick works but implementing them for all action is very cumbersome.