前端错误日志收集方案
栏目: JavaScript · 发布时间: 6年前
内容简介:公司的项目上线出现问题后难以定位错误,研究过现存的错误监控方案,受限于特殊条件只能定制自己的错误收集方案。基于以上背景我撸出来一个错误日志收集方案 -欢迎各位大佬 star ~
公司的项目上线出现问题后难以定位错误,研究过现存的错误监控方案,受限于特殊条件只能定制自己的错误收集方案。
基于以上背景我撸出来一个错误日志收集方案 - Ohbug 。
欢迎各位大佬 star ~
监控错误
说起错误的捕获,首先想到的是 try catch
,通过 catch
捕获到错误后进一步做出处理
try { undefined.map(v => v); } catch(e) { console.log(e); // TypeError: Cannot read property 'map' of undefined } 复制代码
然而 try catch
对于异步产生的错误毫无感知
try { setTimeout(() => { undefined.map(v => v); }, 1000) } catch(e) { console.log(e); // TypeError: Cannot read property 'map' of undefined } 复制代码
并且在实际工作中我也不可能给所有代码加上 try catch
,所以能否捕获全局的错误呢?
react componentDidCatch
React 16
提供了一个内置函数 componentDidCatch
,使用它可以非常简单的获取到 react 下的错误信息
componentDidCatch(error, info) { console.log(error, info); } 复制代码
vue errorHandler
指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和 Vue 实例。
Vue.config.errorHandler = function (err, vm, info) { // handle error // `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子 // 只在 2.2.0+ 可用 } 复制代码
onerror
vs addEventListener
对于没有使用 react 或 vue 的项目可以通过 onerror
或 addEventListener
监控全局错误(当然使用 react 或 vue 的项目同样可以)
onerror
或 addEventListener
都可以捕获到一些未知的错误,然而这两个有什么区别呢?
window.onerror = (msg, url, row, col, error) => { console.log({msg, url, row, col, error}); }; setTimeout(() => { undefined.map(v => v); }, 1000); 复制代码
window.addEventListener('error', (e) => { console.log(e); }, true); 复制代码
除此之外, addEventListener
还可以捕获资源加载错误、未 catch 的 promise 错误。
// 捕获未 catch 的 promise 错误 window.addEventListener("unhandledrejection", e => { e.preventDefault(); console.log(e); }); Promise.reject('promiseError'); 复制代码
ajax/fetch 错误监控
想要监控请求失败,上面的方法肯定是不可取的了。
使用 axios
的小伙伴可以通过配置拦截器实现错误的监控。
// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); 复制代码
这里我采用了重新封装 XMLHttpRequest
/ fetch
对象的方法实现对网络请求的监控。
XMLHttpRequest
const AJAX = { // 记录请求的 url reqUrl: '', // 记录请求的方法 reqMethod: '', // 保存原生的 open 方法 xhrOpen: window.XMLHttpRequest.prototype.open, // 保存原生的 send 方法 xhrSend: window.XMLHttpRequest.prototype.send, init() { const that = this; window.XMLHttpRequest.prototype.open = function () { that.reqUrl = arguments[1]; that.reqMethod = arguments[0]; that.xhrOpen.apply(this, arguments); }; window.XMLHttpRequest.prototype.send = function () { this.addEventListener('readystatechange', function () { if (this.readyState === 4) { if (!this.status || this.status >= 400) { // 错误收集 } } }); that.xhrSend.apply(this, arguments); }; }, }; AJAX.init(); 复制代码
fetch
const FETCH = { backup: window.fetch, init() { window.fetch = function (url, conf) { return ( FETCH.backup.apply(this, arguments) .then((res) => { if (!res.status || res.status >= 400) { // 错误收集 } return res; }) ); }; }, }; FETCH.init(); 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端监控数据收集perf
- vue项目前端错误收集之sentry
- 前端错误收集(Vue.js、微信小程序)
- JVM 笔记:垃圾收集算法与垃圾收集器
- JVM 笔记:垃圾收集算法与垃圾收集器
- Java 垃圾收集技术
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。