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

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 },
);

[ScriptedAlchemy]

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

in future ill introduce delegate modules which will offer more power

[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.