前端错误日志收集方案

栏目: 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);
}
复制代码

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 的项目可以通过 onerroraddEventListener 监控全局错误(当然使用 react 或 vue 的项目同样可以)

onerroraddEventListener 都可以捕获到一些未知的错误,然而这两个有什么区别呢?

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();
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

社交红利

社交红利

徐志斌 / 北京联合出版公司 / 2013-8 / 42

如今的互联网,社交网络已占据了主要的位置。如腾讯微博、微信、QQ空间、人人网、新浪微博、唱吧、美丽说、啪啪等等,都可以算是社交网络,将大部分活跃的人们聚集起来,通过文字、图片、语音等形式分享着身边的事。这些社交网络吸引着更多兴趣相投的陌生人成为朋友结成圈子,也衍生出的海量流量和机会,为业界和创业者提供着源源不绝的新机会。可以这样说,社交网络在将散落在人们中的需求汇聚起来,等待着企业来提供服务。因此......一起来看看 《社交红利》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具