how to handle subapp errors and switching to non-erroring subapp

[vivekVells]

Newbee here! Trying to build and handle microapps using quiankun.

Issue:

• if any sub app errors out, unable to switch to other subapps -> pretty much related to 在子应用的bootstrap阶段发生错误，会无法再加载其他的应用 #886

Question:
is there any error boundary related solution that can be leveraged by passing something like a errorBoundary prop to the subapps during registering the micro apps like below

registerMicroApps(
  [
    {
      name: 'react16',
      entry: '//localhost:7100',
      container: '#subapp-viewport',
      loader,
      activeRule: '/react16',
      // similar to the one mentioned here https://single-spa.js.org/docs/ecosystem-react/#options
      errorBoundary(err, info, props) {
        // https://reactjs.org/docs/error-boundaries.html
        return ( 
          <div>This renders when a catastrophic error occurs</div>
       );
      },
   },
    ...
)

I used the error boundary concept from react to stop any subapp error that would bring down the entire site; but, still unable to switch figure out how to switch different sub app. I can use addGlobalUncaughtErrorHandler to catch the error

Example Scenario:
Note:

• parent app that uses React (using quiankun to register sub apps/microapps)
• 2 microapps avail (React15, React16)
• created an error inside the React16 subapp

Action:

• loaded the subapp React 15
• clicked React16 subapp that throws an error like we expect
• contained that error from React16 subapp from not bubbling up to bring down the entire site using the ErrorBoundary concept from react
• clicked 'React15' subapp from the sidebar, nothing happens

[vivekVells]

was thinking about the following approach. someone correct me if this is not the best one. thanks.

Approach:

• use addGlobalUncaughtErrorHandler to detect the error if happened
• if error captured, then use window.location.href to point to appropriate redirect url - this ideally would be pointing to an error page
• note: the error page should live in the parent app as a separate html file so that it is common for all the subapps

Example:

Description:

• in qiankun examples -> created an error in React15 subapp component (in this file location: qiankun/examples/react15/App.jsx -> just add a variable to render inside the render() function to throw an undefined variable error that brings down the subapp component)

Dev Setup:

1. created error page

• file location: qiankun/examples/main/subapp-error-page.html

2. updated the route to point to this subpage error if any error occurs
   file location: qiankun/examples/main/index.js

addGlobalUncaughtErrorHandler((event) => {
  console.log({'error occurred.... ': event?.error});
  
  if(event?.error) {
    // this would resolve locally as "http://localhost:7099/subapp-error-page.html"
    const redirectUrl = `${window.location.origin}/subapp-error-page.html`;

    // we can make this redirectUrl to point to the ErrorPage
    window.location.href = redirectUrl;
  }
});

Steps & Output:

• goto http://localhost:7099
• click 'React15' on left
• notice the redirect going to http://localhost:7099/subapp-error-page.html

@kuitos any thoughts?