@lark-apaas/coding-preset-vite-react 0.1.1-alpha.0

package/src/overlay/index.js

@@ -0,0 +1,443 @@
+/* eslint-disable no-undef */
+const { ErrorContainer, RootStyle } = require('./components');
+
+/* ===== Cached elements for DOM manipulations ===== */
+/**
+ * The iframe that contains the overlay.
+ * @type {HTMLIFrameElement}
+ */
+let iframeRoot = null;
+/**
+ * The document object from the iframe root, used to create and render elements.
+ * @type {Document}
+ */
+let rootDocument = null;
+/**
+ * The root div elements will attach to.
+ * @type {HTMLDivElement}
+ */
+let root = null;
+/**
+ * A Cached function to allow deferred render.
+ * @type {RenderFn | null}
+ */
+let scheduledRenderFn = null;
+
+/* ===== Overlay State ===== */
+/**
+ * The latest error message from Vite compilation.
+ * @type {string}
+ */
+let currentCompileErrorMessage = '';
+/**
+ * The latest runtime error objects.
+ * @type {Error[]}
+ */
+let currentRuntimeErrors = [];
+/**
+ * The render mode the overlay is currently in.
+ * @type {'compileError' | 'runtimeError' | null}
+ */
+let currentMode = null;
+
+/**
+ * @typedef {Object} IframeProps
+ * @property {function(): void} onIframeLoad
+ */
+
+/**
+ * Creates the main `iframe` the overlay will attach to.
+ * Accepts a callback to be ran after iframe is initialized.
+ * @param {Document} document
+ * @param {HTMLElement} root
+ * @param {IframeProps} props
+ * @returns {HTMLIFrameElement}
+ */
+function IframeRoot(document, root, props) {
+  const iframe = document.createElement('iframe');
+  iframe.id = 'vite-error-overlay';
+  iframe.src = 'about:blank';
+
+  iframe.style.border = 'none';
+  iframe.style.height = '100%';
+  iframe.style.left = '0';
+  iframe.style.minHeight = '100vh';
+  iframe.style.minHeight = '-webkit-fill-available';
+  iframe.style.position = 'fixed';
+  iframe.style.top = '0';
+  iframe.style.width = '100vw';
+  iframe.style.zIndex = '2147483647';
+  iframe.addEventListener('load', function onLoad() {
+    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
+  return iframe;
+}
+
+/**
+ * Creates the main `div` element for the overlay to render.
+ * @param {Document} document
+ * @param {HTMLElement} root
+ * @returns {HTMLDivElement}
+ */
+function OverlayRoot(document, root) {
+  const div = document.createElement('div');
+  div.id = 'container';
+  root.appendChild(div);
+  return div;
+}
+
+/**
+ * Ensures the iframe root and the overlay root are both initialized before render.
+ * If check fails, render will be deferred until both roots are initialized.
+ * @param {RenderFn} renderFn A function that triggers a DOM render.
+ * @returns {void}
+ */
+function ensureRootExists(renderFn) {
+  if (root) {
+    // Overlay root is ready, we can render right away.
+    renderFn();
+    return;
+  }
+
+  // Creating an iframe may be asynchronous so we'll defer render.
+  // In case of multiple calls, function from the last call will be used.
+  scheduledRenderFn = renderFn;
+
+  if (iframeRoot) {
+    // Iframe is already ready, it will fire the load event.
+    return;
+  }
+
+  // Create the iframe root, and, the overlay root inside it when it is ready.
+  iframeRoot = IframeRoot(document, document.body, {
+    onIframeLoad: function onIframeLoad() {
+      rootDocument = iframeRoot.contentDocument;
+      RootStyle(rootDocument, rootDocument.head);
+      root = OverlayRoot(rootDocument, rootDocument.body);
+      scheduledRenderFn();
+    },
+  });
+
+  // We have to mount here to ensure `iframeRoot` is set when `onIframeLoad` fires.
+  // This is because onIframeLoad() will be called synchronously
+  // or asynchronously depending on the browser.
+  document.body.appendChild(iframeRoot);
+}
+
+function removeAllChildren(element, skip) {
+  /** @type {Node[]} */
+  const childList = Array.prototype.slice.call(
+    element.childNodes,
+    typeof skip !== 'undefined' ? skip : 0
+  );
+
+  for (let i = 0; i < childList.length; i += 1) {
+    element.removeChild(childList[i]);
+  }
+}
+
+function getParentOriginFromParams() {
+  try {
+    var params = new URLSearchParams(window.location.search);
+    var origin = params.get('__parentOrigin');
+    if (origin) {
+      sessionStorage.setItem('__parentOrigin', origin);
+      return origin;
+    }
+  } catch (e) {
+    // ignore
+  }
+  try {
+    return sessionStorage.getItem('__parentOrigin') || '';
+  } catch (e) {
+    return '';
+  }
+}
+
+function getLegacyParentOrigin() {
+  const currentOrigin = window.location?.origin || '';
+  if (currentOrigin.includes('force.feishuapp.net')) {
+    return 'https://force.feishu.cn';
+  }
+  if (currentOrigin.includes('force-pre.feishuapp.net')) {
+    return 'https://force.feishu-pre.cn';
+  }
+  if (currentOrigin.includes('force.byted.org')) {
+    return 'https://force.feishu-boe.cn';
+  }
+  if (currentOrigin.includes('feishuapp.cn') || currentOrigin.includes('miaoda.feishuapp.net')) {
+    return 'https://miaoda.feishu.cn';
+  }
+  if (currentOrigin.includes('fsapp.kundou.cn') || currentOrigin.includes('miaoda-pre.feishuapp.net')) {
+    return 'https://miaoda.feishu-pre.cn';
+  }
+  return 'https://miaoda.feishu-boe.cn';
+}
+
+function sendPostMessage(message, targetOrigin) {
+  try {
+    const parentOrigin = getParentOriginFromParams() || process?.env?.FORCE_FRAMEWORK_DOMAIN_MAIN || getLegacyParentOrigin();
+    const origin = targetOrigin || parentOrigin;
+    window.parent.postMessage(message, origin);
+  } catch (error) {
+    console.error('ViteErrorOverlay 发送 postMessage 失败:', error);
+  }
+}
+
+/**
+ * 上报错误信息
+ * @param {(string | Error)[]} messages 日志信息
+ * @param {'compileError' | 'runtimeError'} mode 日志模式
+ */
+function logError(messages, mode) {
+  const logMeta = {
+    noStacktrace: mode === 'compileError',
+    stacktrace: mode === 'compileError' ? [] : undefined,
+    type: mode === 'compileError' ? 'compile-error' : 'uncaught-render-error',
+  };
+  try {
+    // 优先使用暴露的 __RUNTIME_LOGGER__ 上报错误
+    // 运行时错误出现时，window已经挂载
+    if (window.__RUNTIME_LOGGER__) {
+      window.__RUNTIME_LOGGER__.get().log({
+        level: 'error',
+        args: messages,
+        meta: logMeta,
+      });
+      return;
+    }
+    // 首次执行编译报错会走此处逻辑；
+    const parts = [];
+    for (const m of messages) {
+      if (m instanceof Error) {
+        parts.push(m.message, m);
+      } else {
+        parts.push(m);
+      }
+    }
+    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: parts,
+      meta: logMeta,
+    };
+    sendPostMessage({ type: 'SELECTED_LOG', payload: JSON.stringify(logJSON) });
+  } catch (e) {
+    console.log('上报错误信息失败', e)
+  }
+
+}
+
+/**
+ * Creates the main `div` element for the overlay to render.
+ * @returns {void}
+ */
+function render() {
+  ensureRootExists(function () {
+    removeAllChildren(root);
+    // 通知前端，渲染错误页面已准备就绪
+    sendPostMessage({
+      type: 'PreviewReady',
+    });
+    // 通知主应用存在自定义 overlay
+    sendPostMessage({
+      type: 'app-features',
+      payload: [
+        {
+          feature: 'error-overlay',
+          enable: true,
+        },
+      ],
+    });
+
+    if (currentCompileErrorMessage) {
+      currentMode = 'compileError';
+
+      // 通知主应用，当前出现渲染报错
+      sendPostMessage({
+        type: 'RenderError',
+        data: currentMode,
+      });
+
+      // 发送编译错误
+      logError(['Compile Error', currentCompileErrorMessage], currentMode);
+      ErrorContainer(rootDocument, root, '编译出错');
+    } else if (currentRuntimeErrors.length) {
+      currentMode = 'runtimeError';
+
+      // 通知主应用，当前出现渲染报错
+      sendPostMessage({
+        type: 'RenderError',
+        data: currentMode,
+      });
+
+      // 发送运行错误
+      logError(['Uncaught Render Error', ...currentRuntimeErrors], currentMode);
+      // 叠加全部报错，将报错信息发送到妙搭
+      ErrorContainer(rootDocument, root, '页面出错了');
+    }
+  });
+}
+
+/**
+ * Destroys the state of the overlay.
+ * @returns {void}
+ */
+function cleanup() {
+  // Clean up and reset all internal state.
+  try {
+    document.body.removeChild(iframeRoot);
+  } catch (e) {
+    // In case user render react app directly to body， will trigger `NotFoundError` when recovery from an Error
+    // https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild#exceptions
+  }
+  scheduledRenderFn = null;
+  root = null;
+  iframeRoot = null;
+}
+
+/**
+ * Clears Vite compilation errors and dismisses the compile error overlay.
+ * @returns {void}
+ */
+function clearCompileError() {
+  if (!root || currentMode !== 'compileError') {
+    return;
+  }
+
+  currentCompileErrorMessage = '';
+  currentMode = null;
+  cleanup();
+}
+
+/**
+ * Clears runtime error records and dismisses the runtime error overlay.
+ * @param {boolean} [dismissOverlay] Whether to dismiss the overlay or not.
+ * @returns {void}
+ */
+function clearRuntimeErrors(dismissOverlay) {
+  if (!root || currentMode !== 'runtimeError') {
+    return;
+  }
+
+  currentRuntimeErrors = [];
+
+  if (typeof dismissOverlay === 'undefined' || dismissOverlay) {
+    currentMode = null;
+    cleanup();
+  }
+}
+
+/**
+ * Shows the compile error overlay with the specific Vite error message.
+ * @param {string} message
+ * @returns {void}
+ */
+function showCompileError(message) {
+  if (!message) {
+    return;
+  }
+
+  currentCompileErrorMessage = message;
+
+  render();
+}
+
+/**
+ * Shows the runtime error overlay with the specific error records.
+ * @param {Error[]} errors
+ * @returns {void}
+ */
+function showRuntimeErrors(errors) {
+  if (!errors || !errors.length) {
+    return;
+  }
+
+  currentRuntimeErrors = errors;
+
+  render();
+}
+
+function debounce(fn, wait) {
+  /**
+   * A cached setTimeout handler.
+   * @type {number | undefined}
+   */
+  let timer;
+
+  /**
+   * @returns {void}
+   */
+  function debounced() {
+    const context = this;
+    const args = arguments;
+
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      return fn.apply(context, args);
+    }, wait);
+  }
+
+  return debounced;
+}
+/**
+ * The debounced version of `showRuntimeErrors` to prevent frequent renders
+ * due to rapid firing listeners.
+ * @param {Error[]} errors
+ * @returns {void}
+ */
+const debouncedShowRuntimeErrors = debounce(showRuntimeErrors, 30);
+
+/**
+ * Detects if an error is a Vite compilation error.
+ * @param {Error} error The error of interest.
+ * @returns {boolean} If the error is a Vite compilation error.
+ */
+function isViteCompileError(error) {
+  return (
+    /Module [A-z ]+\(from/.test(error.message) ||
+    /Cannot find module/.test(error.message) ||
+    /Failed to resolve import/.test(error.message) ||
+    /Transform failed/.test(error.message) ||
+    /Pre-transform error/.test(error.message)
+  );
+}
+
+/**
+ * Handles runtime error contexts captured with EventListeners.
+ * Integrates with a runtime error overlay.
+ * @param {Error} error A valid error object.
+ * @returns {void}
+ */
+function handleRuntimeError(error) {
+  if (
+    error &&
+    !isViteCompileError(error) &&
+    currentRuntimeErrors.indexOf(error) === -1
+  ) {
+    currentRuntimeErrors = currentRuntimeErrors.concat(error);
+  }
+  debouncedShowRuntimeErrors(currentRuntimeErrors);
+}
+
+module.exports = Object.freeze({
+  clearCompileError: clearCompileError,
+  clearRuntimeErrors: clearRuntimeErrors,
+  handleRuntimeError: handleRuntimeError,
+  showCompileError: showCompileError,
+  showRuntimeErrors: showRuntimeErrors,
+});