Open ppmmwozuiai opened 2 years ago
... qiankun: { master: { sandbox: true, apps: [ { name: 'app1', entry: '//localhost:17001', }, { name: 'app2', entry: '//localhost:17002', }, ], }, }, ...
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
yes, it's a vital problem, we could throw a friendly error page by it.
环境
config/config.ts配置
config/routes.ts配置
问题描述
当主应用配置了微前端子应用后打开浏览器访问子应用所在路由,例如:/app1,如果子应用没有启动,就会抛出异常导致整个页面崩溃
异常信息
引发异常的原因似乎是因为src/.umi/plugin-qiankun/MicroApp.tsx 调用qiankun的api loadMicroApp 时因为import-html-entry失败导致异常没有被catch直接抛到了顶部导致页面崩溃。
在路由配置时即使设置了errorBoundary也没有用。
希望插件能够提供一种降级机制,当子应用不可用时或异常时可以catch并降级到自定义的渲染方式(错误页或者404路由之类的)
复现库:https://github.com/ppmmwozuiai/master_demo