前端异常与性能监控核心是通过window.onerror、unhandledrejection和error事件捕获js错误及资源加载失败，结合performance api采集fp/fcp/lcp/cls等指标，用sendbeacon可靠上报，并辅以sourcemap解析、路由上下文隔离和错误去重等关键细节保障实效性。
网页性能监控和前端异常错误监控是保障用户体验与线上稳定性的重要手段。核心在于自动采集、精准识别、可靠上报、快速定位，不需要手动打点就能覆盖大部分场景。
一、JS运行时错误怎么捕获
主要靠三类全局监听机制，缺一不可：
-
window.onerror：捕获同步执行错误、异步脚本错误（如 setTimeout 中抛出的错误），能拿到错误消息、文件路径、行列号和堆栈；注意跨域脚本需加
crossorigin属性并服务端配Access-Control-Allow-Origin才能获取完整堆栈。 -
window.addEventListener('error', ..., true)：专门捕获资源加载失败，比如
<img>、<script></script>、<link>标签加载 404 或超时；通过e.target判断类型，过滤掉非资源错误。 -
window.addEventListener('unhandledrejection')：捕获未被
.catch()处理的 Promise 拒绝，常见于 API 请求失败但没兜底的场景；e.reason通常是 Error 实例或字符串，建议统一转为对象再上报。
二、性能指标怎么采集
用浏览器原生 Performance API，零依赖、低侵入：
-
页面级指标：用
performance.getEntriesByType('navigation')[0]获取loadEventEnd - fetchStart（页面总耗时）、domContentLoadedEventEnd - fetchStart（DOM 加载完成）等；performance.timing已废弃，优先用getEntriesByType('navigation')。 -
渲染关键指标：用
PerformanceObserver监听'paint'（FP/FCP）、'largest-contentful-paint'（LCP）、'layout-shift'（CLS）；例如监听 FCP 后立即上报：entry.name === 'first-contentful-paint'。 -
资源加载耗时：调用
performance.getEntriesByType('resource')，可筛选慢资源（如图片加载 >1s）、统计各类型资源失败率。
三、错误与性能数据怎么上报
上报要兼顾**成功率、低干扰、可追溯**：
-
优先用
navigator.sendBeacon()：在页面卸载前（如用户关闭标签页）也能发出请求，支持 POST，兼容性好，不阻塞主流程。 -
降级用
fetch(..., { keepalive: true })：现代浏览器中效果接近 sendBeacon，适合需携带 headers 的场景。 -
兜底用
new Image().src：GET 方式、无跨域限制、100% 兼容，适合轻量日志（如仅传 type + timestamp + url）。 - 上报内容建议包含：错误类型、堆栈或 reason、当前 URL、UserAgent、设备信息、网络类型（
navigator.connection?.effectiveType）、时间戳、页面可见状态（document.visibilityState）。
四、容易忽略但很关键的细节
很多问题不是没监控，而是监控了却查不到根因：
- 生产环境 JS 压缩后堆栈难读？必须上传 SourceMap 并在服务端做映射解析，否则报错位置全是
app.min.js:1:12345。 - 白屏怎么定义？可用
performance.getEntriesByType('navigation')[0].domLoading作为起点，配合首屏元素（如 banner 图片或标题 DOM）的offsetTop出现时机来估算，或用MutationObserver检测关键节点插入。 - 单页应用（SPA）路由切换后错误归属混乱？应在每次
popstate或hashchange后重置上下文，并把当前路由写入错误日志。 - 重复上报？对同一错误（相同 stack hash）做 5 秒内去重，避免刷屏告警。
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
