Error handling

[metaraja]

Whenever a App is down - catch the exception and display friendly message to users.

singleSpa.addErrorHandler(err => {
    if (singleSpa.getAppStatus(err.appOrParcelName) === singleSpa.LOAD_ERROR) {
        System.delete(System.resolve(err.appOrParcelName));
    }
    let el = document.getElementById("content");
    el.innerHTML = "<h1>Unable to load the app</h1>" + "<h4>" + err + "</h4>";
    document.body.appendChild(el);
})

To Reproduce

Sample -- Portal.zip

Apps -- Navbar, Home, Pvt
Root app is the bridge between these 3 apps and navbar has link to Home and Pvt apps.

Run the apps locally,
Root app: yarn start --port 9000
NavBar app: yarn start --port 8500
Home app: yarn start --port 8600
Pvt App: DO NOT RUN IT

Steps:

1. First time when you click pvt link, exception will be handled in root (addErrorHandler method) and friendly message will be displayed.
2. Navigate to Home app -- home app will be loaded and immediately pvt error message will be displayed.

Expected behavior

Once we move to a working app, error message should go away.

Screenshots and/or console output

Step 1. Loading home page/app first time

Step 2. Navigating to Pvt app first time

Step 3. Navigating back to home page/app

Additional context

I have created these projects using create-single-spa.

Exception is caught again after redirecting to home page - PFA console log.

Appreciate your inputs. I would like to know whether it is a problem with my code or Single-SPA to proceed further.

[joeldenning]

Hi @metaraja, thanks for the clear description and the zip file with your code. I was able to reproduce the problem and have confirmed that it is a bug with single-spa. One thing to note is that to reproduce the issue, you must first go to the home page before going to pvt, and then go back to the home page.

The bug was a regression caused by this performance-related refactor that was released in single-spa@5. I will put together a fix today for it.

[metaraja]

Thanks for the quick response, waiting for the fix :-)

[joeldenning]

#638 fixes this - we'll review it probably today and release a new patch.

[joeldenning]

Fix released in https://github.com/single-spa/single-spa/releases/tag/v5.6.1

[actionanand]

I'm still facing the same issue.

Please find the dependencies as below:

"single-spa": "^5.9.3",
 "single-spa-layout": "^2.1.0"

I fixed this the following way:

window.addEventListener('single-spa:before-app-change', evt => {
  let el = document.getElementById("content");
  errorMsg = ''
  el.innerHTML = errorMsg;
});

[debasis209]

Hi Anand raja,@actionanand I am trying to catch the error if the module not loading ,so i try to use your code ,like direct copy and paste .But it is showing the error,Can you please share the complete code ,I am trying to use in angular.Please help.

[debasis209]

we use the code in angular to load the parcel.
async config:any=()=>window.system.import('module which is needed for us').then(module=>module.load()).catch(error=>{console.error('module not loaded');
});
but it is not coming to catch each time for each error,So we need some code which will catch each error to load the module.So
please help