Handling poor / no internet connection

[Murray2015]

Hi all,

Not marking this as a bug as potentially just my own misunderstanding of the docs. In brief, I’m struggling gracefully failing if internet connection drops out and an update is triggered.

I have a resource as such:

import request from "superagent";

export default class EntryResource extends Resource {
  readonly UserCode: string | undefined = undefined;

  static async fetch<T extends typeof Resource>(
    this: T,
    method: Method = "get",
    url: string,
    body?: Readonly<object | string>
  ) {
    const req = request[method](url);
    return req
      .then((res) => {
        if (res.body.items) return res.body.items;
        if (res.body.status === "fail") return [];
        else return res.body.codes;
      })
  }

  static update<T extends typeof Resource>(this: T) {
    return {
      ...this.updateShape(),
      options: {
        ...this.getFetchOptions(),
        optimisticUpdate: (params: any, body: any) => ({
          ...body,
          otherKeys: etc,
        }),
      },
    };
  }

  pk() {
    return this.etc;
  }

  static urlRoot = `etc`;
}; 

And I’m wrapping the various components in suspense and NetworkErrorBoundarys.

<Suspense fallback={<Loading />}>
                <NetworkErrorBoundary fallbackComponent={ErrorPage}>
			<Component /> (which uses the resource above)
                </NetworkErrorBoundary>
 </Suspense>

The resource works fine until there is an internet connection dropout. At this point the NetwrokErrorBoundary seems to be missed, leading to displaying the suspense’s loading spinner infinitely.

The behaviour I’d preferably like would be to cache the update data and try to send it again when there is an internet connection. Failing that, I’d like to stop attempting the update/PUT and display a no internet connection popup, keeping displaying the data before the update call. I’ve had no joy catching the error in the fetch and returning something to trigger an error as this breaks the expected data shape. Overall, I’m unsure if this behaviour (specifically missing the NetworkErrorBoundary) is expected and therefore is or isn’t a bug. Can anyone please advise on this or on my wider aims of handling this specific error?

[ntucker]

Thanks for the report Murray!

If you want your app to presume it updated even when the network is down, you can achieve this using optimistic updates, combined with a fetch that waits til network connection is restored.

An example of online/offline detection can be found here: https://github.com/coinbase/rest-hooks/blob/master/packages/rest-hooks/src/manager/PollingSubscription.ts#L136

For reference, NetworkErrorBoundary catches any error that has a 'status' member. You can use a general error boundary component to catch other such errors. In the built in fetch (non-custom) there is a mechanism to add the status member for cases like CORS or network failures that would not normally result in a status member.

[Murray2015]

@ntucker great, thanks for the quick reply! I'll have a look at those and see what I can get working