前端錯誤收集（Vue.js、微信小程序）

時間  2019-11-06
標籤 前端 錯誤 收集 vue.js vue 微信 程序 欄目 JavaScript 简体版
原文   原文鏈接

前言

隨着公司業務的發展，前端項目也愈來愈多。有的時候客戶反饋的一個問題，須要耗費大量的時間去查。錯誤信息不能第一時間獲取，多少會給公司帶來損失。這個時候咱們就須要一套錯誤收集機制，去提早發現代碼中存在的問題，在客戶反饋以前把問題提早處理掉。或者在收到客戶反饋的時候能夠查到對應的錯誤棧來幫助咱們快速去定位以及解決問題。下面主要介紹vue和微信小程序錯誤收集的方法。javascript

錯誤收集方法

Vue錯誤收集

Vue提供了一個全局配置errorHandler，用於收集Vue運行時發生的錯誤。 詳細介紹api cn.vuejs.org/v2/api/#err…html

用法：前端

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  //`err`是js錯誤棧信息，能夠獲取到具體的js報錯位置。
  //`vm` vue實例
  //`info` 是 Vue 特定的錯誤信息，好比錯誤所在的生命週期鉤子
  // 只在 2.2.0+ 可用
}
複製代碼

固然拿到vue對應的實例以後，咱們就能夠輕鬆獲取到vue對應的組件名稱以及自定義屬性等等（此處可自由發揮）。vue

如下是獲取組件名稱的方法：（來源：fundebug）java

function formatComponentName(vm) {
    if (vm.$root === vm) return 'root';
    var name = vm._isVue
        ? (vm.$options && vm.$options.name) ||
        (vm.$options && vm.$options._componentTag)
        : vm.name;
    return (
        (name ? 'component <' + name + '>' : 'anonymous component') +
        (vm._isVue && vm.$options && vm.$options.__file
            ? ' at ' + (vm.$options && vm.$options.__file)
            : '')
    );
}
複製代碼

這個時候咱們代碼就能夠改寫成這樣：node

Vue.config.errorHandler = function(err, vm, info) {
    if (vm) {
        var componentName = formatComponentName(vm);
        //調用錯誤日誌收集接口
    } else {
        //調用錯誤日誌收集接口
    }
};
複製代碼

知道了怎麼收集錯誤信息，接下來只須要簡單的包裝一下就能夠應用到項目中去了。（固然你還須要一個保存錯誤信息的接口和展現錯誤信息的界面，網上也有一些成熟的日誌處理框架，相似：ELK）webpack

新建一個文件debug.jsgit

let debugConfig = {
    Vue: null,
    //項目名稱
    entryName: 'entryName',
    //腳本版本
    scriptVersion: '1.0',
    // 環境
    releaseStage: 'pro'
},
debug = {
    notifyWarn({ message, metaData }) {
        let type = 'caught',
            severity = 'warn';
        
        _logReport({ type, severity, message, metaData });
    },
    notifyError({ type = 'caught', error, message, metaData, lineNumber, columnNumber, fileName }){
        let severity = 'error';

        _logReport({ type, severity, error, metaData, message, lineNumber, columnNumber, fileName });
    }
};

// 日誌上報
function _logReport({ type, severity, error, metaData, message, lineNumber, columnNumber, fileName }) {

    let { silentDev, Vue } = debugConfig;

    message = message || error && error.message || '';

    //這裏能夠作一個灰度控制

    let { entryName, releaseStage, severity, scriptVersion } = debugConfig,
        name = error && error.name || 'error',
        stacktrace = error && error.stack || '',
        time = Date.now(),
        title = document.title,
        url = window.location.href,
        client = {
            userAgent: window.navigator.userAgent,
            height: window.screen.height,
            width: window.screen.width,
            referrer: window.document.referrer
        },
        pageLevel = 'p4';

    //此處能夠給你的頁面進行分級
    pageLevel = 'p0';//getPageLevel();

    //此處http請求使用的是vue-resource，能夠根據各自的狀況進行調整
    Vue.http.post(logReportUrl, {
        entryName,
        scriptVersion,
        message,
        metaData,
        name,
        releaseStage,
        severity,
        stacktrace,
        time,
        title,
        type,
        url,
        client,
        lineNumber,
        columnNumber,
        fileName,
        pageLevel//頁面等級
    });

}

export default function(Vue, option = {}){

    debugConfig = Object.assign(debugConfig, { Vue, ...option });
    
    //若是你想在開發環境不去捕獲錯誤信息 能夠在此處加上環境判斷

    function formatComponentName(vm) {
        if (vm.$root === vm) return 'root';
        let name = vm._isVue
            ? (vm.$options && vm.$options.name) ||
            (vm.$options && vm.$options._componentTag)
            : vm.name;
        return (
            (name ? 'component <' + name + '>' : 'anonymous component') +
            (vm._isVue && vm.$options && vm.$options.__file
                ? ' at ' + (vm.$options && vm.$options.__file)
                : '')
        );
    }

    Vue.config.errorHandler = function(err, vm, info) {
        if (vm) {
            let componentName = formatComponentName(vm);
            let propsData = vm.$options && vm.$options.propsData;
            debug.notifyError({
                error: err,
                metaData: {
                    componentName,
                    propsData,
                    info,
                    userToken: { userId: 1 }//metaData能夠存一些額外數據，好比：用戶信息等
                }
            });
        } else {
            debug.notifyError({
                error: err,
                metaData: {
                    userToken: { userId: 1 }//metaData能夠存一些額外數據，好比：用戶信息等
                }
            });
        }
    };
    
    window.onerror = function(msg, url, lineNo, columnNo, error) {
        debug.notifyError({
            type: 'uncaught', 
            error, 
            metaData: {
                userToken: { userId: 1 }//metaData能夠存一些額外數據，好比：用戶信息等
            }, 
            message: msg, 
            lineNumber: lineNo, 
            columnNumber: columnNo, 
            fileName: url
        });
    }

}

//最後咱們把debug拋到外面供其餘地方調用
export { debug }
複製代碼

固然你還能夠捕獲Promise、網絡請求、圖片等異常。此處推薦一篇比較全的文章，你們可自行去查看juejin.im/post/5bd2db…web

初始化：小程序

//錯誤日誌收集
import debug from './debug';
//初始化錯誤處理
Vue.use(ngmmdebug, { entryName: 'webmall' });
複製代碼

若是你想本身上報錯誤能夠經過：

import { debug } from './debug';
debug.notifyError({ messag: '發生錯誤了' });
複製代碼

微信小程序錯誤收集

微信小程序收集錯誤信息也是比較方便的，只須要在調用App函數時傳入的對象中實現onError方法便可。文檔地址：developers.weixin.qq.com/miniprogram…

用法：

App({
  onError (msg) {
    console.log(msg);//msg就是報錯信息
  }
})
複製代碼

若是你想讓代碼移植性更高一點能夠經過這樣作：

//將App暫存起來
let _App = App;

function HookParams(_appParams, eventName, eventFn) {
  if (_appParams[eventName]) {
    let _eventFn = _appParams[eventName];
    //若是參數中已經存在onError函數，則保留而且添加錯誤收集
    _appParams[eventName] = function (error) {
      eventFn.call(this, error, eventName);
      return _eventFn.call.apply(_eventFn, [this].concat(Array.prototype.slice.call(arguments)))
    }
  } else {
    //若是參數中不存在onError函數，那比較簡單直接定義一個，而且加入錯誤收集
    _appParams[eventName] = function (error) {
      eventFn.call(this, error, eventName)
    }
  }
}

function onErrorFn(error, eventName) {
  //收集錯誤
}

App = function (_appParams) {
  HookParams(_appParams, "onError", onErrorFn);
  _App(_appParams);
};
複製代碼

原理其實很簡單，經過改寫App函數，再經過Hook的手段來處理傳入的參數便可。

一樣，咱們如今已經知道了如何收集錯誤，接下來只須要簡單包裝一下 咱們的代碼便可。

新建一個文件debug.js

function HookParams(_appParams, eventName, eventFn) {
  if (_appParams[eventName]) {
    let _eventFn = _appParams[eventName];
    _appParams[eventName] = function (error) {
      eventFn.call(this, error, eventName);
      return _eventFn.call.apply(_eventFn, [this].concat(Array.prototype.slice.call(arguments)))
    }
  } else {
    _appParams[eventName] = function (error) {
      eventFn.call(this, error, eventName)
    }
  }
}

function objToParam(options = {}) {
    let params = '';
    for (let key in options) {
        params += '&' + key + '=' + options[key];
    }
    return params.substring(1);
}

function onErrorFn(error, eventName) {
    _logReport(error);
}

// 將App暫存起來
let _App = App;

App = function (_appParams) {
  HookParams(_appParams, "onError", onErrorFn);
  _App(_appParams);
};

//config
let debugConfig = {
  entryName: 'entryName',
  releaseStage: 'pro',
  scriptVersion: '1.0',
  client: {}
}

//獲取設備信息
wx.getSystemInfo({
  success: function (res) {
    debugConfig.client = res;
  }
});

//拼裝postData
function getPostData(error = '') {
  let {
    entryName,
    releaseStage,
    scriptVersion,
    client
  } = debugConfig,
  curPage = getCurrentPages()[getCurrentPages().length - 1],
    url = '',
    urlParams = '',
    name = 'error',
    postData = "postData",
    metaData = {},
    pageLevel = 'p0';

  //處理url
  if (curPage) {
    url = curPage.route;

    //此處本身根據實際項目給頁面定級
    pageLevel = 'p0'; //getPageLevel(url);

    urlParams = objToParam(curPage.options);
    if (urlParams) {
      url += '?' + urlParams;
    }
  }

  name = error.split('\n')[0] || 'error';
  metaData = {
    userToken: getHeaders()
  }

  try {
    postData = {
      data: JSON.stringify({
        entryName,
        type: 'caught',
        scriptVersion,
        releaseStage,
        name,
        stacktrace: error,
        time: Date.now(),
        client,
        url,
        metaData,
        pageLevel,
        serviceLevel
      })
    };
  } catch (e) {
    console.error(e);
  }

  return postData;
}

//控制錯誤的發送
function _logReport(error) {
    //灰度控制自行加
    wx.request({
        header: {
        'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'POST',
        url: logReportUrl,
        data: getPostData(error)
    });
}

let debug = {
  init(option = {}) {
    debugConfig = Object.assign({}, debugConfig, option);
  },
  notifyError(error) {
    _logReport(error)
  }
}

module.exports = debug;
複製代碼

修改app.js：

import ngmmdebug from './utils/ngmmdebug.js';
//初始化
ngmmdebug.init({
  entryName: 'mall-wxapp',
  scriptVersion: '2.6.3'
})
複製代碼

手動上報錯誤

import ngmmdebug from './utils/ngmmdebug.js';
ngmmdebug.notifyError('發生錯誤了～');
複製代碼

小程序有幾個比較特別的點能夠看一下：

一、經過wx.getSystemInfo獲取設備信息，固然你還能夠經過wx.getUserInfo 獲取用戶信息等。

二、小程序完整的連接須要經過頁面options屬性自行組裝。

參考

收集字段參考

{
    "entryName":"項目名稱",
    "scriptVersion":"1.0",//腳本版本
    "message":"aler is not defined",//錯誤描述
    "metaData":{//自定義字段
        "componentName":"anonymous component at /Users/taoxinhua/git/webmall/src/components/app.vue",//組件名稱
        "info":"created hook",//vue報錯信息
        "userToken":{//用戶登陸信息
            "user_id": 1
        }
    },
    "name":"ReferenceError",//錯誤名稱
    "releaseStage":"local",//報錯環境pre|beta|local
    "stacktrace":"ReferenceError: aler is not defined
at VueComponent.created (webpack-internal:///370:32:9)
at callHook (webpack-internal:///1:2666:21)
at VueComponent.Vue._init (webpack-internal:///1:4227:5)
at new VueComponent (webpack-internal:///1:4397:12)
at createComponentInstanceForVnode (webpack-internal:///1:3679:10)
at init (webpack-internal:///1:3496:45)
at createComponent (webpack-internal:///1:5148:9)
at createElm (webpack-internal:///1:5091:9)
at Vue$3.patch [as __patch__] (webpack-internal:///1:5607:9)
at Vue$3.Vue._update (webpack-internal:///1:2415:19)",//錯誤棧
    "time":1544437068009,//發生錯誤時的客戶端時間
    "title":"年糕媽媽優選",//頁面標題
    "type":"caught",//錯誤類型參考fundebug
    "url":"http://localhost:3200/test",//頁面地址
    "client":{//客戶端信息
        "userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36",
        "height":800,
        "width":1280,
        "referrer":"http://localhost:3200/test"
    },
    "pageLevel":"p4"//頁面錯誤級別，方便查詢和優先處理重要頁面的bug
}
複製代碼

比較好用的日誌收集系統

若是你的系統比較小又想無償使用的話，能夠試試fundebug。

總結

前端收集錯誤仍是比較簡單的，如何利用好這些收集來的錯誤就須要本身慢慢去琢磨了。文中若是有哪些不對的地方能夠在評論區指出。

署名

by:Tao

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程