談談前端異常捕獲與上報

時間 2019-11-16

標籤談談前端異常捕獲上報简体版

原文原文鏈接

關於

微信公衆號：前端呼啦圈（Love-FED）
個人博客：勞卜的博客
知乎專欄：前端呼啦圈

前言

Hello，你們好，又與你們見面了，此次給你們分享下前端異常監控中須要瞭解的異常捕獲與上報機制的一些要點，同時包含了實戰性質的參考代碼和流程。javascript

首先，咱們爲何要進行異常捕獲和上報呢？html

正所謂百密一疏，一個通過了大量測試及聯調的項目在有些時候仍是會有十分隱蔽的bug存在，這種複雜而又不可預見性的問題惟有經過完善的監控機制纔能有效的減小其帶來的損失，所以對於直面用戶的前端而言，異常捕獲與上報是相當重要的。前端

雖然目前市面上已經有一些很是完善的前端監控系統存在，如sentry、bugsnag等，可是知己知彼，才能百戰不殆，惟有了解原理，摸清邏輯，使用起來才能駕輕就熟。java

異常捕獲方法

1. try catch

一般，爲了判斷一段代碼中是否存在異常，咱們會這一寫：node

try {
    var a = 1;
    var b = a + c;
} catch (e) {
    // 捕獲處理
    console.log(e); // ReferenceError: c is not defined
}
複製代碼

使用try catch可以很好的捕獲異常並對應進行相應處理，不至於讓頁面掛掉，可是其存在一些弊端，好比須要在捕獲異常的代碼上進行包裹，會致使頁面臃腫不堪，不適用於整個項目的異常捕獲。react

2. window.onerror

相比try catch來講window.onerror提供了全局監聽異常的功能：webpack

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
    console.log('errorMessage: ' + errorMessage); // 異常信息
    console.log('scriptURI: ' + scriptURI); // 異常文件路徑
    console.log('lineNo: ' + lineNo); // 異常行號
    console.log('columnNo: ' + columnNo); // 異常列號
    console.log('error: ' + error); // 異常堆棧信息
};

console.log(a);
複製代碼

如圖： git

window.onerror即提供了咱們錯誤的信息，還提供了錯誤行列號，能夠精準的進行定位，如此彷佛正是咱們想要的，可是接下來即是填坑過程。github

異常捕獲問題

1. Script error.

咱們合乎情理地在本地頁面進行嘗試捕獲異常，如：web

<!-- http://localhost:3031/ -->
<script> window.onerror = function() { console.log(arguments); }; </script>
<script src="http://cdn.xxx.com/index.js"></script>
複製代碼

這裏咱們把靜態資源放到異域上進行優化加載，可是捕獲的異常信息倒是：

通過分析發現，跨域以後window.onerror是沒法捕獲異常信息的，因此統一返回Script error.，解決方案即是script屬性配置 crossorigin="anonymous" 而且服務器添加Access-Control-Allow-Origin。

<script src="http://cdn.xxx.com/index.js" crossorigin="anonymous"></script>
複製代碼

通常的CDN網站都會將Access-Control-Allow-Origin配置爲*，意思是全部域均可以訪問。

2. sourceMap

解決跨域或者將腳本存放在同域以後，你可能會將代碼壓縮一下再發布，這時候便出現了壓縮後的代碼沒法找到原始報錯位置的問題。如圖，咱們用webpack將代碼打包壓縮成bundle.js：

// webpack.config.js
var path = require('path');

// webpack 4.1.1
module.exports = {
    mode: 'development',
    entry: './client/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'client')
    }
}
複製代碼

最後咱們頁面引入的腳本文件是這樣的：

!function(e){var o={};function n(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}}...;
複製代碼

因此咱們看到的異常信息是這樣的：

lineNo多是一個很是小的數字，通常是1，而columnNo會是一個很大的數字，這裏是730，由於全部代碼都壓縮到了一行。

那麼該如何解決呢？聰明的童鞋可能已經猜到啓用source-map了，沒錯，咱們利用webpack打包壓縮後生成一份對應腳本的map文件就能進行追蹤了，在webpack中開啓source-map功能：

module.exports = {
    ...
    devtool: '#source-map',
    ...
}
複製代碼

打包壓縮的文件末尾會帶上這樣的註釋：

!function(e){var o={};function n(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}}...;
//# sourceMappingURL=bundle.js.map
複製代碼

意思是該文件對應的map文件爲bundle.js.map。下面即是一個source-map文件的內容，是一個JSON對象：

version: 3, // Source map的版本
sources: ["webpack:///webpack/bootstrap", ...], // 轉換前的文件
names: ["installedModules", "__webpack_require__", ...], // 轉換前的全部變量名和屬性名
mappings: "aACA,IAAAA,KAGA,SAAAC...", // 記錄位置信息的字符串
file: "bundle.js", // 轉換後的文件名
sourcesContent: ["// The module cache var installedModules = {};..."], // 源代碼
sourceRoot: "" // 轉換前的文件所在的目錄
複製代碼

若是你想詳細瞭解關於sourceMap的知識，能夠前往：JavaScript Source Map 詳解

如此，既然咱們拿到了對應腳本的map文件，那麼咱們該如何進行解析獲取壓縮前文件的異常信息呢？這個我會在下面異常上報的時候進行介紹。

3. MVVM框架

如今愈來愈多的項目開始使用前端框架，在MVVM框架中若是你一如既往的想使用window.onerror來捕獲異常，那麼極可能會竹籃打水一場空，或許根本捕獲不到，由於你的異常信息被框架自身的異常機制捕獲了。好比Vue 2.x中咱們應該這樣捕獲全局異常：

Vue.config.errorHandler = function (err, vm, info) {
	let { 
	    message, // 異常信息
	    name, // 異常名稱
	    script,  // 異常腳本url
	    line,  // 異常行號
	    column,  // 異常列號
	    stack  // 異常堆棧信息
	} = err;
	
	// vm爲拋出異常的 Vue 實例
	// info爲 Vue 特定的錯誤信息，好比錯誤所在的生命週期鉤子
}
複製代碼

目前script、line、column這3個信息打印出來是undefined，不過這些信息在stack中均可以找到，能夠經過正則匹配去進行獲取，而後進行上報。

一樣的在react也提供了異常處理的方式，在 React 16.x 版本中引入了 Error Boundary：

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error, info) {
        this.setState({ hasError: true });
        
        // 將異常信息上報給服務器
        logErrorToMyService(error, info); 
    }

    render() {
        if (this.state.hasError) {
            return '出錯了';
        }
    
        return this.props.children;
    }
}
複製代碼

而後咱們就能夠這樣使用該組件：

<ErrorBoundary>
    <MyWidget />
</ErrorBoundary>
複製代碼

詳見官方文檔：Error Handling in React 16

異常上報

以上介紹了前端異常捕獲的相關知識點，那麼接下來咱們既然成功捕獲了異常，那麼該如何上報呢？

在腳本代碼沒有被壓縮的狀況下能夠直接捕獲後上傳對應的異常信息，這裏就不作介紹了，下面主要講解常見的處理壓縮文件上報的方法。

1. 提交異常

當捕獲到異常時，咱們能夠將異常信息傳遞給接口，以window.onerror爲例：

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {

    // 構建錯誤對象
    var errorObj = {
    	errorMessage: errorMessage || null,
    	scriptURI: scriptURI || null,
    	lineNo: lineNo || null,
    	columnNo: columnNo || null,
    	stack: error && error.stack ? error.stack : null
    };

    if (XMLHttpRequest) {
    	var xhr = new XMLHttpRequest();
    
    	xhr.open('post', '/middleware/errorMsg', true); // 上報給node中間層處理
    	xhr.setRequestHeader('Content-Type', 'application/json'); // 設置請求頭
    	xhr.send(JSON.stringify(errorObj)); // 發送參數
    }
}
複製代碼

2. sourceMap解析

其實source-map格式的文件是一種數據類型，既然是數據類型那麼確定有解析它的辦法，目前市面上也有專門解析它的相應工具包，在瀏覽器環境或者node環境下比較流行的是一款叫作'source-map'的插件。

經過require該插件，前端瀏覽器能夠對map文件進行解析，但由於前端解析速度較慢，因此這裏不作推薦，咱們仍是使用服務器解析。若是你的應用有node中間層，那麼你徹底能夠將異常信息提交到中間層，而後解析map文件後將數據傳遞給後臺服務器，中間層代碼以下：

const express = require('express');
const fs = require('fs');
const router = express.Router();
const fetch = require('node-fetch');
const sourceMap = require('source-map');
const path = require('path');
const resolve = file => path.resolve(__dirname, file);

// 定義post接口
router.post('/errorMsg/', function(req, res) {
    let error = req.body; // 獲取前端傳過來的報錯對象
    let url = error.scriptURI; // 壓縮文件路徑

    if (url) {
        let fileUrl = url.slice(url.indexOf('client/')) + '.map'; // map文件路徑

        // 解析sourceMap
        let smc = new sourceMap.SourceMapConsumer(fs.readFileSync(resolve('../' + fileUrl), 'utf8')); // 返回一個promise對象
        
        smc.then(function(result) {
        
            // 解析原始報錯數據
            let ret = result.originalPositionFor({
                line: error.lineNo, // 壓縮後的行號
                column: error.columnNo // 壓縮後的列號
            });
            
            let url = ''; // 上報地址
        
            // 將異常上報至後臺
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    errorMessage: error.errorMessage, // 報錯信息
                    source: ret.source, // 報錯文件路徑
                    line: ret.line, // 報錯文件行號
                    column: ret.column, // 報錯文件列號
                    stack: error.stack // 報錯堆棧
                })
            }).then(function(response) {
                return response.json();
            }).then(function(json) {
                res.json(json);         
            });
        })
    }
});

module.exports = router;
複製代碼

這裏咱們經過前端傳過來的異常文件路徑獲取服務器端map文件地址，而後將壓縮後的行列號傳遞給sourceMap返回的promise對象進行解析，經過originalPositionFor方法咱們能獲取到原始的報錯行列號和文件地址，最後經過ajax將須要的異常信息統一傳遞給後臺存儲，完成異常上報。下圖能夠看到控制檯打印出了通過解析後的真是報錯位置和文件：

附：source-map API

3. 注意點

以上是異常捕獲和上報的主要知識點和流程，還有一些須要注意的地方，好比你的應用訪問量很大，那麼一個小異常均可能會把你的服務器搞掛，因此上報的時候能夠進行信息過濾和採樣等，設置一個調控開關，服務器也能夠對類似的異常進行過濾，在一個時間段內不進行屢次存儲。另外window.onerror這樣的異常捕獲不能捕獲promise的異常錯誤信息，這點須要注意。

最終大體的流程圖以下：