<ul id="gooiw"></ul>

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

testbird 發布于2019-08-22 18:01 / 2918人閱讀

摘要：前言前段時間做項目的時候，發布功能的時候，本地是好的，測試是好的，正式也是好的，但是客戶打開正式的時候白屏了，把軟件刪除了，重新打開了又好了，但是不能總是讓用戶去刪除軟件又重新下。所以弄了一個簡單的前段監控。

前言

前段時間做項目的時候，發布功能的時候，本地是好的，測試是好的，正式也是好的，但是客戶打開正式的時候白屏了，把軟件刪除了，重新打開了又好了，但是不能總是讓用戶去刪除軟件又重新下。所以弄了一個簡單的前段監控。

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
);

后言

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

云服務器 GPU云服務器日志收集、云服務器網頁打不開怎么辦集群日志收集 elk日志收集

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95407.html

Node.js + ELK 日志規范

摘要：日志規范一般前端開發同學，對日志其實不太敏感，畢竟前端大多數情況下，不太關心日志。本文主要梳理了目前我們團隊在開發中日志方面存在的問題，以及通過統一日志規范，希望達到什么樣的效果。日志格式字段日志格式統一采用，便于解析處理。nodejs 日志規范一般前端開發同學，對日志其實不太敏感，畢竟前端大多數情況下，不太關心日志。即使有，也可能調用一些第三方的統計，比如百度統計或者別的等。在 Node...

tuomao 2019-05-23 13:53 評論0 收藏0
朱曄的互聯網架構實踐心得S1E4：簡單好用的監控六兄弟

摘要：還可以初步判斷出問題的原因是異常導致還是突增的壓力所致。通過面板配置的服務調用量和業務進出量，排除上下游問題，定位出問題的模塊。這里所說的六兄弟只指ELK套件（ElasticSearch+Logstash+Kibana）以及TIG套件（Telegraf+InfluxDb+Grafana）。 showImg(https://segmentfault.com/img/bVbhS81?w=...

xiaoxiaozi 2019-06-24 18:10 評論0 收藏0
前端異常監控-看這篇就夠了

摘要：前端異常監控如果是移除的流程，那么編程就一定是將放進去的流程。過濾掉運行時錯誤上報加載錯誤事件捕獲異常最新的規范中定義了事件用于全局捕獲對象沒有處理器時異常情況。前端異常監控如果debug是移除bug的流程，那么編程就一定是將bug放進去的流程。如果沒有用戶反饋問題，那就代表我們的產品棒棒噠，對不對？主要內容 Web規范中相關前端異常異常按照捕獲方式分類異常的捕獲方式日志...

Aklman 2019-08-23 12:59 評論0 收藏0