前端錯誤日誌採集上報

時間 2019-11-10

原文原文鏈接

js-log-report

前端錯誤日誌採集上報、上報給後端分析錯誤日、主要用於移動端各手機類型錯誤日誌的收集分析javascript

業務背景

在開發 Vue移動端項目，運營同窗反饋了一個客戶手機上頁面白屏的問題、此時說第一句話是，在個人手機上是正產的啊，但是問題就是存在，生產環境啊，須要怎麼處理呢? 'vconsole'也只能在外測上使用、在生產上找問題，並且不知道是在什麼手機上纔會有這個問題、如何重現 bug 是面臨的第一個問題。

爲什麼要作錯誤日誌追蹤上報

前端JS代碼錯誤，瀏覽器都都會在控制檯輸出錯誤信息，以及出錯的文件，行號，堆棧信息，這些錯誤很容易致使頁面代碼不執行，而且考慮到手機類型五花八門，瀏覽器內核以及版本的差別性，前端代碼機型兼容性問題，並不能將全部的手機都拿來適配，前端錯誤日誌上報是一個較好的解決方案前端

日誌上報哪些數據

1.經過 wiindow.onerror 能夠獲取 msg, url, line, col, error等錯誤信息,JS 的錯誤行號、url錯誤地址，
2.經過 window.navigator.userAgent 獲取設備瀏覽器的信息集合
如：java

User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

os_version 系統版本號
browser 瀏覽器類型 Opera FF Chrome Safari IE

var defaults = {
    ua: window.navigator.userAgent,
    browser: '',
    os: '',
    osVersion: '',
    errUrl: window.location.href,
    msg: '', // 錯誤的具體信息
    url: '', // 錯誤所在的url
    line: '', // 錯誤所在的行
    col: '', // 錯誤所在的列
    error: '' // 具體的error對象
  }

具體上報字段可查看錶結構mysql

如何實現錯誤上報

1.實現錯誤日誌收集收集onerror 錯誤參數，以及自定義的參數
2.核心window.onerror，重寫該方法、在此中捕獲異常錯誤信息、而且將錯誤信息發送至服務器接口
大體代碼以下git

window.onerror = function (msg, url, line, col, error) {
  ajax({
    url: 'xxx/api/sendError', // 請求地址
    type: 'POST', // 請求方式
    data: data, // 請求參數
    dataType: 'json',
    success: function (response, xml) {
      // success
    },
    fail: function (status) {
      // error
    }
  })
}

如何使用

使用如 index.html所示,導入如下代碼在頁面head中，而且優先於其餘JS文件加載

<script type="text/javascript" src="./error.js"></script>
    <script type="text/javascript">
      var data = {
      productname: 'test' //產品名稱
      extend:'' //擴展字段,容許是JSON 字符串的形式保存
      }
      errLogReport({
      data: data,
      url: 'http://localhost:8080/api/sendError'
      })
    </script>

數據上報表結構

DROP TABLE IF EXISTS `j_log`;
CREATE TABLE `j_log` (
  `id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'id號',
  `os_version` char(10) DEFAULT NULL COMMENT '系統版本號',
  `msg` varchar(255) DEFAULT NULL COMMENT '錯誤信息',
  `error_url` varchar(255) DEFAULT NULL COMMENT '錯誤所在的url',
  `line` int(10) DEFAULT NULL COMMENT '錯誤所在的行',
  `col` int(10) DEFAULT NULL COMMENT '錯誤所在的列',
  `error` varchar(255) DEFAULT NULL COMMENT '具體的error對象',
  `url` varchar(255) DEFAULT NULL,
  `browser` varchar(255) DEFAULT NULL COMMENT '瀏覽器類型',
  `product_name` char(255) CHARACTER SET utf8 DEFAULT '' COMMENT '產品名稱',
  `error_time` char(20) DEFAULT NULL COMMENT '時間戳',
  `os` char(10) DEFAULT NULL COMMENT '系統類型',
  `extend` varchar(255) DEFAULT NULL COMMENT '業務擴展字段、保存JSON字符串',
  `ua` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=55 DEFAULT CHARSET=utf8;