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

資訊專欄INFORMATION COLUMN

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

AZmake / 3298人閱讀

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

js-log-report

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

GitHub:
js-log-report

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

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

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

1.通過 wiindow.onerror 可以獲取 msg, url, line, col, error等錯(cuò)誤信息,JS 的錯(cuò)誤行號、url錯(cuò)誤地址，
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: "", // 錯(cuò)誤的具體信息
    url: "", // 錯(cuò)誤所在的url
    line: "", // 錯(cuò)誤所在的行
    col: "", // 錯(cuò)誤所在的列
    error: "" // 具體的error對象
  }

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

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

1.實(shí)現(xiàn)錯(cuò)誤日志收集 收集onerror 錯(cuò)誤參數(shù)，以及自定義的參數(shù)
2.核心window.onerror，重寫該方法、在此中捕獲異常錯(cuò)誤信息、并且將錯(cuò)誤信息發(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ù)上報(bào)表結(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 "錯(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對象",
  `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 "時(shí)間戳",
  `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;
缺點(diǎn)

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

源代碼

js-log-report

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

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

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

相關(guān)文章

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

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

    Half 評論0 收藏0

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

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

    changfeng1050 評論0 收藏0

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

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

    gggggggbong 評論0 收藏0

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

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

    zoomdong 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<