umijs / plugins

🍣 The one-stop shop for official Umi plugins and presets.
348 stars 238 forks source link

[Feature Request][plugin-qiankun]子应用没有启动时抛出异常导致整个页面崩溃,希望提供降级机制 #889

Open ppmmwozuiai opened 2 years ago

ppmmwozuiai commented 2 years ago

环境

config/config.ts配置

...
  qiankun: {
    master: {
      sandbox: true,
      apps: [
        {
          name: 'app1',
          entry: '//localhost:17001',
        },
        {
          name: 'app2',
          entry: '//localhost:17002',
        },
      ],
    },
  },
...

config/routes.ts配置

export default [
  { path: '/welcome', name: 'welcome', icon: 'smile', component: './Welcome' },
  { path: '/app1', name: 'app1', microApp: 'app1', microAppProps: { errorBoundary: () => '错啦' } },
  { path: '/app2', name: 'app2', microApp: 'app2', microAppProps: { errorBoundary: () => '错啦' } },
  { path: '/', redirect: '/app1' },
  {
    component: './404',
  },
];

问题描述

当主应用配置了微前端子应用后打开浏览器访问子应用所在路由,例如:/app1,如果子应用没有启动,就会抛出异常导致整个页面崩溃

异常信息

Unhandled Rejection (TypeError): Failed to fetch
x
.appnode_modules/import-html-entry/esm/index.js:264:55
  261 |   getTemplate = opts.getTemplate || defaultGetTemplate;
  262 | }
  263 | 
> 264 | return embedHTMLCache[url] || (embedHTMLCache[url] = fetch(url).then(function (response) {
      |                                                     ^  265 |   return readResAsString(response, autoDecodeResponse);
  266 | }).then(function (html) {
  267 |   var assetPublicPath = getPublicPath(url);
View compiled

引发异常的原因似乎是因为src/.umi/plugin-qiankun/MicroApp.tsx 调用qiankun的api loadMicroApp 时因为import-html-entry失败导致异常没有被catch直接抛到了顶部导致页面崩溃。

在路由配置时即使设置了errorBoundary也没有用。

希望插件能够提供一种降级机制,当子应用不可用时或异常时可以catch并降级到自定义的渲染方式(错误页或者404路由之类的)

复现库:https://github.com/ppmmwozuiai/master_demo

SlahserZ commented 1 year ago

yes, it's a vital problem, we could throw a friendly error page by it.