前端监控系列2|深入探讨JS错误监控的重要性与实践

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

JS错误监控的重要性

假设不对JS错误进行监控，将会带来哪些问题？JS错误可能导致页面渲染失败、用户操作中断等问题，若没有有效的监控手段，开发者将无法及时发现这些问题，特别是在电商、支付等关键业务中，用户无法完成订单或支付，将严重影响用户体验和业务运营。即使网站提供了反馈渠道，当用户报告问题时，问题的影响范围可能已经扩大。

因此，JS错误监控的存在旨在及时发现并定位线上问题，提高网站的稳定性和用户体验。

JS错误监控的方法

大多数JS错误是由JS引擎自动生成的，如TypeError（类型错误）和SyntaxError（语法错误）。对于可预见的错误，可以通过try/catch语句捕获；而对于不可预见的全局错误，则可以通过监听全局的error事件来收集。

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错误发生时的更多上下文信息，包括用户操作路径、浏览器类型和版本等。

用户操作路径的还原

记录用户从进入页面到发生错误的所有事件，包括页面交互、网络请求和路由变化。监控SDK通常会监听click和keypress等事件，同时记录元素的XPath而非文本内容，以保护用户隐私。此外，还会通过hook XHR和Fetch来监听网络请求，以及通过hook history方法来监听路由变化。

虽然这些操作会增加一定的成本，但对于字节跳动的前端监控SDK来说，这些功能已经是内置的一部分，因此不会额外增加负担。

环境信息的收集

环境信息包括用户的浏览器类型和版本、操作系统类型和版本、设备品牌等。这些信息主要通过UserAgent字符串获取，但具体的解析工作通常由服务端完成。拥有这些数据有助于快速判断JS错误的影响范围，尤其是对于兼容性问题。

补充堆栈不完整的错误上下文

同步错误通常带有完整的堆栈信息，但异步错误的堆栈信息往往不完整。例如，异步调用触发的错误很难提供详细的堆栈信息。为了改善这种情况，监控SDK会对全局的异步API进行try/catch包装，捕获错误时补充API调用信息，尽管堆栈信息不完整，但可以提供有用的上下文。

然而，线上JS错误的堆栈信息通常被压缩和混淆，难以理解。为了解决这个问题，可以使用source map将混淆后的堆栈信息映射回原始代码，从而准确地定位错误。

自动解析原始堆栈

线上JS错误的堆栈信息难以理解，因为代码经过了打包、压缩、兼容处理等步骤。source map维护了混淆代码与原始代码之间的映射关系，通过解析source map可以将混淆后的堆栈信息还原为原始堆栈信息。

监控平台通常提供自动上传source map的工具，使得JS错误上报后能够自动显示原始堆栈信息，从而便于开发者定位问题。

错误聚合与去重

为了减少噪音，需要将相同的错误聚合在一起。仅靠错误名称和消息进行聚合是不够的，因为相同的错误可能来自不同的代码段。因此，实际的聚合算法会考虑反解后的堆栈信息，提取每个frame的函数名、文件名和行号，生成唯一的issueId作为标识。

通过这种方式，监控平台可以有效地识别和展示不同的错误，避免遗漏。

新错误的检测与通知

通过聚合算法生成的issueId，可以判断是否有新的JS错误出现。如果是新的issueId，则代表有新的JS错误，可以触发通知机制，及时提醒开发者处理。

自动化分配责任人

为了更高效地处理错误，可以利用Git Blame等工具自动分配责任人。通过解析原始堆栈信息，结合Gitlab/Github的API，可以确定错误代码的提交者，从而自动通知相应的责任人处理问题。

需要注意的是，线上代码可能不是最新的版本，因此需要在编译时注入版本信息，并通过相关工具将线上错误与对应的代码版本关联起来，确保准确地分配责任人。

结语

JS错误监控是提升前端应用稳定性和用户体验的重要手段。通过本文介绍的方法和技术，可以有效地监控和管理JS错误，实现问题的快速发现和解决。目前，字节跳动的前端监控解决方案已在火山引擎上提供，欢迎体验。