前端错误监控体系：window.onerror 与 unhandledrejection

学完这篇，你能亲手写出一套同时兜住同步报错、资源加载失败和 Promise 未捕获拒绝的前端错误监控上报代码。

第一步：先分清错误从哪个口子出来

前端错误大致分三类，对应两个 API：

• 同步运行时错误（`undefined is not a function` 这种）→ `window.onerror`
• 资源加载失败（图片、脚本、样式 404）→ 只能用捕获阶段的 `error` 事件
• Promise 里报错但没写 `.catch()` → `unhandledrejection`

很多人只挂了 `window.onerror`，结果线上 Promise 报错一条都收不到，这是最常见的漏报点。

第二步：写对 window.onerror

window.onerror = function (message, source, lineno, colno, error) {
  report({
    type: 'error',
    message: message,
    stack: error && error.stack,   // 关键：堆栈在第五个参数里
    file: source,
    line: lineno,
    col: colno,
  });
  return false; // 返回 true 会吃掉控制台的默认报错，调试期不建议
};

注意：`window.onerror` 是赋值式的，页面里只有一个。如果你用的框架或第三方 SDK 也挂了它，后挂的会覆盖前面的。要共存就改成 `window.addEventListener('error', handler)`，这样能挂多个。

注意：`stack` 一定要从第五个参数 `error` 上取，直接用 `message` 是拿不到调用栈的。

第三步：资源加载错误要单独监听

图片、`<script>`、`<link>` 加载失败不会走 `window.onerror`，因为资源错误不冒泡。必须在捕获阶段截：

window.addEventListener('error', function (e) {
  const target = e.target;
  if (target && (target.src || target.href)) {
    report({
      type: 'resource',
      tag: target.tagName,
      url: target.src || target.href,
    });
  }
}, true); // 第三个参数 true 不能省

注意：这个监听器里 `e.message` 是空的，判断是不是资源错误就看 `e.target` 有没有 `src`/`href`。

第四步：补上 unhandledrejection

window.addEventListener('unhandledrejection', function (e) {
  const reason = e.reason;
  report({
    type: 'promise',
    message: reason instanceof Error ? reason.message : String(reason),
    stack: reason instanceof Error ? reason.stack : '',
  });
  // e.preventDefault(); // 需要的话可以压掉控制台红字
});

注意：`e.reason` 不一定是 Error。有人 `Promise.reject('出错了')`、`Promise.reject({code: 500})`，直接取 `.stack` 会得到 `undefined`。上面这段做了归一化，别偷懒。

如果项目里用了 axios/fetch 封装，建议在请求拦截器里再兜一层，Promise 里的网络错误往往被业务代码吞掉了。

第五步：上报本身别把页面搞挂

推荐用 `navigator.sendBeacon`，它在页面卸载时也能发出请求：

function report(payload) {
  payload.url = location.href;
  payload.ts = Date.now();
  payload.ua = navigator.userAgent;
  try {
    const data = JSON.stringify(payload);
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/log/error', data);
    } else {
      new Image().src = '/api/log/error?d=' + encodeURIComponent(data);
    }
  } catch (err) {
    // 上报失败绝不能再抛错，否则死循环
  }
}

注意：`sendBeacon` 有体积限制（约 64KB），别把整个 DOM 快照塞进去。同时要做去重和采样——同一个错误短时间刷几百条，后端会被打爆。常规做法是「错误信息 + 行号」做 key，同 key 每分钟只报一次。

第六步：让堆栈能看懂

线上代码是压缩过的，`a.js:1:23456` 这种行号没法定位。两个办法：

1. 打包时开启 sourcemap，上报后到 Sentry 这类平台或自建服务还原；
2. 引用第三方脚本时加 `crossorigin="anonymous"`，并且 CDN 返回 `Access-Control-Allow-Origin`，否则你只会收到一条 `Script error.`，什么信息都没有。

注意：`Script error.` 基本就是跨域脚本没配 CORS，不是代码本身的问题。

另外，框架有自己的错误出口：Vue 是 `app.config.errorHandler`，React 是 `ErrorBoundary` / `componentDidCatch`。它们能捕获组件渲染期的错误，但不会自动进你的 `window.onerror` 上报，需要手动转发一次。

小结

• 同步错误用 `window.onerror`，堆栈从第五个参数取
• 资源错误用 `addEventListener('error', fn, true)`，捕获阶段才拦得到
• Promise 错误用 `unhandledrejection`，`reason` 要归一化
• 上报用 `sendBeacon`，并且整段包 `try/catch`，绝不允许上报自己报错
• 必做去重、采样、限流，否则监控系统先崩
• 跨域脚本加 `crossorigin`，否则只有 `Script error.`
• 接上 sourcemap 还原，堆栈才有意义