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

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

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

更多細節(jié)點擊

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

監(jiān)控上報

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

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

try {
    test  // <- throw error
} catch(e){
    console.log("運行時錯誤信息 ↙");
    console.log(e);
}

通過給代碼塊進行 try-catch 包裝，當代碼塊出錯時 catch 將能捕獲到錯誤信息，頁面也將繼續(xù)執(zhí)行。

當發(fā)生語法錯誤或異步錯誤時，則無法正常捕捉。

示例 · try-catch (語法報錯)

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

無法捕捉錯誤

語法錯誤無法在 try-catch 中進行捕抓、而異步報錯則可以通過為異步函數(shù)塊再包裝一層 try-catch，增加標識信息來配合定位，可以用工具來進行處理，這里不展開。

示例 · window.onerror

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

test // <-  throw error

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

上報方式

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

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

動態(tài)創(chuàng)建 img 標簽的形式

示例 · 動態(tài)創(chuàng)建 img 標簽進行上報

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

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

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

錯誤信息分析 · Script error

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

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

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

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

優(yōu)化 Script error

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

方案一：同源化

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

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

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

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

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

1. 為頁面上script標簽添加crossorigin屬性。

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

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

Access-Control-Allow-Origin: * 表示通過該跨域請求，且該資源可以被任意站點跨站訪問。而當該資源僅允許來自 http://127.0.0.1:8066 的跨站請求，其它站點都不能跨站訪問時，將可以返回：

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

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

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

舉例 · 不加 Vary 將存在錯誤命中緩存的問題

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

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

app.use(function *(next){
    // 拿到請求頭中的 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;
});

參考來源https://github.com/joeyguo/bl...