亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端錯誤日志采集上報

AZmake / 3386人閱讀

摘要：前端錯誤日志采集上報上報給后端分析錯誤日主要用于移動端各手機類型錯誤日志的收集分析業(yè)務背景在開發(fā)移動端項目，運營同學反饋了一個客戶手機上頁面白屏的問題此時說第一句話是，在我的手機上是正產的啊，可是問題就是存在，生產環(huán)境啊，需要怎么處

js-log-report

前端錯誤日志采集上報、上報給后端分析錯誤日、主要用于移動端各手機類型錯誤日志的收集分析

GitHub:
js-log-report

業(yè)務背景 
在開發(fā)Vue移動端項目，運營同學反饋了一個客戶手機上頁面白屏的問題、此時說第一句話是，在我的手機上是正產的啊，可是問題就是存在，生產環(huán)境啊，需要怎么處理呢? "vconsole"也只能在外測上使用、在生產上找問題，而且不知道是在什么手機上才會有這個問題、如何重現(xiàn)bug 是面臨的第一個問題。
為何要做錯誤日志追蹤上報

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

日志上報哪些數據

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

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 系統(tǒng)版本號

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對象
  }

具體上報字段可查看表結構

如何實現(xiàn)錯誤上報

1.實現(xiàn)錯誤日志收集 收集onerror 錯誤參數，以及自定義的參數
2.核心window.onerror，重寫該方法、在此中捕獲異常錯誤信息、并且將錯誤信息發(fā)送至服務器接口
大致代碼如下

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中，并且優(yōu)先于其他JS文件加載
數據上報表結構 
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 "系統(tǒng)版本號",
  `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 "系統(tǒng)類型",
  `extend` varchar(255) DEFAULT NULL COMMENT "業(yè)務擴展字段、保存JSON字符串",
  `ua` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=55 DEFAULT CHARSET=utf8;
缺點

對于壓縮的代碼，報錯信息沒法定位到具體是什么地方報錯了，這里沒有去詳細研究，阮一峰老師有篇相關文章
JavaScript Source Map 詳解，有時間再去研究一下

源代碼

js-log-report

原文地址：
https://code.it919.cn/2018/06...

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/95606.html

相關文章

  • 讓前端監(jiān)控數據采集更高效

    摘要：如何在新的技術背景下讓前端數據采集工作更加完善高效，是本文討論的重點。具體來說，我們對前端的數據采集具體主要分為路由切換性能資源錯誤日志上報路由切換等前端技術的快速發(fā)展使單頁面應用盛行。 隨著業(yè)務的快速發(fā)展，我們對生產環(huán)境下的問題感知能力越來越關注。作為距離用戶最近的一層，前端的表現(xiàn)是否可靠、穩(wěn)定、好用，很大程度上決定著用戶對整個產品的體驗和感受。因此，對于前端的監(jiān)控不容忽視。 搭建一...

    Half 評論0 收藏0

  • 前端代碼的錯誤日志收集了解一下

    摘要：前言開發(fā)應用程序過程中的一種常見的做法就是集中保存錯誤日志以便查找重要錯誤的原因就像數據庫和服務器都會定期寫入日志一樣在復雜的應用程序中我們同樣推薦你把錯誤也回寫到服務器換句話再說我們也可以將這些錯誤寫入到保存服務器端錯誤的地方只不過標明他 前言 開發(fā)web應用程序過程中的一種常見的做法,就是集中保存錯誤日志,以便查找重要錯誤的原因. 就像數據庫和服務器都會定期寫入日志一樣,在復雜的...

    changfeng1050 評論0 收藏0

  • 前端性能與異常上報

    摘要：回過頭來發(fā)現(xiàn)，我們的項目，雖然在服務端層面做好了日志和性能統(tǒng)計，但在前端對異常的監(jiān)控和性能的統(tǒng)計。對于前端的性能與異常上報的可行性探索是有必要的。這是我們頁面加載性能優(yōu)化需求中主要上報的相關信息。 概述 對于后臺開發(fā)來說，記錄日志是一種非常常見的開發(fā)習慣，通常我們會使用try...catch代碼塊來主動捕獲錯誤、對于每次接口調用，也會記錄下每次接口調用的時間消耗，以便我們監(jiān)控服務器接口...

    gggggggbong 評論0 收藏0

  • 如何優(yōu)雅處理前端的異常？

    摘要：二需要處理哪些異常對于前端來說，我們可做的異常捕獲還真不少?？偨Y一下，大概如下語法錯誤代碼異常請求異常靜態(tài)資源加載異常異常異?？缬虮罎⒑涂D下面我會針對每種具體情況來說明如何處理這些異常。 前端一直是距離用戶最近的一層，隨著產品的日益完善，我們會更加注重用戶體驗，而前端異常卻如鯁在喉，甚是煩人。一、為什么要處理異常？異常是不可控的，會影響最終的呈現(xiàn)結果，但是我們有充分的理由去做這樣的事...

    zoomdong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<