@lark-apaas/client-toolkit 1.2.48 → 1.2.50

package/lib/components/AppContainer/__test__/safety-error-boundary.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/AppContainer/__test__/safety-error-boundary.test.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { slardar } from "@lark-apaas/internal-slardar";
+import { SafetyErrorBoundary } from "../safety-error-boundary.js";
+vi.mock('@lark-apaas/internal-slardar', ()=>({
+        slardar: {
+            sendLog: vi.fn()
+        }
+    }));
+describe('SafetyErrorBoundary', ()=>{
+    it('renders children when no error', ()=>{
+        render(/*#__PURE__*/ jsx(SafetyErrorBoundary, {
+            children: /*#__PURE__*/ jsx("div", {
+                "data-testid": "child",
+                children: "child content"
+            })
+        }));
+        expect(screen.getByTestId('child').textContent).toBe('child content');
+    });
+    it('renders null fallback when child throws', ()=>{
+        const Throwing = ()=>{
+            throw new Error('Failed to fetch dynamically imported module: safety-XXX.js');
+        };
+        const errSpy = vi.spyOn(console, 'error').mockImplementation(()=>{});
+        const { container } = render(/*#__PURE__*/ jsx(SafetyErrorBoundary, {
+            children: /*#__PURE__*/ jsx(Throwing, {})
+        }));
+        expect(container.innerHTML).toBe('');
+        errSpy.mockRestore();
+    });
+    it('logs error via slardar when child throws', ()=>{
+        const Throwing = ()=>{
+            throw new Error('chunk load failed');
+        };
+        const errSpy = vi.spyOn(console, 'error').mockImplementation(()=>{});
+        slardar.sendLog.mockClear();
+        render(/*#__PURE__*/ jsx(SafetyErrorBoundary, {
+            children: /*#__PURE__*/ jsx(Throwing, {})
+        }));
+        expect(slardar.sendLog).toHaveBeenCalledTimes(1);
+        expect(slardar.sendLog).toHaveBeenCalledWith(expect.objectContaining({
+            content: expect.stringContaining('chunk load failed'),
+            level: 'error',
+            extra: expect.objectContaining({
+                stack: expect.any(String),
+                componentStack: expect.any(String)
+            })
+        }));
+        errSpy.mockRestore();
+    });
+});

package/lib/components/AppContainer/index.js

@@ -7,6 +7,7 @@ import IframeBridge from "./IframeBridge.js";
 import { Toaster } from "./sonner.js";
 import { PageHoc } from "./PageHoc.js";
 import { reportTeaEvent } from "./utils/tea.js";
+import { SafetyErrorBoundary } from "./safety-error-boundary.js";
 import { useAppInfo } from "../../hooks/index.js";
 import { TrackKey } from "../../types/tea.js";
 import { slardar } from "@lark-apaas/internal-slardar";
@@ -196,9 +197,11 @@ const AppContainer_AppContainer = (props)=>{
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(Suspense, {
-                fallback: null,
-                children: /*#__PURE__*/ jsx(Safety, {})
+            /*#__PURE__*/ jsx(SafetyErrorBoundary, {
+                children: /*#__PURE__*/ jsx(Suspense, {
+                    fallback: null,
+                    children: /*#__PURE__*/ jsx(Safety, {})
+                })
             }),
             /*#__PURE__*/ jsx(QueryProvider, {
                 children: /*#__PURE__*/ jsx(ConfigProvider, {

package/lib/components/AppContainer/safety-error-boundary.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+interface Props {
+    children: React.ReactNode;
+}
+interface State {
+    hasError: boolean;
+}
+/**
+ * SafetyErrorBoundary - 包裹 Safety 徽章的 lazy import 失败兜底
+ *
+ * Why: AppContainer 内 `<Suspense fallback={null}><Safety /></Suspense>` 中 Safety 是 React.lazy
+ * 拆出的非核心徽章 chunk。chunk 加载失败（CDN 缓存窗 / 部署漂移 / dev preview hash 漂移 / 网络抖动）
+ * 时 rejected Promise 越过 Suspense 上抛，会冒到 React root 让整应用 unmount = 白屏。
+ *
+ * ErrorBoundary 把失败局限在徽章自身：徽章不显示，应用继续跑。同时上报 slardar 便于事后归因。
+ */
+export declare class SafetyErrorBoundary extends React.Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(): State;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};

package/lib/components/AppContainer/safety-error-boundary.js

@@ -0,0 +1,29 @@
+import react from "react";
+import { slardar } from "@lark-apaas/internal-slardar";
+class SafetyErrorBoundary extends react.Component {
+    state = {
+        hasError: false
+    };
+    static getDerivedStateFromError() {
+        return {
+            hasError: true
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        try {
+            slardar.sendLog({
+                content: `safety_chunk_load_error: ${error.message}`,
+                level: 'error',
+                extra: {
+                    stack: error.stack ?? '',
+                    componentStack: errorInfo.componentStack ?? ''
+                }
+            });
+        } catch  {}
+    }
+    render() {
+        if (this.state.hasError) return null;
+        return this.props.children;
+    }
+}
+export { SafetyErrorBoundary };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.48",
+  "version": "1.2.50",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [