錯誤監控
?、引?
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使用手冊-內測版
七、總結與思考
- 閉環
“閉環” 一詞在不同領域有著不同的含義，但總體來說，它強調的是一種形成完整回路、自我調節和持續改進的狀態或過程。
錯誤監控與閉環的關系？前端監控通過收集各種數據，如用戶行為數據、頁面性能數據、錯誤日志等，能夠及時發現前端應用中存在的問題。對發現的問題進行及時處理。修復問題后，需要通過再次收集監控數據來驗證問題是否得到解決，以及優化措施是否有效。 - 冰山
冰山理論，又稱冰山模型，最初由美國著名心理學家薩提亞提出，后在多個領域得到廣泛應用。冰山理論將一個事物或現象比作一座冰山。我們能直接觀察到的部分，就如同冰山露出水面的一小部分，而更大的部分則隱藏在水下，不可直接看見。
在互聯網開發的技術層面，表面上用戶看到的是快速響應的界面、流暢的交互效果，但背后是復雜的技術架構和優化的性能表現。這就如同冰山理論中，水面下龐大而堅實的部分支撐著水面上的可見部分。
