前端监控通过JavaScript错误追踪保障应用稳定，需全面收集并上报错误。1. 使用window.onerror捕获全局脚本错误，获取错误信息、文件、行列号及堆栈，跨域需配置crossorigin和CORS；2. 通过window.onunhandledrejection监听未处理的Promise拒绝，收集拒绝原因并补充上下文；3. 利用window.addEventListener('error', handler, true)捕获资源加载失败，区分资源类型并记录URL、耗时等；4. 上报采用sendBeacon确保页面卸载时数据发送，结合去重、限频与脱敏策略，避免性能影响。
前端监控中，JavaScript错误追踪是保障线上应用稳定运行的重要环节。通过捕获和分析JS运行时错误，能快速定位问题、提升用户体验。核心在于全面收集错误信息并有效上报，同时避免影响主业务流程。
捕获全局JavaScript错误
利用window.onerror可以监听未捕获的脚本错误，包括语法错误和运行时异常。它能获取错误信息、出错文件、行号、列号以及堆栈（部分浏览器支持）。
基本用法如下：
- 注册全局错误处理器，接收错误详情参数
- 注意跨域脚本错误会显示为"Script error."，需配合
crossorigin属性和服务器CORS头解决 - 在函数内返回
true可阻止错误继续抛出到控制台（仅用于特定场景）
监听Promise异常
传统onerror无法捕获未处理的Promise拒绝。使用window.onunhandledrejection专门监听这类问题。
立即学习“Java免费学习笔记（深入）”；
建议做法：
- 统一收集
event.reason中的拒绝原因，可能是字符串或Error对象 - 结合上下文补充页面状态，如当前路由、用户操作路径
- 注意某些Polyfill可能干扰原生Promise事件触发
捕获资源加载失败
图片、脚本、样式等静态资源加载失败也会导致功能异常。通过window.addEventListener('error')并判断event.target类型来区分资源错误。
- 监听
error事件时使用捕获阶段（第三个参数设为true），确保能接收到资源元素的错误 - 过滤掉非资源节点的错误（如window层级的script error）
- 记录资源URL、加载耗时、HTTP状态码有助于排查CDN或打包问题
错误信息上报策略
收集到错误后需合理上报，避免请求风暴影响性能。
- 使用
navigator.sendBeacon在页面卸载前异步发送数据，保证送达率 - 对相同错误做去重处理，例如基于错误类型+堆栈前几行生成指纹
- 限制上报频率，如每分钟最多上报10条，优先上报首次出现的严重错误
- 敏感信息脱敏，不上传用户身份、完整URL参数等内容
基本上就这些。关键是在不影响性能的前提下尽可能多地收集有效错误现场，便于后续分析和修复。
