前端错误监控与错误日志

平时工作中没怎么接触到这部分，对它的了解也零零碎碎的。今天看了几篇文章，算是有个完整的认识了，在这里总结记录一下。

项目上线之后肯定无法避免所有的bug，有些bug出现后开发人员并不知道，有的知道了缺无法快速准确的修复。这时候就需要在代码层面去处理bug，一是方便debug，二则是通过错误处理防止程序崩溃。

参考资料：

前端错误日志收集方案
前端错误监控与上报
Vue SPA项目 + Sentry 实现前端错误监控

错误监控

最常用的错误监控当然是try catch，通过catch捕获到错误后进一步作出处理，但是try catch无法捕获异步产生的错误，并且实际工作中也不可能为所有的代码都加上try catch，所以能否全局捕获错误呢？

React中

React的生命周期中提供了一个勾子用来处理错误：componentDidCatch，使用它可以非常简单的捕获react下的错误信息

componentDidCatch(error, info) {     console.log(error, info);
}

Vue中

Vue中使用Vue.config.errorHandler勾子来处理错误

Vue.config.errorHandler = function (err, vm, info) {// handle error// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子// 只在 2.2.0+ 可用
}

其他项目中

对于没有使用Vue或React的项目，可以通过onerror或addEventlistener监控全局错误(当然使用 react 或 vue 的项目同样可以但没必要)
onerror 或 addEventListener 都可以捕获到一些未知的错误，然而这两个的用法有一些区别：

// onerror 中有多个参数，需要我们自行使用或组合
window.onerror = (msg, url, row, col, error) => {console.log({msg, url, row, col, error});
};
setTimeout(() => {undefined.map(v => v);
}, 1000);// addEventListener 中直接返回封装好的错误事件对象
// 这里要注意，此时addEventListener的第三个参数要为true
// 即在捕获阶段触发，这样才能获取到错误事件
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错误监控

项目使用了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);});

错误上报

上边说了错误监控，错误上报其实就是在监控到出错之后，发送ajax请求，把错误信息发送给服务端。另外还可以利用Image对象来发送信息。

跨域js文件错误也是可以捕获的，会提示 script error

第三方异常监控平台

常用的方案有：

Sentry
Fundebug
Bugsnag
BetterJS

这里只了解了一下Sentry，他的文档很友好，对于Vue和React都做了支持，按文档引入即可。

前端错误监控与错误日志相关推荐

火影推荐程序连载16-聊聊前端监控——错误监控篇
当有人问起:你们的公司的这款应用用户体验怎么样呀?访问量怎么样?此时,你该怎么回答呢?你会回答:UV.PV 巴拉巴拉,秒开率.FP.TTI 巴拉巴拉. 那么,这些数据是哪里来的呢?显而易见,这些数据都 ...
百万 QPS 前端性能监控系统设计与实现
作者:李振,腾讯云前端性能监控负责人什么是前端性能监控(RUM) 腾讯云前端性能监控 (RUM) 是一站式前端监控解决方案,用户只需要安装 SDK 到自己的项目中,通过简单配置化,即可实现对用户页面 ...
基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题...
背景在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视. 所以在我们前端开发完成后,会有一些列的web应用的上线验证,如自测.QA测试.code review 等 ...
基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题
基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题背景在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视 ...
搭建前端监控系统（二）JS错误监控篇
背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点.另一点主要原因是,功能通用,却未必能够满足我们自己的需求, 所以我们自给自足. 这是搭建前端监控系统的第二章,主要是介绍如何统 ...
搭建前端错误监控系统
当我们完成一个业务系统的上线时,总是要观察线上的运行情况,查看日志发现问题并进行优化迭代. 因为测试永远无法做到100%覆盖,用户也不会总是按照我们所预期的进行操作,因此我们需要在系统异常时主动对其进 ...
前端js错误监控onerror的总结
打工者联盟为了抵抗996.拖欠工资.黑心老板.恶心公司,让我们组成打工者联盟.客观评价自己任职过的公司情况,为其他求职者竖起一座引路的明灯.https://book.employleague.cn/ ...
讲透前端错误监控，看这篇文章就够了
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群 ○ 一.背景痛点某⼀天产品:xxx⼴告主反馈我们的⻚⾯注册不了!⼜⼀天运营:这个活动在xxx媒体上挂掉了! 在我司线上运 ...
web前端之异常/错误监控
为什么要异常/错误监控我们都知道有程序难免就会有异常/错误,当我们代码越来越多的时候异常/错误出现的几率也就会多,虽然我们会有测试,但是测试用例并不能覆盖所有可能,所以程序在生产上运行的时候进行异常 ...

前端错误监控与错误日志

错误监控

错误上报

第三方异常监控平台

前端错误监控与错误日志相关推荐

最新文章

热门文章