国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端錯誤日志采集上報

AZmake / 3294人閱讀

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

js-log-report

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

GitHub:
js-log-report

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

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

日志上報哪些數(shù)據(jù)

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

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

具體上報字段可查看表結(jié)構(gòu)

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

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

window.onerror = function (msg, url, line, col, error) {
  ajax({
    url: "xxx/api/sendError", // 請求地址
    type: "POST", // 請求方式
    data: data, // 請求參數(shù)
    dataType: "json",
    success: function (response, xml) {
      // success
    },
    fail: function (status) {
      // error
    }
  })
}
如何使用 
使用如index.html所示,導(dǎo)入以下代碼在頁面head中，并且優(yōu)先于其他JS文件加載
數(shù)據(jù)上報表結(jié)構(gòu) 
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 "產(chǎn)品名稱",
  `error_time` char(20) DEFAULT NULL COMMENT "時間戳",
  `os` char(10) DEFAULT NULL COMMENT "系統(tǒng)類型",
  `extend` varchar(255) DEFAULT NULL COMMENT "業(yè)務(wù)擴(kuò)展字段、保存JSON字符串",
  `ua` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=55 DEFAULT CHARSET=utf8;
缺點

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

源代碼

js-log-report

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95606.html

相關(guān)文章

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

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

    Half 評論0 收藏0

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

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

    changfeng1050 評論0 收藏0

  • 前端性能與異常上報

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

    gggggggbong 評論0 收藏0

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

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

    zoomdong 評論0 收藏0

發(fā)表評論

0條評論

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