客戶說網頁打開白屏了，怎麼辦？（前端異常日誌收集）

前言

前段時間作項目的時候，發佈功能的時候，本地是好的，測試是好的，正式也是好的，可是客戶打開正式的時候白屏了，把軟件刪除了，從新打開了又好了，可是不能老是讓用戶去刪除軟件又從新下。因此弄了一個簡單的前段監控。

window提供了一個監聽頁面錯誤的方法，具體代碼以下

window.onerror = (errorMessage, scriptURI, lineNo, columnNo, error) => {
sendError({ errorMessage, scriptURI, lineNo, columnNo, error,hash:location.href}); //發送ajax
};

參數

• errorMessage 異常信息
• scriptURI 異常文件路徑
• lineNo 異常行號
• columnNo 異常列號
• error 異常堆棧信息
• hash 當前頁面連接

還能夠根據需求添加更多信息，好比當前時間，瀏覽器版本，電腦類型（window or mac） 瀏覽器類型（谷歌 ie 之類），還能夠記錄是pc或者移動端，移動端又能夠增長手機類型，手機網絡，來排查問題是出自哪裏。

優化(性能考慮)

前端報錯有可能會一直報錯，而後一直在發送請求給後端，而後就會浪費大量帶寬，因此咱們能夠先放在本地，而後頁面註銷的時候把以前收集的消息所有一次性發送給後端,具體代碼以下:

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); // 異常堆棧信息
  let errorInfo = {
    errorMessage,
    scriptURI,
    lineNo,
    columnNo,
    error,
    time: new Date(),
  };
  if (localStorage.getItem('errorLog')) {   //檢查本地是否有錯誤日誌
    let errorLog = JSON.parse(localStorage.getItem('errorLog')); 
    errorLog.push(errorInfo);
  } else {
    localStorage.setItem('errorLog', JSON.stringify([errorInfo])); 
  }
};

window.addEventListener(  //在頁面註銷時候檢查是否有錯誤日誌，若是有上傳
  'unload',
  () => {
    if (localStorage.getItem('errorLog')) { //
      localStorage.removeItem('errorLog')
      //ajax 上傳
    }
  },
  false
);

後言

這樣一個監控頁面錯誤日誌的功能就起來了,代碼地址