@ice/mf-runtime 0.0.2 → 0.0.3

package/README.md

@@ -186,7 +186,6 @@ function App() {
   );
 }
 ```
-
 ## API
 
 ### init(options)
@@ -217,10 +216,11 @@ RemoteConfig 配置：
 | runtime | React 运行时配置 | `{ react: React, reactDOM: ReactDOM }` | - |
 | publicPath | 远程模块静态资源地址 | `string` | - |
 | LoadingComponent | 加载状态组件 | `ReactNode` | `<div>Loading...</div>` |
+| ErrorComponent | 错误回退组件 | `ReactNode` | `<div>远程模块加载失败: {error.message}</div>` |
+| onError | 错误处理回调函数 | `(error: Error, info: { componentStack: string }) => void` | - |
 
 
 ## 注意事项
 
 1. host name 请保证全局唯一。
 2. remote name 的 package.json name 请保证全局唯一，否则会出现意料之外的缓存问题。
-

package/es2017/RemoteModule.d.ts

@@ -8,6 +8,10 @@ interface RemoteModuleOptions {
     };
     publicPath?: string;
     LoadingComponent?: React.ReactNode;
+    ErrorComponent?: React.ReactNode;
+    onError?: (error: Error, info: {
+        componentStack: string;
+    }) => void;
 }
-export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, }: RemoteModuleOptions) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
+export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, }: RemoteModuleOptions) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
 export {};

package/es2017/RemoteModule.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
 import { loadRemote } from '@module-federation/runtime';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { FallBack } from './FallBack';
 import { setFederatedModulePublicPath } from './set-public-path';
 function useDynamicImport({ module, scope }) {
@@ -23,7 +24,7 @@ function useDynamicImport({ module, scope }) {
     ]);
     return component;
 }
-export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent })=>{
+export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError })=>{
     var _remoteModule;
     if (publicPath) {
         setFederatedModulePublicPath(scope, publicPath);
@@ -53,10 +54,20 @@ export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingCompon
     const Loading = LoadingComponent || /*#__PURE__*/ _jsx("div", {
         children: "Loading..."
     });
+    const ErrorFallback = ({ error })=>ErrorComponent || /*#__PURE__*/ _jsxs("div", {
+            children: [
+                "远程模块加载失败: ",
+                error.message
+            ]
+        });
     if (Component) {
-        return /*#__PURE__*/ _jsx(React.Suspense, {
-            fallback: Loading,
-            children: /*#__PURE__*/ _jsx(Component, {})
+        return /*#__PURE__*/ _jsx(ErrorBoundary, {
+            FallbackComponent: ErrorFallback,
+            onError: onError,
+            children: /*#__PURE__*/ _jsx(React.Suspense, {
+                fallback: Loading,
+                children: /*#__PURE__*/ _jsx(Component, {})
+            })
         });
     }
     return Loading;

package/esm/RemoteModule.d.ts

@@ -8,6 +8,10 @@ interface RemoteModuleOptions {
     };
     publicPath?: string;
     LoadingComponent?: React.ReactNode;
+    ErrorComponent?: React.ReactNode;
+    onError?: (error: Error, info: {
+        componentStack: string;
+    }) => void;
 }
-export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, }: RemoteModuleOptions) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
+export declare const RemoteModule: ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, }: RemoteModuleOptions) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
 export {};

package/esm/RemoteModule.js

@@ -1,10 +1,11 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
 import { loadRemote } from "@module-federation/runtime";
 import * as React from "react";
 import { useEffect, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import { FallBack } from "./FallBack";
 import { setFederatedModulePublicPath } from "./set-public-path";
 function useDynamicImport(param) {
@@ -61,7 +62,7 @@ function useDynamicImport(param) {
     return component;
 }
 export var RemoteModule = function(param) {
-    var module = param.module, scope = param.scope, runtime = param.runtime, publicPath = param.publicPath, LoadingComponent = param.LoadingComponent;
+    var module = param.module, scope = param.scope, runtime = param.runtime, publicPath = param.publicPath, LoadingComponent = param.LoadingComponent, ErrorComponent = param.ErrorComponent, onError = param.onError;
     var _remoteModule;
     if (publicPath) {
         setFederatedModulePublicPath(scope, publicPath);
@@ -97,10 +98,23 @@ export var RemoteModule = function(param) {
     var Loading = LoadingComponent || /*#__PURE__*/ _jsx("div", {
         children: "Loading..."
     });
+    var ErrorFallback = function(param) {
+        var error = param.error;
+        return ErrorComponent || /*#__PURE__*/ _jsxs("div", {
+            children: [
+                "远程模块加载失败: ",
+                error.message
+            ]
+        });
+    };
     if (Component) {
-        return /*#__PURE__*/ _jsx(React.Suspense, {
-            fallback: Loading,
-            children: /*#__PURE__*/ _jsx(Component, {})
+        return /*#__PURE__*/ _jsx(ErrorBoundary, {
+            FallbackComponent: ErrorFallback,
+            onError: onError,
+            children: /*#__PURE__*/ _jsx(React.Suspense, {
+                fallback: Loading,
+                children: /*#__PURE__*/ _jsx(Component, {})
+            })
         });
     }
     return Loading;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/mf-runtime",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "ice mf runtime",
   "files": [
     "esm",
@@ -48,7 +48,8 @@
     "@ice/jsx-runtime": "^0.2.0",
     "@module-federation/runtime": "^0.11.2",
     "@module-federation/runtime-core": "^0.11.2",
-    "@swc/helpers": "^0.5.1"
+    "@swc/helpers": "^0.5.1",
+    "react-error-boundary": "^5.0.0"
   },
   "devDependencies": {
     "@ali/pkg-plugin-dev": "^1.0.0",