错误监控
⼀、引⾔
1.为什么需要前端错误监控
你的脚本在哪些边界条件下会报错？
你的脚本和样式兼容性如何？
有哪些地区不能正常访问你的⽹站？
出现问题之后，你如何快速定位排查，把损失降到最低？
如果你想解决以上这些问题，那么你需要给你的⽹站部署错误监控系统。
2.前端错误监控系统如何⼯作
监控系统分为上报端、服务端与管理后台。上报端的形式⼀般为SDK，主要功能是捕获错误与上
报，更进阶的话可以考虑错误的复现与⽤⼾数据的收集，还有保证⽤⼾体验的平顺降级。服务端则
负责存储、分析错误信息，在错误数量和严重性达到⼀定程度时进⾏告警。管理后台则负责对错误
信息进⾏可视化展⽰，⽅便开发⼈员分析、复现问题与修复问题。
二、前端常见错误类型
- 语法错误
const abc, // 应该在eslint阶段或编译阶段捕获
- JavaScript 运行时错误
- 引用错误，类型错误等
console.log(notDefinedVariable) // 访问没有定义的变量
obj.undefinedFn() // 调用没有定义的函数- Rejected promise
const p = new Promise((resolve, reject) => {setTimeout(2000, () => {reject()})
})
- 网络请求错误
- 404、500 等状态码错误- 超时错误- 跨域错误等
- 资源加载错误
- 图片、脚本、样式表加载失败
<img src="404.png" alt=""><script>const img = new Image()img.src = '404.png'
</script>
- 安全漏洞
注入漏洞：SQL注入、命令注入、危险文件上传，前端漏洞：XSS、CSRF等等……
三、错误捕获与处理
- 浏览器内置错误捕获机制
try/catch：将所有代码包裹在try语句块当中，但只能捕获第一个宏任务的错误。
window.onerror：可以捕获运行时错误与异步错误，但无法捕获资源错误
window.onerror = function (message, url, line, column, error) {console.log(message, url, line, column, error);
}window.addEventListener
window.addEventListener('error', event => {// 可以捕获运行时错误与资源错误
}, true)
window.addEventListener('unhandledrejection', event => {// 可以捕获rejected promise
})
- 框架提供的错误捕获
错误边界：用于捕获子组件树在渲染过程中发生的错误，并展示一个备用 UI，而不是让整个应用崩溃。
- Vue
// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'const app = createApp(App)
// 全局错误捕获与处理
app.config.errorHandler = function (err, instance, info) {// 上报错误
}
app.mount('#app')// app.vue
import { onErrorCaptured } from 'vue';export default {setup() {// 错误边界onErrorCaptured((err, instance, info) => {console.error('Error caught in setup:', err, instance, info);// 改变组件状态，下个tick展示回退界面return false;});return {};},
};
React
class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {// 设置状态，下个tick展示回退界面return { hasError: true };}componentDidCatch(error, info) {// Example "componentStack":// in ComponentThatThrows (created by App)// in ErrorBoundary (created by App)// in div (created by App)// in App// 上报错误}render() {if (this.state.hasError) {// 回退界面，平顺降级return this.props.fallback;}return this.props.children;}
}// 包裹易出错的业务组件
<ErrorBoundary fallback={<p>Something went wrong</p>}><Profile />
</ErrorBoundary>- Axios： 注册全局 response 钩子捕获与处理 Ajax 错误
axios.interceptors.response.use(function (response) {// Any status code that lie within the range of 2xx cause this function to trigger// Do something with response dataif(response.data.code !== 0 ){// 处理与上报}return response;
}, function (error) {// Any status codes that falls outside the range of 2xx cause this function to trigger// 处理与上报return Promise.reject(error);
});
- 用户操作路径记录
用户事件记录：在 window 上绑定事件处理函数，在事件捕获阶段记录用户事件。优点：不侵入业务开发，不受 stopPropagation 影响。缺点：数据量大，需要剔除无效事件。
const events = []window.addEventListener('click', event => {// event.target pageX, pageY, buttonevents.push(event)
}, {capture: true})
状态仓库快照：在 Vuex/Redux 等状态仓库注册插件/中间件，记录下每次数据变化前后的状态快照。优点：能精确复现错误。缺点：需要在业务开发时将所有状态纳入状态仓库管理。
// snapshotPlugin.js
import _ from 'lodash'const snapshotPlugin = (store) => {let prevState = _.cloneDeep(store.state)store.subscribe((mutation, state) => {let nextState = _.cloneDeep(state)console.log('prevState', prevState)console.log('mutation', mutation)console.log('nextState', nextState)prevState = nextState})
}export { snapshotPlugin }// store/index.js
import { createStore } from 'vuex';
import { snapshotPlugin } from './snapshotPlugin';// 创建一个新的 store 实例
const store = createStore({state: {count: 0,},mutations: {increase(state) {state.count++}},devtools: true,plugins: [snapshotPlugin],
});export default store;
录屏： 利用 MutationObserver - Web API | MDN & html2canvas-pro 在页面 DOM 树发生变化时截屏或者记录 DOM 树，来重现 BUG 发生前一小段时间的显示画面。
- 捕获SDK设计原则
类型全面：需能捕获各种类型的错误，兼容各种软硬件环境
业务无感：业务开发无感：CI/CD注入，nginx 注入，Vuex/Redux 插件。用户体验无感：强缓存，CDN加速，性能影响忽略不计，控制上报频率。
稳定： 版本稳定，运行稳定
四、错误上报策略
- 上报方式
Image：手动构建一个Image，将上报内容赋值给src，后台则会返回一像素透明图片。优点：不影响页面观感，天然跨域，不占用ajax数量限额
sendBeacon：POST承载数据量更大，http status 204无response body，页面退出也不影响发送。 - 上报数据内容
错误信息：错误类型、message、源文件路径、行列号、堆栈跟踪
终端信息：浏览器版本、操作系统版本、网络状态
用户信息：用户id、业务id、关键数据
用户行为路径：近一小段时间的用户事件、actions和state快照、录屏 - 上报控制
重复错误剔除：根据错误信息做重复剔除
节流上报：一定时间内的错误合并上报。
熔断机制：大量持续重复的错误则停止上报。
五、错误管理后台 - 错误信息聚合展示
错误数量、频率、影响的业务、影响用户数、地域分布、趋势 - 告警
触发条件：严重程度、错误频率、影响范围
通知方式：IM、短信、邮件到AI电话等 - 辅助排查
位置还原：从 CI/CD 系统推送来的sourcemap还原真实出错文件路径、行列号。
复现错误：用户事件重播，录屏重播，actions重播，远程控制复现。 - 其他监控展示
性能监控、流量监控、安全监控等。
六、错误监控工具介绍
Sentry
Sentry 介绍和工作流程
Sentry 接入规范
Sentry 前端监控- 调研 & 实践
代码级监控Sentry使用手册-内测版
七、总结与思考
- 闭环
“闭环” 一词在不同领域有着不同的含义，但总体来说，它强调的是一种形成完整回路、自我调节和持续改进的状态或过程。
错误监控与闭环的关系？前端监控通过收集各种数据，如用户行为数据、页面性能数据、错误日志等，能够及时发现前端应用中存在的问题。对发现的问题进行及时处理。修复问题后，需要通过再次收集监控数据来验证问题是否得到解决，以及优化措施是否有效。 - 冰山
冰山理论，又称冰山模型，最初由美国著名心理学家萨提亚提出，后在多个领域得到广泛应用。冰山理论将一个事物或现象比作一座冰山。我们能直接观察到的部分，就如同冰山露出水面的一小部分，而更大的部分则隐藏在水下，不可直接看见。
在互联网开发的技术层面，表面上用户看到的是快速响应的界面、流畅的交互效果，但背后是复杂的技术架构和优化的性能表现。这就如同冰山理论中，水面下庞大而坚实的部分支撑着水面上的可见部分。
