原文链接

前言

作为一个迷茫的小前端，不清楚自己想要什么，不知道怎么努力。跟导师沟通过后，导师说，既然这样，那我每周给你布置一些作业。我说好啊，于是……

导师提问：js 错误监控，基本的实现方式是什么，要注意什么？有哪些手段能捕获到 js 异常？要实现一个可用的监控方案有哪些注意事项？捕获到的异常的具体内容是什么？怎么上报？应该上报哪些信息才能有助于问题定位？

正文

看到问题，不急着去找答案，先给自己上基础三问：

监控的本质是数据采集。

扩展开来还有后面的数据处理、数据分析展示、提醒和报警。

那么要监控什么，就看你关注哪些数据。

对于前端来说，我们关注的大致有：

监控是为了知道哪里做的不好，哪里有问题，然后才能解决问题，做的更好。

这个问题——前面列了这么多要监控的东西——感觉不好回答。

根据最开始引用部分的问题，先来看看 js 错误的监控。

使用 window.onerror 这种全局捕获，最好写在所有 js 脚本的前面，不然前面的出错无法捕获。
onerror 无法捕获 promise 抛出的错误，此时可以用 onunhandledrejection
使用 onerror 还要注意 "script error". 即当访问的 js 脚本跨域时，为避免信息泄露，语法错误的细节将不会报告，而是返回一个简单的 "script error"。如果想要监控到错误详细内容，需要做：
- 引用 js 文件时，在 script 标签上配置 crossorigin 属性
- 服务器端响应时配置好响应头 Access-Control-Allow-Origin:*

这个问题乍一看不知从何说起。但仔细一想就会发现，window.onerror 函数获取到的参数，就是它捕获的异常的内容。

类似的 onunhandledrejection 捕获到的信息如下：

错误信息频繁发送上报请求，会对后端服务器造成压力。项目中我们可通过设置采集率，或对规定时间内数据汇总再上报，减少请求数量，从而缓解服务端压力。

错误信息、发生错误的脚本、行号、列号、堆栈信息。

PS:其中行号和列号可能因为打包的原因使得错误很难追踪，这时可以使用 sourceMap.