addErrorHandler won't catch application died in status LOADING_SOURCE_CODE when using single-spa layout engine.

[henricoleodra]

Hello there, I got a bug that I don't know how to handle it. I tried to add addErrorHandler in the root config of my single spa. And currently, I am also using the single-spa-layout which requires me to constructLayoutEngine. Logically the error should have been caught. But weirdly after catching the error, I got the same error and I couldn't catch it and it is being displayed on the browser console. But when I remove the constructLayoutEngine the error is not being displayed at all and it was successfully caught by my errorHandler. I am trying to handle the application "LOAD_ERROR" and return an error UI.

To reproduce this error you can download my code and npm install both root-config and mfe-home. And only run the root config by doing npm start on the root config. And when you access http://localhost:9000/ and open the console by inspecting the page there will be an error being displayed.

I am trying to remove this error by catching it. I was able to successfully do it the first time but for the second time, it failed.

Here are some screenshot of my code and the error that I am getting:

I would much appreciate any help, thank you.

[EvgeniyTT]

I have the same issue.
I'm using the SingleSpa Layout Engine.
My host app looks like the following:

const routes = constructRoutes(microfrontendLayout, htmlLayoutData);
const applications = constructApplications({
  routes,
  loadApp: ({ name }) => System.import(name),
});
applications.forEach(registerApplication);

const layoutEngine = constructLayoutEngine({ routes, applications });
layoutEngine.activate();

addErrorHandler(async err => {
  if (getAppStatus(err.appOrParcelName) === LOAD_ERROR) {
    System.delete(System.resolve(err.appOrParcelName));
    await unloadApplication(err.appOrParcelName);
  }
});

start();

If an application fails to load - the addErrorHandler function is called. My expectation was that it's gonna try to refetch and reload the application, and even stack in a loop if the application continues to fail on loading, but I don't see in fact the second attempt to fetch and load the application.

There are 2 questions:

1. What am I doing wrong and how to force single spa to fetch and load the application again if the first attempt failed?
2. I see this issue happens quite often. All other files are downloaded fine, but applications. What is the reason for this issue and why do applications tend to fail on loading?

Thanks in advance!

[robmosca]

Added a comment here

@EvgeniyTT, have you tried calling unloadApplication with a timeout? setTimeout(() => unloadApplication(err.appOrParcelName), 1000);:

  if (getAppStatus(err.appOrParcelName) === LOAD_ERROR) {
    System.delete(System.resolve(err.appOrParcelName));
    setTimeout(() => unloadApplication(err.appOrParcelName), 1000);
  }

It should retry until the bundle for the app becomes available. You could also try to limit the number of retrials to avoid an infinite loop.