頁面錯誤

前端錯誤分為JS運行時錯誤，接口錯誤，資源加載錯誤三種。

運行時錯誤捕獲

• 使用try/catch捕捉JS運行時錯誤。
• 使用window.onerror捕獲JS運行時錯誤。
• 使用window.addEventListener(‘unhandledrejection‘)捕獲未處理的promise reject錯誤。
  

• 重寫console.error捕獲console.error錯誤。

  var consoleError = window.console.error; 
  window.console.error = function () { 
  alert(JSON.stringify(arguments));
   
   // 自定義處理
  consoleError && consoleError.apply(window, arguments); 
  };

• 在跨域腳本上配置crossorigin="anonymous"捕獲跨域腳本錯誤。
  CDN的HTTP Response頭需增加Access-Control-Allow-Origin: *屬性和Vary:Origin屬性。
  引入JS文件的時候需在script標簽上添加crossorigin屬性。

接口錯誤捕獲

重寫window.XMLHttpRequest和window.fetch捕獲請求錯誤。
XMLHttpRequest封裝：

if(!window.XMLHttpRequest) return;
var xmlhttp = window.XMLHttpRequest;
var _oldSend = xmlhttp.prototype.send;
var _handleEvent = function (event) {
    if (event && event.currentTarget && event.currentTarget.status !== 200) {
          // 自定義錯誤上報 }
}
xmlhttp.prototype.send = function () {
 

    if (this['addEventListener']) {
        this['addEventListener']('error', _handleEvent);
        this['addEventListener']('load', _handleEvent);
        this['addEventListener']('abort', _handleEvent);
    } else {
        var _oldStateChange = this['onreadystatechange'];
        this['onreadystatechange'] = function (event) {
            if (this.readyState === 4) {
                _handleEvent(event);
            }
            _oldStateChange && _oldStateChange.apply(this, arguments);
        };
    }
    return _oldSend.apply(this, arguments);
}

fetch封裝：

if(!window.fetch) return;
    let _oldFetch = window.fetch;
    window.fetch = function () {
        return _oldFetch.apply(this, arguments)
        .then(res => {
            if (!res.ok) { // True if status is HTTP 2xx
                // 上報錯誤
            }
            return res;
        })
        .catch(error => {
            // 上報錯誤
            throw error;  
        })
}

資源加載錯誤捕獲

資源加載錯誤有可能是地址錯誤，網絡不穩定，網絡有代理。
使用window.addEventListener(‘error‘)捕獲。window.onerror捕獲不到資源加載錯誤。

window.onerror和window.addEventListener('error')的異同。
相同點：
都可以捕獲到window上的js運行時錯誤。  
不同點：
1.捕獲到的錯誤參數不同。   
2.window.addEventListener('error')可以捕獲資源加載錯誤，但是window.onerror不能捕獲到資源加載錯誤。  

上報方式

• 動態創建img標簽

   var win = window;
    var n = 'jsFeImage_' + _make_rnd(),
  img = win[n] = new Image();
    img.onload = img.onerror = function () {
  win[n] = null;
    };
    img.src = src;

• 通過Ajax發送數據

壓縮代碼定位困難

基於 SourceMap 快速定位腳本報錯方案

通過uglifyJs模擬webpack壓縮的配置將JS文件進行壓縮，得到source-map。
然後使用(sourceMap工具)[https://github.com/mozilla/source-map/]的SourceMapConsumer接口將轉換後的行號列號傳入Consumer得到原始錯誤位置信息。

var fs = require('fs')
var sourceMap = require('source-map')

// map文件
var rawSourceMapJsonData = fs.readFileSync('./dist/index.min.js.map', 'utf-8')
rawSourceMapJsonData = JSON.parse(rawSourceMapJsonData)

var consumer = new sourceMap.SourceMapConsumer(rawSourceMapJsonData);

// 打印出真實錯誤位置
console.log(consumer.originalPositionFor({line: 1, column: 220}))

參考：
https://segmentfault.com/a/1190000014672384#articleHeader2
https://segmentfault.com/a/1190000011041164

頁面錯誤監控知識點