别再只 console.log 了：前端错误收集与日志治理

wuwenzen@outlook.com (wuwj) — Fri, 03 Jul 2020 00:00:00 +0000

大部分前端开发一开始排查问题都是靠：

console.log('看看这里是什么');

这没问题，但当项目变大、用户变多、场景变复杂时，只靠 console.log 就完全不够用了——用户出问题时你根本看不到现场。

这篇文章聊聊我在实际项目里做前端错误收集和日志治理的一些经验。

1. 我们到底需要记录什么？

先看一个真实场景：

用户反馈：「页面有时候会白屏」
操作步骤：「我就是正常点点点，突然就白了」
浏览器：未知
系统：未知
URL：未知

如果我们没有任何前端错误监控工具，这个问题几乎无从排查。

所以，一套基础的前端日志/错误系统至少要能回答：

什么时间？
哪个用户？
在哪个页面？
用的什么浏览器/系统？
做了什么操作？
报了什么错（堆栈、接口信息等）？

所以日志结构（特别是错误日志）要包含几个核心字段：

interface FrontendLog {
  level: 'info' | 'warn' | 'error';
  message: string;
  stack?: string;
  url: string;
  userId?: string;
  time: number;
  ua: string; // user agent
  extra?: Record<string, any>;
}

2. 捕获错误的几个入口

2.1 全局 JS 运行时错误

window.onerror = function (message, source, lineno, colno, error) {
  reportError({
    message,
    stack: error && error.stack,
    url: window.location.href,
    extra: { source, lineno, colno },
  });
};

注意：

这个能捕获同步脚本错误。
对跨域脚本，如果没有正确配置，会只得到 Script error.，需要在 script 标签上加 crossorigin 且服务端正确设置 CORS/SourceMap。

2.2 Promise 未处理异常

现代前端很多逻辑是基于 Promise / async 的，window.onerror 捕不到，需要监听：

错误监控 on Saiga

别再只 console.log 了：前端错误收集与日志治理

1. 我们到底需要记录什么？

2. 捕获错误的几个入口

2.1 全局 JS 运行时错误

2.2 Promise 未处理异常