成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 異常的防范與監(jiān)控

waltr / 2478人閱讀

摘要：一套完善的前端體系應(yīng)少不了異常統(tǒng)計(jì)與監(jiān)控，即使有足夠的質(zhì)量保證體系，難免會(huì)出現(xiàn)一些意料之外的事，尤其是在復(fù)雜的網(wǎng)路環(huán)境和運(yùn)行環(huán)境之下。為了保證代碼的健壯性以及頁(yè)面的穩(wěn)定性，我們從多個(gè)方面來(lái)做異常的防范和監(jiān)控。

一套完善的前端體系應(yīng)少不了異常統(tǒng)計(jì)與監(jiān)控，即使有足夠的質(zhì)量保證體系，難免會(huì)出現(xiàn)一些意料之外的事，尤其是在復(fù)雜的網(wǎng)路環(huán)境和運(yùn)行環(huán)境之下。為了保證代碼的健壯性以及頁(yè)面的穩(wěn)定性，我們從多個(gè)方面來(lái)做異常的防范和監(jiān)控。

三種思路 主動(dòng)防御

對(duì)于我們操作的數(shù)據(jù)，尤其是由 API 接口返回的，時(shí)常會(huì)有一個(gè)很復(fù)雜的深層嵌套的數(shù)據(jù)結(jié)構(gòu)。為了代碼的健壯性，很多時(shí)候需要對(duì)每一層訪問(wèn)都作空值判斷，就像這樣：

props.user &&
props.user.posts &&
props.user.posts[0] &&
props.user.posts[0].comments &&
props.user.posts[0].comments[0]

類似的代碼大家可能都寫(xiě)過(guò)，沒(méi)寫(xiě)過(guò)大概也見(jiàn)到別人寫(xiě)過(guò)?？雌饋?lái)確實(shí)相當(dāng)?shù)夭幻烙^，有句話說(shuō)得很棒：

The opposite of beautiful is not ugly, but wrong.

我們得找到一種，更簡(jiǎn)單、更優(yōu)雅、更安全的方式來(lái)處理這種情形。參考這篇文章：Safely Accessing Deeply Nested Values In JavaScript，文章提到借助 Ramda、Lenses、Lodash 以及 Immutable.js 等類庫(kù)的方式，并提供一個(gè)非常簡(jiǎn)潔明了的原生解決方案：

function getIn(p, o) {
    return p.reduce(function(xs, x) {
        return (xs && xs[x]) ? xs[x] : null;
    }, o);
}

接下來(lái)我們這樣訪問(wèn)就可以了：

getIn(["user", "posts", 0, "comments"], props)

如果正常訪問(wèn)到，則返回對(duì)應(yīng)的值，否則返回 null。

這里提供的只是主動(dòng)防御的一種情形，關(guān)于如何編寫(xiě)更安全的代碼這里不作深入展開(kāi)。

全局監(jiān)控

瀏覽器提供 window.onerror API 來(lái)幫助我們進(jìn)行全局的錯(cuò)誤監(jiān)控：

當(dāng) JavaScript 運(yùn)行時(shí)錯(cuò)誤（包括語(yǔ)法錯(cuò)誤）發(fā)生時(shí)，會(huì)執(zhí)行 window.onerror()`

當(dāng)一項(xiàng)資源（如 或

在 require.js 里提供一個(gè) onNodeCreated hook，供我們提供擴(kuò)展，要添加 crossorigin 屬性，如下所示：

在 2.2.0 版本以上可用（很遺憾的是，目前的集成解決方案版本剛好低于這個(gè)版本）。

2.同時(shí)在 CDN 服務(wù)器增加響應(yīng)頭 access-control-allow-orgin，配置允許訪問(wèn) CORS 的域，否則瀏覽器直接將禁止加載。

try..catch

這一點(diǎn)上面也有提到，算是一種比較通用，可定制強(qiáng)的方案。當(dāng)然，在性能上也會(huì)有一些損耗。

綜合考慮，try..catch 通用性更好，但由于其在性能方面的一些損耗，CORS 優(yōu)于 try..catch

一個(gè)監(jiān)控小工具

隨后，介紹一個(gè) JavaScript stack trace 的小工具：https://github.com/CurtisCBS/... ，工具由 Curtis 和 mirreal 共同完成。

主要是用于捕獲頁(yè)面 JavaScript 異常報(bào)錯(cuò)，捕獲異常類型包含:

JavaScript runtime 異常捕捉 √

靜態(tài)資源 load faided 異常捕捉 √

console.error 的異常捕獲 √

try..catch 錯(cuò)誤捕獲 √

使用方式也很簡(jiǎn)單，但使用 script mode 引入文件后，調(diào)用 init 函數(shù)，進(jìn)行初始化配置和監(jiān)聽(tīng)

如果是使用 module mode，如下：

// npm install jstracker --save
import jstracker from "jstracker"

jstracker.init({
  concat: false,
  report: function(errorLogs) {
    // console.log("send")
  }
})

如果要使用 try..catch 捕獲，jstracker 暴露出一個(gè) tryJS 對(duì)象，可以處理 try..catch 包裝，就像這樣：

import jstracker from "jstracker";

this.handleSelect = jstracker.tryJS.wrap(this.handleSelect);

所有錯(cuò)誤信息統(tǒng)一由 report 函數(shù)處理，可以在此之上做數(shù)據(jù)處理：

// ubt.js
import jstracker from "jstracker";
import utility from "utility";

jstracker.init({
    concat: false,
    report: function(errorLogs) {
        const errorLog = errorLogs[0];
        errorLog.ua = window.navigator.userAgent;
        ubtTracker.send(errorLog);
    }
});

const ubtTracker = {
    key: {
        UBT_JS_TRACKER: "xxxx-xxxx-xxxx"
    },

    send(data) {
        const value = utility.deserializeUrl(data);
        
        xxxx.send(["trace", this.key.UBT_JS_TRACKER, value]);
    }
};

function wrapContext(ctx) {
    for (const func in ctx) {
        ctx[func] = jstracker.tryJS.wrap(ctx[func]);
    }
}

export {
    wrapContext,
    ubtTracker,
    jstracker
};
概述

作為開(kāi)發(fā)者以及項(xiàng)目維護(hù)者的身份，我們應(yīng)當(dāng)編寫(xiě)更安全健壯的代碼。但由于環(huán)境的多樣性，無(wú)論再完善的測(cè)試，code review 都難免都所疏漏，我們需要一套監(jiān)控系統(tǒng)來(lái)完善整個(gè)前端體系。

在監(jiān)控的時(shí)候，出于同源安全策略無(wú)法拿到準(zhǔn)確的錯(cuò)誤信息，在此，有兩種解決方案：

增加 CORS 支持

使用 try..catch 進(jìn)行異常捕獲

最后，我們對(duì)整個(gè)監(jiān)控工作封裝了一個(gè)基礎(chǔ)的核心，可以監(jiān)控 JavaScript Runtime 異常，資源加載異常，以及 try..catch 捕獲異常等，并給出一個(gè)實(shí)際工作中的示例。

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

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

相關(guān)文章

  • 2017-06-22 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選新的長(zhǎng)度單位你知道么高階函數(shù)一點(diǎn)通的故事隔行掃描算法專題之?dāng)?shù)組去重全家桶每個(gè)人都能做的網(wǎng)易云音樂(lè)騰訊前端團(tuán)隊(duì)社區(qū)中文前端推薦第天聽(tīng)說(shuō)你缺少一個(gè)順手的圖床知乎專欄譯怎樣創(chuàng)建定制表單組件碎語(yǔ)掘金函數(shù)式編程到底是個(gè)啥 2017-06-22 前端日?qǐng)?bào) 精選 CSS 新的長(zhǎng)度單位 fr 你知道么？高階函數(shù)一點(diǎn)通png的故事：隔行掃描算法JavaScript專題之?dāng)?shù)組去重 · Issu...

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

  • 一步一步搭建前端監(jiān)控系統(tǒng)：JS錯(cuò)誤監(jiān)控篇

    摘要：摘要徒手寫(xiě)錯(cuò)誤監(jiān)控。為什么用定時(shí)器呢，因?yàn)樵趩雾?yè)應(yīng)用中，路由的切換和地址欄的變化是無(wú)法被監(jiān)控的，我確實(shí)沒(méi)有想到特別好的辦法來(lái)監(jiān)控，所以用了這種方式，如果有人有更好的辦法，請(qǐng)給我留言，謝謝。 摘要： 徒手寫(xiě)JS錯(cuò)誤監(jiān)控。 作者：一步一個(gè)腳印一個(gè)坑 原文：搭建前端監(jiān)控系統(tǒng)（二）JS錯(cuò)誤監(jiān)控篇 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 背景：市面上的監(jiān)控系統(tǒng)有很多，大多收費(fèi)，對(duì)于...

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

  • XSS攻擊之竊取Cookie

    摘要：年月，遭到了攻擊，這個(gè)事件足以警示我們。自從年雙十一正式上線，累計(jì)處理了億錯(cuò)誤事件，付費(fèi)客戶有金山軟件百姓網(wǎng)等眾多品牌企業(yè)。 譯者按: 10 年前的博客似乎有點(diǎn)老了，但是XSS 攻擊的威脅依然還在，我們不得不防。 原文: XSS - Stealing Cookies 101 譯者: Fundebug 本文采用意譯，版權(quán)歸原作者所有 竊取Cookie是非常簡(jiǎn)單的，因此不要輕易相信...

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

  • Node.js面試題之2017

    摘要：譯者按從標(biāo)準(zhǔn)，語(yǔ)法以及模塊角度來(lái)看，的發(fā)展讓人目不暇接，那么面試題也得與時(shí)俱進(jìn)。因此，手動(dòng)檢查所有依賴是不現(xiàn)實(shí)的。為，加之后返回。自從年雙十一正式上線，累計(jì)處理了億錯(cuò)誤事件，得到了金山軟件百姓網(wǎng)等眾多知名用戶的認(rèn)可。 譯者按: 從ECMAScript標(biāo)準(zhǔn)，Node.js語(yǔ)法以及NPM模塊角度來(lái)看，Node.js的發(fā)展讓人目不暇接，那么面試題也得與時(shí)俱進(jìn)。 原文: Node.js In...

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

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

0條評(píng)論

閱讀需要支付1元查看
<