[question] whats the best way to handle failed imports?

[dragidavid]

Probably a dumb question but really curious what the best way is to handle if an import like the one below fails. Could be because that remote is down or just a generic error.

If we go with the example below, I've noticed that if main is down (for example, I don't start the dev server), then the GET request that wants to get ExposedLayout just hangs and doesn't resolve at all.

const Layout = dynamic(
  () => {
    const mod = import('main/ExposedLayout');
    return mod;
  },
  { ssr: false },
);

[pavandv]

AFAIK, they are 2 ways to handle a failed remote.

1. The easiest, is to write an errorBoundary around your Layout component.
2. Complex solution, you can use a PromiseTemplate from nextjs-mf package in your remotes configuration for the remote application, and then during failure of downloading your remote, resolve it to something else perhaps fallback to a working version of the remote.

@ScriptedAlchemy correct me If I'm wrong.

[dragidavid]

Thanks for the quick answer! I've tried using ErrorBoundary but it didn't work as there is no error in my case.

The request never actually finishes for some reason which is why its difficult to tell if there is an error.

[dragidavid]

Actually, I found that if I use the loading property on the import, I can check if there is an error when importing the remote component/page.

It gives you something like this:

{
  "isLoading": false,
  "pastDelay": false,
  "timedOut": false,
  "error": {
    "message": "Loading script failed.\n(error: http://localhost:4000/_next/static/chunks/remoteEntry.js?t=1667164043492)\nwhile loading \"./App\" from webpack/container/reference/turboappone\nwhile loading \"./App\" from webpack/container/reference/turboappone\nwhile loading \"./App\" from webpack/container/reference/turboappone\nwhile loading \"./App\" from webpack/container/reference/turboappone"
  }
}

This way its easy to tell if there was an error, so the question is kind of answered 😄

I still want to keep this issue open though in case anyone else has a better solution.

[trent-boyd]

I started with an error boundary too, but only had a stack trace rendered to the page. I could prevent that by adding a catch to the import call. The error would be logged to the console for easier debugging, and then I could display some fallback UI.

const RemoteApp = dynamic(
  () =>
    import("remote/app").catch(error => {
      console.error(error);
      return function Fallback() {
        return (
          <span style={{color: "red"}}>
            There was a problem importing your component. Check the console for
            more details.
          </span>
        );
      };
    }),
  {ssr: false}
);

I haven't tried it, but the fallback component could theoretically be the same fallback component you use in your error boundary.

[ScriptedAlchemy]

yeah i usually to import().catch(import(npm))

in future ill introduce delegate modules which will offer more power