React中动态添加外部脚本的异常捕获失效问题

问题原因 #

1. try/catch无法捕获：你的try/catch仅能包裹脚本的创建与插入DOM过程，这部分是同步执行的。但外部脚本加载完成后属于异步执行，且运行在全局上下文，不在当前try/catch的作用域范围内，因此脚本内部的异常无法被捕获。
2. React错误边界失效：React错误边界仅能捕获React组件树渲染流程内的错误（比如组件render、生命周期钩子、子组件构造函数中的错误），外部脚本的错误属于全局JavaScript环境错误，不在React错误处理机制的覆盖范围内。

解决方案 #

1. 监听全局错误事件捕获脚本内部异常 #

通过window.addEventListener('error')监听全局错误，同时判断错误是否来自目标脚本，以此捕获脚本内部的异常。可以用Promise封装加载逻辑，方便处理成功/失败状态：

function loadScript(url, isAsync = true) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.async = isAsync;

    // 脚本加载成功回调
    script.onload = () => resolve();
    // 脚本加载失败（如404）回调
    script.onerror = () => reject(new Error(`加载脚本失败: ${url}`));

    // 监听全局错误，捕获脚本内部异常
    const handleGlobalError = (event) => {
      // 校验错误是否来自当前加载的脚本
      if (event.filename === url) {
        reject(new Error(`脚本内部错误 [${url}]: ${event.message}`));
        window.removeEventListener('error', handleGlobalError);
      }
    };
    window.addEventListener('error', handleGlobalError);

    document.body.appendChild(script);
  });
}

// 使用示例
loadScript('你的脚本URL', true)
  .then(() => console.log('脚本加载成功'))
  .catch(err => console.error('出错了:', err));

2. 跨域脚本需添加crossorigin属性 #

如果外部脚本是跨域资源，浏览器会隐藏具体错误信息（仅显示"Script error"）。此时需要给脚本标签添加crossorigin="anonymous"，同时确保脚本服务器配置了CORS响应头，才能获取完整的错误详情：

const script = document.createElement('script');
script.src = url;
script.async = isAsync;
script.crossOrigin = 'anonymous'; // 新增跨域属性

3. 在React中处理这类错误 #

React错误边界无法处理全局错误，但可以将全局错误监听逻辑封装到组件中，通过状态更新来处理错误：

import { useEffect, useState } from 'react';

function ScriptLoader({ url, isAsync, children }) {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    let scriptElement;
    const handleGlobalError = (event) => {
      if (event.filename === url) {
        setError(new Error(`脚本错误: ${event.message}`));
        window.removeEventListener('error', handleGlobalError);
      }
    };

    const loadTargetScript = async () => {
      try {
        scriptElement = document.createElement('script');
        scriptElement.src = url;
        scriptElement.async = isAsync;
        scriptElement.crossOrigin = 'anonymous';

        const loadPromise = new Promise((resolve, reject) => {
          scriptElement.onload = resolve;
          scriptElement.onerror = () => reject(new Error('脚本加载失败'));
        });

        window.addEventListener('error', handleGlobalError);
        document.body.appendChild(scriptElement);
        await loadPromise;
        setIsLoaded(true);
      } catch (err) {
        setError(err);
      } finally {
        window.removeEventListener('error', handleGlobalError);
      }
    };

    loadTargetScript();

    // 组件卸载时清理资源
    return () => {
      if (scriptElement) {
        document.body.removeChild(scriptElement);
      }
      window.removeEventListener('error', handleGlobalError);
    };
  }, [url, isAsync]);

  if (error) {
    return <div>脚本加载出错: {error.message}</div>;
  }

  if (!isLoaded) {
    return <div>脚本加载中...</div>;
  }

  return children;
}

// 组件使用示例
<ScriptLoader url="你的脚本URL" isAsync={true}>
  <div>脚本加载完成，这里是依赖脚本的内容</div>
</ScriptLoader>

内容的提问来源于stack exchange，提问作者Asad Gulzar