@lark-apaas/fullstack-rspack-preset 1.0.7 → 1.0.8-alpha.log.1

package/lib/overlay/components.d.ts

@@ -2,14 +2,7 @@
  * 错误容器组件
  * @param {*} document
  * @param {*} root
- * @param {object} props
- * @param {string} props.errorMessage - 错误信息
- * @param {function} props.onRepairClick - 修复按钮点击事件
- * @param {function} props.onCopyClick - 复制按钮点击事件
+ * @param {string} errorTitle 错误标题
  */
-export function ErrorContainer(document: any, root: any, props: {
-    errorMessage: string;
-    onRepairClick: Function;
-    onCopyClick: Function;
-}): void;
+export function ErrorContainer(document: any, root: any, errorTitle: string): void;
 export function RootStyle(document: any, root: any): void;

package/lib/overlay/components.js

@@ -3,57 +3,31 @@
  * 错误容器组件
  * @param {*} document
  * @param {*} root
- * @param {object} props
- * @param {string} props.errorMessage - 错误信息
- * @param {function} props.onRepairClick - 修复按钮点击事件
- * @param {function} props.onCopyClick - 复制按钮点击事件
+ * @param {string} errorTitle 错误标题
  */
-function ErrorContainer(document, root, props) {
+function ErrorContainer(document, root, errorTitle) {
     // 创建容器元素
     const container = document.createElement('div');
-    container.className = 'container';
+    container.className = 'overlay-container';
     // 创建内容元素
     const content = document.createElement('div');
-    content.className = 'content';
+    content.className = 'overlay-content';
     container.appendChild(content);
     // 创建图片元素
     const img = document.createElement('img');
     img.src =
         'https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/render_error.svg';
-    img.alt = 'render error';
+    img.alt = 'Error';
     // 图片占位
-    img.width = 120;
-    img.height = 120;
-    img.className = 'error-image';
+    img.width = 200;
+    img.height = 200;
+    img.className = 'overlay-error-image';
     content.appendChild(img);
     // 创建标题元素
     const title = document.createElement('p');
-    title.className = 'title';
-    title.textContent = '哎呀，写错代码了';
+    title.className = 'overlay-title';
+    title.textContent = errorTitle;
     content.appendChild(title);
-    // 创建描述元素
-    const description = document.createElement('p');
-    description.className = 'description';
-    description.textContent = '可复制错误信息，或告诉妙搭进行修复。';
-    content.appendChild(description);
-    // 创建按钮组元素
-    const buttonGroup = document.createElement('div');
-    buttonGroup.className = 'button-group';
-    content.appendChild(buttonGroup);
-    // 创建复制按钮
-    const copyBtn = document.createElement('button');
-    copyBtn.className = 'button button-copy';
-    copyBtn.id = 'copyBtn';
-    copyBtn.textContent = '复制错误信息';
-    copyBtn.addEventListener('click', props.onCopyClick);
-    buttonGroup.appendChild(copyBtn);
-    // 创建修复按钮
-    const repairBtn = document.createElement('button');
-    repairBtn.className = 'button button-repair';
-    repairBtn.id = 'repairBtn';
-    repairBtn.textContent = '告诉妙搭修复';
-    repairBtn.addEventListener('click', props.onRepairClick);
-    buttonGroup.appendChild(repairBtn);
     // 添加到根元素
     root.appendChild(container);
 }
@@ -68,22 +42,22 @@ function RootStyle(document, root) {
     }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
         'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
         sans-serif;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
 
-    .container {
+    .overlay-container {
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: #F3F4F6; /* bg-gray-100 */
+      background-color: #fff;
     }
 
-    .content {
+    .overlay-content {
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -91,75 +65,21 @@ function RootStyle(document, root) {
       text-align: center;
     }
 
-    .error-image {
-      margin-bottom: 16px; /* mb-4 */
-      width: 120px; /* w-[120px] */
+    .overlay-error-image {
+      margin-bottom: 12px; /* mb-3 */
+      width: 200px; /* w-[200px] */
       height: auto;
     }
 
-    .title {
-      font-size: 18px; /* text-l (推测为 text-lg) */
-      line-height: 22px;
+    .overlay-title {
       color: #1F2329;
-      font-weight: 500; /* font-medium */
-      margin-bottom: 8px; /* mb-2 */
-    }
-
-    .description {
-      font-size: 14px; /* text-sm */
-      line-height: 22px;
-      color: #646A73;
-      font-weight: 400; /* font-normal */
-      margin-bottom: 8px; /* mb-2 */
-    }
-
-    .button-group {
-      display: flex;
-      gap: 16px; /* space-x-4 */
-    }
-
-    .button {
-      height: 32px; /* h-[32px] */
-      padding: 0 16px;
-      border-radius: 6px; /* rounded-[6px] */
-      font-size: 14px; /* text-sm */
-      font-weight: 400; /* font-[400] */
-      cursor: pointer;
-      transition: all 0.2s;
-      outline: none; /* focus:outline-hidden */
-      border: 1px solid;
-    }
-
-    .button-copy {
-      background-color: white; /* bg-white */
-      color: #4B5563; /* text-gray-600 */
-      border-color: #D0D3D6; /* border-[#D0D3D6] */
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-xs */
-    }
-
-    .button-copy:hover {
-      background-color: #F3F4F6; /* hover:bg-gray-100 */
-    }
-
-    .button-copy:active {
-      background-color: #E5E7EB; /* active:bg-gray-200 */
-    }
-
-    .button-repair {
-      background-color: #2563EB; /* bg-blue-600 */
-      color: white; /* text-white */
-      border-color: transparent; /* border-transparent */
-      font-weight: 500; /* font-medium */
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-xs */
-    }
-
-    .button-repair:hover {
-      background-color: #2563EB; /* hover:bg-blue-600 (保持不变) */
+      text-align: center;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 22px; 
     }
 
-    .button-repair:active {
-      background-color: #1E40AF; /* active:bg-blue-700 */
-    }
   `;
     root.appendChild(style);
 }

package/lib/overlay/index.js

@@ -64,9 +64,14 @@ function IframeRoot(document, root, props) {
     iframe.style.width = '100vw';
     iframe.style.zIndex = '2147483647';
     iframe.addEventListener('load', function onLoad() {
-        // Reset margin of iframe body
-        iframe.contentDocument.body.style.margin = '0';
-        props.onIframeLoad();
+        try {
+            // Reset margin of iframe body
+            iframe.contentDocument.body.style.margin = '0';
+            props.onIframeLoad();
+        }
+        catch (error) {
+            console.error('Error during iframe load:', error);
+        }
     });
     // We skip mounting and returns as we need to ensure
     // the load event is fired after we setup the global variable
@@ -124,52 +129,6 @@ function removeAllChildren(element, skip) {
         element.removeChild(childList[i]);
     }
 }
-/**
- * 降级复制方案（兼容旧浏览器）
- * @param text 要复制的文本
- * @returns boolean 复制是否成功
- */
-function fallbackCopyToClipboard(text) {
-    try {
-        // 创建临时的 textarea 元素
-        const textArea = document.createElement('textarea');
-        textArea.value = text;
-        // 设置样式，使其不可见
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        textArea.style.top = '-999999px';
-        textArea.setAttribute('readonly', '');
-        // 添加到 DOM
-        document.body.appendChild(textArea);
-        // 选中文本
-        textArea.focus();
-        textArea.select();
-        // 执行复制命令
-        const successful = document.execCommand('copy');
-        // 清理：移除临时元素
-        document.body.removeChild(textArea);
-        return successful;
-    }
-    catch (error) {
-        console.error('降级复制方案失败:', error);
-        return false;
-    }
-}
-async function copyToClipboard(text) {
-    try {
-        // 优先使用现代的 Clipboard API
-        if (navigator.clipboard && window.isSecureContext) {
-            await navigator.clipboard.writeText(text);
-            return true;
-        }
-        // 降级方案：使用传统的 execCommand 方法
-        return fallbackCopyToClipboard(text);
-    }
-    catch (error) {
-        // 执行navigator.clipboard.writeText失败时，降级方案
-        return fallbackCopyToClipboard(text);
-    }
-}
 // 获取父窗口 origin
 function getPreviewParentOrigin() {
     const { origin } = window.location;
@@ -186,6 +145,56 @@ function getPreviewParentOrigin() {
     // BOE 环境
     return 'https://miaoda.feishu-boe.cn';
 }
+function sendPostMessage(message, targetOrigin) {
+    try {
+        const origin = targetOrigin || getPreviewParentOrigin();
+        window.parent.postMessage(message, origin);
+    }
+    catch (error) {
+        console.error('ReactRefreshPlugin overlay发送 postMessage 失败:', error);
+    }
+}
+/**
+ * 上报错误信息
+ * @param {(string | Error)[]} messages 日志信息
+ * @param {boolean} noStacktrace 是否移除堆栈信息
+ */
+function logError(messages, noStacktrace = false) {
+    try {
+        // 优先使用暴露的 __RUNTIME_LOGGER__ 上报错误
+        // 运行时错误出现时，window已经挂载
+        if (window.__RUNTIME_LOGGER__) {
+            window.__RUNTIME_LOGGER__.get().log({
+                level: 'error',
+                args: messages,
+                meta: {
+                    noStacktrace,
+                    stacktrace: noStacktrace ? [] : undefined,
+                }
+            });
+            return;
+        }
+        // 首次执行编译报错会走此处逻辑；
+        const logJSON = {
+            id: 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                const r = Math.random() * 16 | 0;
+                const v = c === 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+            }),
+            type: 'typedLogV2',
+            level: 'error',
+            args: messages.map(item => item instanceof Error ? `${item.message}\n${item.stack}\n` : item),
+            meta: {
+                noStacktrace,
+                stacktrace: noStacktrace ? [] : undefined,
+            }
+        };
+        sendPostMessage({ type: 'SELECTED_LOG', payload: logJSON });
+    }
+    catch (e) {
+        console.log('上报错误信息失败', e);
+    }
+}
 /**
  * Creates the main `div` element for the overlay to render.
  * @returns {void}
@@ -193,57 +202,32 @@ function getPreviewParentOrigin() {
 function render() {
     ensureRootExists(function () {
         removeAllChildren(root);
-        // 发送 postMessage
-        const sendPostMessage = (message, targetOrigin) => {
-            const origin = targetOrigin || getPreviewParentOrigin();
-            window.parent.postMessage(message, origin);
-        };
         // 通知前端，渲染错误页面已准备就绪
         sendPostMessage({
-            type: 'PreviewReady'
+            type: 'PreviewReady',
         });
         // 通知主应用存在自定义 overlay
         sendPostMessage({
             type: 'app-features',
-            payload: [{
+            payload: [
+                {
                     feature: 'error-overlay',
                     enable: true,
-                }],
+                },
+            ],
         });
         if (currentCompileErrorMessage) {
             currentMode = 'compileError';
-            ErrorContainer(rootDocument, root, {
-                errorMessage: currentCompileErrorMessage,
-                onRepairClick: function onRepairClick() {
-                    sendPostMessage({
-                        type: 'RenderErrorRepair',
-                        data: currentCompileErrorMessage,
-                    });
-                },
-                onCopyClick: function onCopyClick() {
-                    copyToClipboard(currentCompileErrorMessage);
-                },
-            });
+            // 发送编译错误
+            logError(['Compile Error', currentCompileErrorMessage], true);
+            ErrorContainer(rootDocument, root, '编译出错');
         }
         else if (currentRuntimeErrors.length) {
             currentMode = 'runtimeError';
-            let errors = '';
-            currentRuntimeErrors.forEach(error => {
-                errors += `${error.message}\n${error.stack}\n`;
-            });
+            // 发送运行错误
+            logError(['Uncaught Render Error', currentRuntimeErrors]);
             // 叠加全部报错，将报错信息发送到妙搭
-            ErrorContainer(rootDocument, root, {
-                errorMessage: errors,
-                onRepairClick: function onRepairClick() {
-                    sendPostMessage({
-                        type: 'RenderErrorRepair',
-                        data: errors,
-                    });
-                },
-                onCopyClick: function onCopyClick() {
-                    copyToClipboard(errors);
-                },
-            });
+            ErrorContainer(rootDocument, root, '哎呀，出错了');
         }
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/fullstack-rspack-preset",
-  "version": "1.0.7",
+  "version": "1.0.8-alpha.log.1",
   "files": [
     "lib",
     "preset.config.js"