前端错误监控
关于错误监控的实现,有两个方案,
1.只在前端做一个监控,不做储存使用复盘使用,优化客户体验。
2.在数据库中建立问题清单。需要后端配合(也可自行完成)。把所有问题记录下来,可添加通知功能。方便随时调取复盘。
业务需要目前只用优化一下客户体验此处先放第一个方案。
首先错误监控要做的第一件事是捕获异常,
window.onerror = (msg, url, row, col, error) => { const exception = { // 上报错误归类 mechanism: { type: 'js' }, // 错误信息 value: msg, // 错误类型 type: error.name || 'UnKnowun', // 解析后的错误堆栈 stackTrace: { frames: parseStackFrames(error), }, meta: { url, // 文件地址 row, // 行号 col, // 列号 } }; // 获取了报错详情,就可以走上报方法上报错误信息 console.log('JS运行error', exception); return true; // 返回 true,阻止了默认事件执行,也就是原本将要在控制台打印的错误信息 };
方法二:
// 初始化 JS异常 的数据获取和上报 initJsError = (): void => { const handler = (event: ErrorEvent) => { // 阻止向上抛出控制台报错 event.preventDefault(); // 如果不是 JS异常 就结束 if (getErrorKey(event) !== mechanismType.JS) return; const exception = { // 上报错误归类 mechanism: { type: mechanismType.JS, }, // 错误信息 value: event.message, // 错误类型 type: (event.error && event.error.name) || 'UnKnowun', // 解析后的错误堆栈 stackTrace: { frames: parseStackFrames(event.error), }, // 用户行为追踪 behaviorTracking 在 errorSendHandler 中统一封装 // 页面基本信息 pageInformation 也在 errorSendHandler 中统一封装 // 错误的标识码 errorUid: getErrorUid(`${mechanismType.JS}-${event.message}-${event.filename}`), // 附带信息 meta: { // file 错误所处的文件地址 file: event.filename, // col 错误列号 col: event.colno, // row 错误行号 row: event.lineno, }, } as exceptionMetrics; // 一般错误异常立刻上报,不用缓存在本地 this.errorSendHandler(exception); }; window.addEventListener('error', (event) => handler(event), true); };
监听异步的方法:unhandledrejection
记于2022/5/25,明天继续补全,要板砖了
方案二可以使用nodejs搭建后台与数据库进行数据交互。