#ErrorBoundary seems to cause loop in firefox when loader throws an Error after 1 sec.

1 messages · Page 1 of 1 (latest)

bronze gull
#

I discovered that firefox gets stuck in a request loop when the loader in the requested route takes > 1 Sec. and an ErrorBoundary is exported. But this happens only on the second reload of the page.
Chrome seems to not show this behavior.

To reproduce you could just create a simple remix app with create-remix and replace the index page with this:

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export async function loader() {
  var x:any = undefined;
  const timeout = (ms: number) => {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
  await timeout(1101);
  const g = x.nothing;

  return json("data")
}

export function ErrorBoundary({ error }: { error: Error }) {
  return (
    <div>
      <h1>Error</h1>
      <p>{error.message}</p>
      <p>The stack trace is:</p>
      <pre>{error.stack}</pre>
    </div>
  );
}


export default function Index() {
  const data = useLoaderData();


  return (data);
}

If you remove the ErrorBoundary and open a new page and reload it the loop doesn't happen.

Am I doing something wrong or is this a bug?

bronze gull
#

I just noticed it only happens in dev mode.
Also in the log it says that the websocked was disconnected.