成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

前端錯(cuò)誤日志采集上報(bào)

AZmake / 3389人閱讀

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

js-log-report

前端錯(cuò)誤日志采集上報(bào)、上報(bào)給后端分析錯(cuò)誤日、主要用于移動(dòng)端各手機(jī)類(lèi)型錯(cuò)誤日志的收集分析

GitHub:
js-log-report

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

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

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

1.通過(guò) wiindow.onerror 可以獲取 msg, url, line, col, error等錯(cuò)誤信息,JS 的錯(cuò)誤行號(hào)、url錯(cuò)誤地址，
2.通過(guò) 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)版本號(hào)

browser 瀏覽器類(lèi)型 Opera FF Chrome Safari IE 

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

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

如何實(shí)現(xiàn)錯(cuò)誤上報(bào)

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

window.onerror = function (msg, url, line, col, error) {
  ajax({
    url: "xxx/api/sendError", // 請(qǐng)求地址
    type: "POST", // 請(qǐng)求方式
    data: data, // 請(qǐng)求參數(shù)
    dataType: "json",
    success: function (response, xml) {
      // success
    },
    fail: function (status) {
      // error
    }
  })
}
如何使用 
使用如index.html所示,導(dǎo)入以下代碼在頁(yè)面head中，并且優(yōu)先于其他JS文件加載
數(shù)據(jù)上報(bào)表結(jié)構(gòu) 
DROP TABLE IF EXISTS `j_log`;
CREATE TABLE `j_log` (
  `id` int(10) NOT NULL AUTO_INCREMENT COMMENT "id號(hào)",
  `os_version` char(10) DEFAULT NULL COMMENT "系統(tǒng)版本號(hào)",
  `msg` varchar(255) DEFAULT NULL COMMENT "錯(cuò)誤信息",
  `error_url` varchar(255) DEFAULT NULL COMMENT "錯(cuò)誤所在的url",
  `line` int(10) DEFAULT NULL COMMENT "錯(cuò)誤所在的行",
  `col` int(10) DEFAULT NULL COMMENT "錯(cuò)誤所在的列",
  `error` varchar(255) DEFAULT NULL COMMENT "具體的error對(duì)象",
  `url` varchar(255) DEFAULT NULL,
  `browser` varchar(255) DEFAULT NULL COMMENT "瀏覽器類(lèi)型",
  `product_name` char(255) CHARACTER SET utf8 DEFAULT "" COMMENT "產(chǎn)品名稱(chēng)",
  `error_time` char(20) DEFAULT NULL COMMENT "時(shí)間戳",
  `os` char(10) DEFAULT NULL COMMENT "系統(tǒng)類(lèi)型",
  `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;
缺點(diǎn)

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

源代碼

js-log-report

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95606.html

相關(guān)文章

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

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

    Half 評(píng)論0 收藏0

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

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

    changfeng1050 評(píng)論0 收藏0

  • 前端性能與異常上報(bào)

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

    gggggggbong 評(píng)論0 收藏0

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

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

    zoomdong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<