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 解析，就能覆盖大部分线上问题。关键是把“谁在哪干了什么出了什么错”说清楚，而不是堆功能。
