前端监控系列2 ｜聊聊 JS 错误监控那些事儿

作者：彭莉，火山引擎 APM 研发工程师。2020年加入字节，负责前端监控 SDK 的开发维护、平台数据消费的探索和落地。

有必要针对 JS 错误做监控吗？

我们可以先假设不对 JS 错误做监控，试想会出现什么问题？

JS 错误可能会导致渲染出错、用户操作意外终止，如果没有 JS 错误监控，开发者完全感知不到线上这些异常情况。特别是像电商、支付这类业务，用户无法下单和付款。即便站点有反馈渠道，但是等到有用户反馈的时候，说明影响面已经不小了。

因此像 JS 错误监控这类异常监控的存在，就是为了能及时发现线上问题、帮助快速定位问题，从而提升站点稳定性。

如何监控 JS 错误

大多数的 JS 错误都是由 JS 引擎自动生成的，比如 TypeError ，常常在值的类型不是预期的类型时触发、SyntaxError 常常在 JS 引擎解析遇到无效语法时触发。

对于一些可预见的错误，通常可以使用 try/catch 捕获，而一般不可预见的错误都抛到了全局，因此可以通过监听全局的 error 事件收集到 JS 错误。

const handleError = (ev: ErrorEvent) => report(normalizeError(ev))
window.addEventListener('error', handleError)

不过浏览器中未处理的 Promise 错误比较特殊，它需要额外监听全局 unhandledrejection 事件来收集。

const handleRejection = (ev: PromiseRejectionEvent) => report(normalizeException(ev))
window.addEventListener('unhandledrejection', handleRejection)

通过上面的全局监听，我们可以采集到错误的基本信息，包括错误类型、错误信息（错误的简短描述）、错误的堆栈、引发此错误的行列号和文件路径等信息。

不过这些信息都太过简略，无法帮助定位问题，无法感知到用户做了怎样的操作触发了这个错误、用户当前的浏览器型号、系统版本是怎样的、用户当前在哪个页面以及是通过怎样的方式进到页面的。

如何帮助定位问题

我们需要收集更多的 JS 错误发生时/发生前的上下文，为排查 JS 错误提供更多的思路。

怎样采集用户当前的环境信息

环境信息包括用户当前的浏览器类型和版本、系统类型和版本、设备品牌等信息。监控 SDK 主要是通过采集 UserAgent 来获取基础信息，但是解析出具体浏览器、系统和设备品牌其实是十分复杂的，具体的解析工作需要由服务端