window.onerror上报"Script error"且无跨站时如何获取完整报错信息

数据老陈

2026-9-30

Script error报错原因及完整信息捕获方案

核心原因

你遇到的Script error本质是浏览器的同源策略安全限制，用于避免跨域脚本泄露敏感信息到不可信站点，很多开发者误以为自己没有跨域逻辑，实际常见的隐性触发场景包括：

静态JS资源放在独立CDN域名，和页面主域名、端口、协议不一致
直接用file协议打开本地HTML文件调试，和本地JS资源也会被判定为跨域
页面被第三方站点通过iframe嵌套加载，跨上下文触发报错限制
部分旧版本浏览器对同域脚本也要求配置CORS规则才会返回完整报错信息

解决步骤

1. 给脚本标签添加crossorigin属性

修改你示例中的script标签，添加跨域标识：

<html>
<head></head>
  <body>
    <script src="/js/testpage.min.js" crossorigin="anonymous"></script>
  </body>
</html>

如果你的JS资源需要携带身份凭证加载，将crossorigin的值改为use-credentials即可

2. 配置静态资源服务的CORS响应头

给你的JS资源所在的服务添加CORS响应头，允许页面域名访问：

Nginx配置示例：

location ~* \.(js|css)$ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, OPTIONS';
}

Node.js Express配置示例：

app.use('/js', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  next()
})

3. 优化报错上报逻辑

window.onerror回调的第5个参数error是完整的Error对象，包含控制台显示的完整堆栈信息，直接提取上报即可：

window.onerror = function(msg, url, lineNo, columnNo, error) {
  const reportData = {
    errorMsg: msg,
    resourceUrl: url,
    line: lineNo,
    column: columnNo,
    // 完整报错堆栈，和控制台输出内容一致
    stack: error?.stack || '无可用堆栈信息'
  }
  // 此处添加你的服务端上报逻辑
  return true
}