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

年糕媽媽技術團隊發表於2018-12-11
前端Vue.js微信小程式

前言

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

錯誤收集方法

Vue錯誤收集

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

用法：

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  //`err`是js錯誤棧資訊，可以獲取到具體的js報錯位置。
  //`vm` vue例項
  //`info` 是 Vue 特定的錯誤資訊，比如錯誤所在的生命週期鉤子
  // 只在 2.2.0+ 可用
}
複製程式碼

當然拿到vue對應的例項之後，我們就可以輕鬆獲取到vue對應的元件名稱以及自定義屬性等等（此處可自由發揮）。

以下是獲取元件名稱的方法：（來源：fundebug）

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)
            : '')
    );
}
複製程式碼

這個時候我們程式碼就可以改寫成這樣：

Vue.config.errorHandler = function(err, vm, info) {
    if (vm) {
        var componentName = formatComponentName(vm);
        //呼叫錯誤日誌收集介面
    } else {
        //呼叫錯誤日誌收集介面
    }
};
複製程式碼

知道了怎麼收集錯誤資訊，接下來只需要簡單的包裝一下就可以應用到專案中去了。（當然你還需要一個儲存錯誤資訊的介面和展示錯誤資訊的介面，網上也有一些成熟的日誌處理框架，類似：ELK）

新建一個檔案debug.js

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…

初始化：

//錯誤日誌收集
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('發生錯誤了～');
複製程式碼

小程式有幾個比較特別的點可以看一下：

1、通過wx.getSystemInfo獲取裝置資訊，當然你還可以通過wx.getUserInfo 獲取使用者資訊等。

2、小程式完整的連結需要通過頁面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

相關文章