腳本錯(cuò)誤量極致優(yōu)化-監(jiān)控上報(bào)與Script error

wayneli 發(fā)布于2019-08-23 10:42 / 1124人閱讀

摘要：如上報(bào)監(jiān)控項(xiàng)目是否正常運(yùn)轉(zhuǎn)測(cè)速上報(bào)反應(yīng)項(xiàng)目質(zhì)量腳本錯(cuò)誤監(jiān)控作為監(jiān)控中重要一環(huán)，當(dāng)頁(yè)面發(fā)生報(bào)錯(cuò)的時(shí)候，通過(guò)上報(bào)錯(cuò)誤信息，能及時(shí)發(fā)現(xiàn)存在問(wèn)題，修復(fù)優(yōu)化減少損失。監(jiān)控上報(bào)腳本錯(cuò)誤主要有兩類語(yǔ)法錯(cuò)誤運(yùn)行時(shí)錯(cuò)誤。

更多細(xì)節(jié)點(diǎn)擊

在前端開(kāi)發(fā)工作中，除了項(xiàng)目開(kāi)發(fā)保質(zhì)保量上線以外，項(xiàng)目的數(shù)據(jù)監(jiān)控也應(yīng)該配套起來(lái)，確保線上的正常運(yùn)轉(zhuǎn)。如上報(bào) pv監(jiān)控項(xiàng)目是否正常運(yùn)轉(zhuǎn)；測(cè)速上報(bào)反應(yīng)項(xiàng)目質(zhì)量；腳本錯(cuò)誤監(jiān)控作為監(jiān)控中重要一環(huán)，當(dāng)頁(yè)面發(fā)生報(bào)錯(cuò)的時(shí)候，通過(guò)上報(bào)錯(cuò)誤信息，能及時(shí)發(fā)現(xiàn)存在問(wèn)題，修復(fù)優(yōu)化、減少損失。

監(jiān)控上報(bào)

腳本錯(cuò)誤主要有兩類：語(yǔ)法錯(cuò)誤、運(yùn)行時(shí)錯(cuò)誤。監(jiān)控的方式主要有兩種：try-catch、window.onerror。

監(jiān)控方式 示例 · try-catch

try {
    test  // <- throw error
} catch(e){
    console.log("運(yùn)行時(shí)錯(cuò)誤信息 ↙");
    console.log(e);
}

通過(guò)給代碼塊進(jìn)行 try-catch 包裝，當(dāng)代碼塊出錯(cuò)時(shí) catch 將能捕獲到錯(cuò)誤信息，頁(yè)面也將繼續(xù)執(zhí)行。

當(dāng)發(fā)生語(yǔ)法錯(cuò)誤或異步錯(cuò)誤時(shí)，則無(wú)法正常捕捉。

示例 · try-catch (語(yǔ)法報(bào)錯(cuò))

try {
    function empty()   // <-  throw error 語(yǔ)法錯(cuò)誤
} catch(e){
    console.log("語(yǔ)法錯(cuò)誤信息 ↙");
    console.log(e);
}

無(wú)法捕捉錯(cuò)誤

語(yǔ)法錯(cuò)誤無(wú)法在 try-catch 中進(jìn)行捕抓、而異步報(bào)錯(cuò)則可以通過(guò)為異步函數(shù)塊再包裝一層 try-catch，增加標(biāo)識(shí)信息來(lái)配合定位，可以用工具來(lái)進(jìn)行處理，這里不展開(kāi)。

示例 · window.onerror

/**
 * @param {String}  msg    錯(cuò)誤信息
 * @param {String}  url    出錯(cuò)文件
 * @param {Number}  row    行號(hào)
 * @param {Number}  col    列號(hào)
 * @param {Object}  error  錯(cuò)誤詳細(xì)信息
 */
window.onerror = function (msg, url, row, col, error) {
    console.log("onerror 錯(cuò)誤信息 ↙");
    console.log({
        msg,  url,  row, col, error
    })
};

test // <-  throw error

window.onerror 能捕捉到當(dāng)前頁(yè)面的語(yǔ)法錯(cuò)誤或運(yùn)行時(shí)報(bào)錯(cuò)，是十分強(qiáng)大的。那么try-catch 是否不再需要呢？其實(shí)并不是。在使用過(guò)程中的體會(huì)：onerror 主要用來(lái)捕獲預(yù)料之外的錯(cuò)誤，而 try-catch 則可以用在預(yù)知情況下監(jiān)控特定錯(cuò)誤，兩種形式結(jié)合使用更加高效。

上報(bào)方式

監(jiān)控錯(cuò)誤拿到了報(bào)錯(cuò)信息，接下來(lái)則是將捕抓的錯(cuò)誤信息發(fā)送到信息收集平臺(tái)上，發(fā)送的形式主要有兩種：

通過(guò)Ajax發(fā)送數(shù)據(jù)

動(dòng)態(tài)創(chuàng)建 img 標(biāo)簽的形式

示例 · 動(dòng)態(tài)創(chuàng)建 img 標(biāo)簽進(jìn)行上報(bào)

function report(msg, level) {
    var reportUrl = "http://localhost:8055/report";
    new Image().src = reportUrl + "?msg=" + msg;
}

監(jiān)控上報(bào)整體流程

監(jiān)控報(bào)錯(cuò)，并將捕捉到的錯(cuò)誤信息上報(bào)給數(shù)據(jù)收集平臺(tái)，如下圖

錯(cuò)誤信息分析 · Script error

有了監(jiān)控了后，就可以在收集平臺(tái)上進(jìn)行查看腳本錯(cuò)誤量的日志統(tǒng)計(jì)。

發(fā)現(xiàn)占據(jù)榜首的錯(cuò)誤信息 “Script error.” 具有非常高的比例，沒(méi)有無(wú)具體的錯(cuò)誤信息，無(wú)法定位問(wèn)題，而這是怎么產(chǎn)生的呢？

產(chǎn)生 Script error 的原因

翻看在 webkit 的源碼可以看到 “Script error.” 是瀏覽器在同源策略限制下所產(chǎn)生的。瀏覽器出于安全上的考慮，當(dāng)頁(yè)面引用的非同域的外部腳本中拋出了異常，此時(shí)本頁(yè)面無(wú)權(quán)限獲得這個(gè)異常詳情，將輸出 Script error 的錯(cuò)誤信息。

優(yōu)化 Script error

Script error 來(lái)自同源策略的影響，那么解決的方案之一是進(jìn)行資源的同源化，另外也可以利用跨源資源共享機(jī)制( CORS )。

方案一：同源化

將js代碼內(nèi)聯(lián)到html文件中

將js文件與html文件放到同一域名下

以上兩種方式能夠簡(jiǎn)單直接地解決問(wèn)題，但也可能帶來(lái)其他影響，如內(nèi)聯(lián)資源不好利用文件緩存，同域無(wú)法充分利用cdn優(yōu)勢(shì)等等。

方案二：跨源資源共享機(jī)制( CORS )

跨源資源共享 ( CORS )機(jī)制讓W(xué)eb應(yīng)用服務(wù)器能支持跨站訪問(wèn)控制，從而能夠安全地跨站數(shù)據(jù)傳輸。主要是通過(guò)給請(qǐng)求帶上特定頭信息，服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信，從而能夠看到具體報(bào)錯(cuò)信息。

1. 為頁(yè)面上script標(biāo)簽添加crossorigin屬性。

增加 crossorigin 屬性后，瀏覽器將自動(dòng)在請(qǐng)求頭中添加一個(gè) Origin 字段，發(fā)起一個(gè) 跨來(lái)源資源共享請(qǐng)求。Origin 向服務(wù)端表明了請(qǐng)求來(lái)源，服務(wù)端將根據(jù)來(lái)源判斷是否正常響應(yīng)。

2. 響應(yīng)頭中增加 Access-Control-Allow-Origin 來(lái)支持跨域資源共享。

Access-Control-Allow-Origin: * 表示通過(guò)該跨域請(qǐng)求，且該資源可以被任意站點(diǎn)跨站訪問(wèn)。而當(dāng)該資源僅允許來(lái)自 http://127.0.0.1:8066 的跨站請(qǐng)求，其它站點(diǎn)都不能跨站訪問(wèn)時(shí)，將可以返回：

Access-Control-Allow-Origin:http://127.0.0.1:8066

指定域名的 Access-Control-Allow-Origin 的響應(yīng)頭中需帶上Vary:Origin。

Vary 字段的作用在于為緩存服務(wù)器提供緩存規(guī)則及緩存篩選的依據(jù)。當(dāng)增加 Vary:Origin 響應(yīng)頭后，緩存服務(wù)器將會(huì)按照 Origin 字段的內(nèi)容，緩存不同版本，在請(qǐng)求響應(yīng)時(shí)根據(jù)請(qǐng)求頭中的 Origin 決定是否能夠使用緩存響應(yīng)。

舉例 · 不加 Vary 將存在錯(cuò)誤命中緩存的問(wèn)題

上圖中，第一個(gè)請(qǐng)求（Origin: 127.0.0.1:8066）響應(yīng)被瀏覽器緩存了，當(dāng)?shù)诙€(gè)請(qǐng)求（Origin: 127.0.0.1:8888）發(fā)起，被錯(cuò)誤命中了前一個(gè)請(qǐng)求的緩存，收到了 Access-Control-Allow-Origin:http://127.0.0.1:8066 的響應(yīng)時(shí)，將導(dǎo)致資源加載失敗。所以當(dāng) Access-Control-Allow-Origin 不是返回為 * 時(shí)，需要加上 Vary 返回頭來(lái)避免引緩存導(dǎo)致的權(quán)限問(wèn)題。

跨域腳本報(bào)錯(cuò)產(chǎn)生 Script error. 通過(guò)以上方式進(jìn)行處理后將能夠捕獲到具體的報(bào)錯(cuò)信息了。在 NodeJS 的實(shí)現(xiàn)中主要通過(guò)添加以下代碼：

app.use(function *(next){
    // 拿到請(qǐng)求頭中的 Origin
    var requestOrigin = this.get("Origin"); 
    if (!requestOrigin) { // 不存在則忽略
      return yield next;
    }

    // 設(shè)置 Access-Control-Allow-Origin: Origin
    this.set("Access-Control-Allow-Origin", requestOrigin);

    // 設(shè)置 Vary: Origin
    this.vary("Origin");
    return yield next;
});

參考來(lái)源https://github.com/joeyguo/bl...

GPU云服務(wù)器云服務(wù)器監(jiān)控?cái)?shù)據(jù)上報(bào) 服務(wù)器上報(bào)404錯(cuò)誤監(jiān)控?cái)?shù)據(jù)怎么上報(bào) 腳本發(fā)生錯(cuò)誤

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96602.html

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

登陸后可評(píng)論

0條評(píng)論

wayneli

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

快速掌握正則表達(dá)式 | 02 掌握進(jìn)階的匹配操作

閱讀 2305·2021-11-18 10:02
程序員之職業(yè)生涯的第8個(gè)階段

閱讀 3372·2021-11-11 16:55
CloudCone：大硬盤vps補(bǔ)貨，$20/年，1核/1G/250GB HDD/5TB月流量(理論

閱讀 2781·2021-09-14 18:02
熬夜爆肝！C++核心STL容器知識(shí)點(diǎn)匯總整理【3W字干貨預(yù)警建議收藏】

閱讀 2772·2021-09-04 16:41
帶你深入理解自動(dòng)化測(cè)試框架Pytest的配置文件!

閱讀 2307·2021-09-04 16:40
常見(jiàn)的css布局

閱讀 1442·2019-08-30 15:56
Do not mutate vuex store state outside mutation ha

閱讀 2300·2019-08-30 15:54
Codepen 每日精選（2018-3-25）

閱讀 3242·2019-08-30 14:15

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

腳本錯(cuò)誤量極致優(yōu)化-監(jiān)控上報(bào)與Script error

相關(guān)文章

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

談?wù)勄岸水惓２东@與上報(bào)

**一步一步搭建前端監(jiān)控系統(tǒng)：如何將網(wǎng)頁(yè)截圖上報(bào)？**

**JS錯(cuò)誤監(jiān)控總結(jié)**

**前端異常監(jiān)控-看這篇就夠了**

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

0條評(píng)論

wayneli

男|高級(jí)講師

TA的文章

快速掌握正則表達(dá)式 | 02 掌握進(jìn)階的匹配操作

程序員之職業(yè)生涯的第8個(gè)階段

CloudCone：大硬盤vps補(bǔ)貨，$20/年，1核/1G/250GB HDD/5TB月流量(理論

熬夜爆肝！C++核心STL容器知識(shí)點(diǎn)匯總整理【3W字干貨預(yù)警建議收藏】

帶你深入理解自動(dòng)化測(cè)試框架Pytest的配置文件!

常見(jiàn)的css布局

Do not mutate vuex store state outside mutation ha

Codepen 每日精選（2018-3-25）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

腳本錯(cuò)誤量極致優(yōu)化-監(jiān)控上報(bào)與Script error

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！