如何定位动态添加内联脚本引发的未捕获错误？

你需要捕获页面中动态添加的内联脚本抛出的未捕获错误，并定位到对应的脚本内容及错误代码段，以下是两种可靠的实现思路：

1. 用Blob URL替换内联文本（最推荐） #

利用浏览器对Blob URL的栈追踪特性，直接给每个动态脚本分配唯一可识别的标识：

• 拦截脚本注入：重写Element.append、Node.appendChild等DOM方法，检测到要添加的内联脚本时，将脚本内容转为Blob对象，生成唯一的Object URL赋值给script.src（替代原textContent）。
• 存储映射关系：将生成的Blob URL和原始脚本内容存入全局Map，即使脚本元素被移除也能保留内容。
• 错误匹配：捕获错误时，解析栈信息中的Blob URL，直接从Map中获取对应脚本，再根据栈中的行号提取错误行及周边代码。

示例代码：

// 初始化存储映射
window.__debugScriptStore = new Map();

// 重写append方法监控脚本添加
const originalAppend = Element.prototype.append;
Element.prototype.append = function(...args) {
  args = args.map(arg => {
    if (arg instanceof HTMLScriptElement && arg.textContent && !arg.src) {
      // 生成Blob URL
      const blob = new Blob([arg.textContent], { type: 'text/javascript' });
      const url = URL.createObjectURL(blob);
      // 存储脚本内容
      window.__debugScriptStore.set(url, arg.textContent);
      // 替换为Blob URL执行
      arg.src = url;
      arg.textContent = '';
    }
    return arg;
  });
  return originalAppend.call(this, ...args);
};

// 重写appendChild覆盖更多场景
const originalAppendChild = Node.prototype.appendChild;
Node.prototype.appendChild = function(child) {
  if (child instanceof HTMLScriptElement && child.textContent && !child.src) {
    const blob = new Blob([child.textContent], { type: 'text/javascript' });
    const url = URL.createObjectURL(blob);
    window.__debugScriptStore.set(url, child.textContent);
    child.src = url;
    child.textContent = '';
  }
  return originalAppendChild.call(this, child);
};

// 错误捕获处理
window.addEventListener('error', function(e) {
  const stack = e.error?.stack;
  if (!stack) return;

  // 匹配栈中的Blob URL及行号
  const blobMatch = stack.match(/(blob:.+?):(\d+):\d+/);
  if (blobMatch) {
    const [, url, lineStr] = blobMatch;
    const lineNum = parseInt(lineStr, 10) - 1; // 转为数组索引
    const scriptContent = window.__debugScriptStore.get(url);
    if (scriptContent) {
      const lines = scriptContent.split('\n');
      // 提取错误行及前后2行代码
      const start = Math.max(0, lineNum - 2);
      const end = Math.min(lines.length - 1, lineNum + 2);
      const errorSnippet = lines.slice(start, end + 1).join('\n');

      console.log('错误来源脚本：', scriptContent);
      console.log(`错误行（第${lineNum+1}行）及周边代码：\n`, errorSnippet);
    }
  }
});

2. 注入唯一标识注释（兼容特殊场景） #

如果无法使用Blob URL（如部分受限环境），可以给每个动态脚本添加唯一标识注释，结合行号和错误特征匹配：

• 注入标识：拦截脚本添加时，在脚本开头插入带唯一ID的注释（如/* __DEBUG_SCRIPT_ID=xxx-001 */），同时将ID和脚本内容存入Map。
• 错误匹配：解析栈中的<anonymous>行号，调整行号偏移（跳过插入的注释行），再结合错误信息中的变量名等特征，遍历Map匹配目标脚本。

示例代码片段：

window.__debugScriptStore = new Map();
let scriptIdCounter = 0;

const originalAppendChild = Node.prototype.appendChild;
Node.prototype.appendChild = function(child) {
  if (child instanceof HTMLScriptElement && child.textContent && !child.src) {
    const scriptId = `debug-script-${scriptIdCounter++}`;
    // 注入标识注释
    const markedContent = `/* __DEBUG_SCRIPT_ID=${scriptId} */\n${child.textContent}`;
    child.textContent = markedContent;
    window.__debugScriptStore.set(scriptId, markedContent);
  }
  return originalAppendChild.call(this, child);
};

window.addEventListener('error', function(e) {
  const stack = e.error?.stack;
  if (!stack) return;

  const lineMatch = stack.match(/<anonymous>:(\d+):\d+/);
  if (lineMatch) {
    const stackLineNum = parseInt(lineMatch[1], 10);
    const actualLineNum = stackLineNum - 1; // 跳过开头的注释行
    const errorKeyword = e.message.match(/\w+/)[0]; // 提取错误中的变量名

    // 遍历存储的脚本匹配
    for (const [id, content] of window.__debugScriptStore.entries()) {
      const lines = content.split('\n');
      if (actualLineNum >= 0 && actualLineNum < lines.length) {
        if (lines[actualLineNum].includes(errorKeyword)) {
          const errorSnippet = lines.slice(Math.max(0, actualLineNum-2), actualLineNum+2).join('\n');
          console.log(`匹配到脚本ID：${id}`);
          console.log('错误代码段：\n', errorSnippet);
          break;
        }
      }
    }
  }
});

方案对比 #

• Blob URL方案：可靠性最高，栈信息直接提供唯一标识，无需模糊匹配，支持所有现代浏览器。
• 注释标识方案：兼容性更强，但依赖行号和错误特征匹配，存在小概率误判，适合无法使用Blob的场景。

注意事项 #

• 重写DOM方法时，建议覆盖insertBefore、replaceChildren等所有可能添加脚本的方法，避免遗漏。
• 对于type="module"的脚本，只需将Blob的MIME类型改为application/javascript即可兼容。
• 可定期清理Map中的过期Blob URL（如脚本执行完成后调用URL.revokeObjectURL），避免内存泄漏。

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