能否捕获动态添加的script元素抛出的错误或异常？

问题根源 #

动态加载的脚本执行上下文与加载它的代码上下文完全分离，直接用try/catch包裹脚本加载代码无法捕获脚本内部抛出的错误——因为错误是在全局执行上下文异步抛出的，不在当前try/catch的作用域内。

解决方案 #

方案1：全局错误监听+自定义错误标识 #

给抛出的include_guard错误添加唯一标识，在全局错误监听中识别并处理：

1. 定义带标识的once函数

function once() {
  const guardError = new Error("重复引入：该文件已标记#pragma once");
  // 添加自定义标识，用于后续识别
  guardError.isIncludeGuard = true;
  throw guardError;
}

2. 全局错误监听处理

window.addEventListener('error', (event) => {
  // 判断是否是我们自定义的include guard错误
  if (event.error?.isIncludeGuard) {
    // 打印友好警告
    console.warn(`⚠️ ${event.error.message}`);
    // 阻止浏览器默认的错误提示和传播
    event.preventDefault();
    event.stopPropagation();
  }
});

这种方式无需修改脚本加载逻辑，只需在全局层面拦截并处理特定错误，适合已有加载逻辑不想大幅改动的场景。

方案2：Fetch加载脚本内容+本地执行（可控性更强） #

通过fetch获取脚本源码，将其包裹在try/catch中执行，直接在加载函数内部捕获错误：

// 维护已加载的脚本URL集合，用于#pragma once检查
const loadedScripts = new Set();

async function include(url, useOnce = false) {
  // 先检查是否已加载过（提前拦截，避免执行脚本）
  if (useOnce && loadedScripts.has(url)) {
    console.warn(`⚠️  文件${url}已通过#pragma once标记，禁止重复引入`);
    return;
  }

  try {
    const res = await fetch(url);
    const scriptCode = await res.text();

    // 执行脚本内容，这里用new Function比eval更安全（作用域隔离）
    const runScript = new Function(scriptCode);
    runScript();

    // 标记为已加载
    if (useOnce) loadedScripts.add(url);
  } catch (err) {
    if (err.isIncludeGuard) {
      console.warn(`⚠️  文件${url}触发#pragma once保护`);
      // 标记为已加载，避免后续重复检查
      loadedScripts.add(url);
    } else {
      // 处理其他加载/执行错误
      console.error(`加载脚本${url}失败：`, err);
    }
  }
}

这种方式完全掌控脚本执行的上下文，错误捕获更直接，还能提前拦截重复请求，但需要注意：

• 脚本所在域名需支持CORS（跨域脚本无法通过fetch获取）
• 确保加载的脚本是可信的，避免new Function带来的安全风险

关键注意点 #

• 自定义错误标识要唯一，避免和其他错误混淆
• 全局监听中记得阻止默认行为，避免浏览器输出原生错误信息
• 用fetch方式时，优先提前检查已加载集合，减少不必要的网络请求和脚本执行

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