本文探讨前端JavaScript异常处理的最佳实践，重点介绍如何利用window.onerror和try/catch收集错误信息，并通过POST请求发送至后端存储。文章提出以URL为索引构建错误知识库，实现错误订阅、解决方案共享及新人学习，旨在提升开发效率并避免重复错误。
JS异常收集方案
受网络波动、浏览器差异或缓存机制等因素影响，线上运行的 JavaScript 代码可能与开发环境存在差异，从而抛出异常。对于前端开发工程师而言，JS 异常是日常工作中常见的现象。然而，如何有效记录并利用这些异常信息，往往被忽视。近期，我思考了一套涉及“收集”与“使用”两个步骤的解决方案。
复制代码
window.onerror = function(errorMessage, scriptURL, lineNumber) {
alert(errorMessage, scriptURL, lineNumber)
} 部分浏览器甚至提供了 Stack Trace（堆栈跟踪）功能。例如在 try/catch 语句中，可以通过 e.stack 获取堆栈信息（不同浏览器实现略有差异，可借助 eriwen/javascript-stacktrace 兼容库）。尝试以下代码：
复制代码
try {
fn()
} catch(e) {
alert(e.stack)
} 因此，收集这些错误信息相对便捷。需要注意的是，使用 window.addEventListener('error', callback, isBubble) 时，回调函数的第一个参数并非 event 对象，而是 Error 对象。鉴于此，使用 window.onerror 是一个较为简便的选择。但通过 dot 操作符监听的事件机制允许重载，且该监听脚本理论上应置于所有 JS 文件之前，因此需评估潜在风险。
二、使用
错误知识库与使用策略
在支付宝任职期间，线上 JS 报错会转化为邮件发送给前端开发团队，由开发人员自行认领并解决。这是一种不错的方案，解决了最基本的问题：即时响应与修复。但随之而来的问题是：如何避免同类错误再次发生？我的初步构想如下： 以 URL 为单元，记录同一页面的报错，便于统一解决。 记录错误信息包括：Page URL、User Agent、Script URL、Error Message 和 Line Number。 每个错误解决后，可在统一平台记录解决方案。其他用户可查看、评论并加分，最终形成存档知识库，并提供便捷的 API 供调用。 在开发阶段，当相同页面触发 window.onerror 时，通过插件分析 Error Message 识别类型，并结合 URL 判断，向开发者提示前人曾犯过的错误。 开发者可订阅知识库中的特定标签，自动接收相关邮件通知（也可根据文件注释、mapping 等方式进行更精准的匹配）。 这样做的目的主要在于解决以下问题： 形成知识库，帮助开发者（尤其是新人）从中学习。 工具提升效率，避免重复解决相同错误。 订阅机制确保通知更具针对性。
三、注意点
实施注意事项
1. 收集时使用 POST 发送 有时 Error Message 可能较长，而浏览器对 URL 长度有限制。若存储的错误数据量不大，可考虑使用 GET 发送，但通常 POST 能将所有数据完整发送至后台。 2. 何时发送数据 建议在触发 onerror 时立即发送。在最初尝试此想法时，曾尝试在 onbeforeonload 时发送，但 POST 请求尚未 open 即被浏览器中断。 3. 数据库索引选择 通常以 URL 作为索引适合多数网站。但对于百姓网、淘宝等 UGC（用户生成内容）较多的网站，可能需要变通，因为不同帖子虽 URL 不同，但使用的是同一套代码。若以 Error 作为索引，则需根据实际需求选择。 4. 是否记录所有错误 这也取决于具体需求。例如，百姓网的各种报错可能源自百度/Google 的广告外链，这类错误是否需要记录需酌情考虑。
四、结语
目前已初步实现了一个收集工具（sofish/stacktrace.js）及存储方式。是否继续深入开发，还需时间和进一步考量。现先发布出来，抛砖引玉。