javaScript错误监控核心是捕获运行时异常与资源加载失败并上报,需通过window.onError、addEventListener(‘error’)、unhandledrejection监听,配合主动上报、资源监控、轻量异步容错策略,确保精准定位问题。

javascript 错误监控的核心是捕获运行时异常和资源加载失败,并把关键信息上报到服务端。前端埋点不是单纯加代码,而是建立一套可维护、低侵入、能定位问题的采集机制。
全局错误捕获:window.onerror + window.addEventListener(‘error’)
这是最基础也最关键的埋点入口。`window.onerror` 能捕获 js 运行时错误(同步)、脚本加载失败;`addEventListener(‘error’)` 补充捕获图片、css、iframe 等资源加载失败。
- 注意 `window.onerror` 的第五个参数是 error 对象,建议优先用它获取堆栈(比 message 更准)
- 未捕获的 promise 拒绝需要单独监听:
window.addEventListener('unhandledrejection', ...) - 避免重复上报:同一个错误可能触发多次事件,可用简单防抖(如 1 秒内相同 message + stack 只报一次)
主动上报埋点:封装 reportError / trackEvent 方法
业务代码中难免有预期外逻辑(比如接口返回异常结构、用户输入非法),这时要主动调用埋点方法,而不是等崩溃。
- 统一上报函数应包含:错误类型(js_error / api_fail / business_warn)、模块名、操作路径、关键变量快照(如 userId、orderId)、时间戳、UA 和页面 URL
- 不要在 try-catch 里直接发请求,改用
setTimeout(() => report(...), 0)避免阻塞主流程 - 敏感字段(如手机号、Token)必须脱敏后再上报,前端不传明文
资源与性能异常:监听加载失败和慢加载
404 脚本、跨域 CSS、超时图片都会导致功能异常,但不会触发 JS 报错,需单独关注。
立即学习“Java免费学习笔记(深入)”;
- 给动态插入的 script/link/img 标签添加
onerror回调,记录资源 URL 和触发位置 - 结合
PerformanceObserver监听 longtask、largest-contentful-paint 超时,识别卡顿场景 - 对高频资源(如统计 SDK)做加载兜底:加载失败时降级为本地打点或延后重试
上报策略与容错:别让监控本身拖垮页面
上报行为必须轻量、异步、可降级,否则会引发负向循环。
- 优先用
navigator.sendBeacon()发送,确保页面卸载时也能发出(关闭标签、跳转前) - 失败时缓存到 localStorage,下次打开页面补传(限制条数,比如最多存 20 条)
- 设置采样率(如 error 上报 100%,warn 级别只报 10%),大流量站点必须做
- 监控脚本自身要 try-catch 包裹,禁止因埋点代码出错影响业务
基本上就这些。不需要一上来就上 SDK,从 onerror + 主动上报 + 资源监听三个点切入,再逐步加采样、聚合、SourceMap 解析,就能覆盖大部分线上问题。关键是把“谁在哪干了什么出了什么错”说清楚,而不是堆功能。