手机网站 分享,自定义字段wordpress,国家建筑信息管理平台,做外贸不能访问国外网站怎么办前言 公司的项目上线出现问题后难以定位错误#xff0c;研究过现存的错误监控方案#xff0c;受限于特殊条件只能定制自己的错误收集方案。 基于以上背景我撸出来一个错误日志收集方案 - Ohbug。 欢迎各位大佬 star ~ 监控错误 说起错误的捕获#xff0c;首先想到的是 try c…前言 公司的项目上线出现问题后难以定位错误研究过现存的错误监控方案受限于特殊条件只能定制自己的错误收集方案。 基于以上背景我撸出来一个错误日志收集方案 - 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);
}
复制代码React 16 的异常/错误处理 vue errorHandler 指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时可获取错误信息和 Vue 实例。 Vue.config.errorHandler function (err, vm, info) {// handle error// info 是 Vue 特定的错误信息比如错误所在的生命周期钩子// 只在 2.2.0 可用
}
复制代码errorHandler 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 {// 记录请求的 urlreqUrl: ,// 记录请求的方法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();
复制代码待实现功能 捕获websocket错误设置采集率sourcemap定位压缩代码具体错误位置参考文章 前端代码异常监控实战Js error 监控前端一站式异常捕获方案(全)转载于:https://juejin.im/post/5bd2dbc7f265da0af16183f8
