useFetcher().load() and network failures

[marwan38]

EDIT: I've moved this to remix-run/react-router#10013 (comment)

Running useFetcher().load() that fails due to a network connection problem: either net::ERR_CONNECTION_REFUSED or net::ERR_NETWORK_CHANGED throws an error that can't be caught an handled on the spot, it propagates up to the error boundary. The easiest way to reproduce this is to create a poll that runs the load() in an interval, and then closing down the remix server.

function Component() {
  const fetcher = useFetcher();
  useEffect(() => {
    setInterval(() => { fetcher.load('/user/notifications') }, 1000);
  }, []);
}

My work around is

function Component() {
  const fetcher = useFetcher();
  useEffect(() => {
    setInterval(() => {
      // /dev/null is a route that does nothing, it's just there as a "health check"
      fetcher.load("/dev/null").then(() => fetcher.load("/user/notifications"));
    }, 1000);
  }, []);
}

I expect to be able to handle errors gracefully, but, the load() function is handled internally and the error cannot be caught.
What are the work arounds? Is this the intention of load()?

[ZipBrandon]

I'm in a similar situation where I would like to expose these errors in a toast fashion rather than crashing the interface to the route boundary.

[marwan38]

I've added my current work around. Not great but it does work most of the time.

[marwan38]

Moved to remix-run/react-router#10013 (comment)

[kevinreber]

Also running into a similar issue using an interval to refetch our page data, but using a useRevalidator()

import { useRevalidator } from "@remix-run/react";

const THIRTY_SECONDS_IN_MS = 30 * 1000;

function Component (){
  const revalidator = useRevalidator();

  /**
   * @description
   * Refetch page data every 30 seconds
   *
   * @references
   * - Refresh Route Data API: https://github.com/remix-run/remix/discussions/1996#discussioncomment-4731905
   * - `useFetcher` vs `useRevalidator` Discussion: https://github.com/remix-run/remix/issues/6587#issuecomment-1590076789
   */
  React.useEffect(() => {
    const interval = setInterval(() => {
      if (document.visibilityState === "visible") {
        revalidator.revalidate();
      }
    }, THIRTY_SECONDS_IN_MS);

    return () => clearInterval(interval);
  }, []);

}