前端错误日志收集方案

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

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

查看所有标签

猜你喜欢:

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

程序员面试宝典

程序员面试宝典

欧立奇、刘洋、段韬 / 电子工业出版社 / 2006-7 / 39.00元

本书取材于各大IT公司历年面试真题(包括笔试题、口试题、电话面试、英语面试,以及逻辑测试和智商测试)。通过精确详细的分类,把在应聘程序员(含网络、测试等)过程中所遇见的常见考点分为21章。不仅对传统的C系语言考点做了详尽的解说,包括面向对象问题、sizeof问题、const问题、数据结构问题等。还根据外企出题最新特点,针对设计模式问题、C#问题、网络问题、数据库问题、NET问题等,做了深入的说明。......一起来看看 《程序员面试宝典》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

URL 编码/解码
URL 编码/解码

URL 编码/解码