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

資訊專欄INFORMATION COLUMN

JavaScript 異常的防范與監控

waltr / 2480人閱讀

摘要：一套完善的前端體系應少不了異常統計與監控，即使有足夠的質量保證體系，難免會出現一些意料之外的事，尤其是在復雜的網路環境和運行環境之下。為了保證代碼的健壯性以及頁面的穩定性，我們從多個方面來做異常的防范和監控。

一套完善的前端體系應少不了異常統計與監控，即使有足夠的質量保證體系，難免會出現一些意料之外的事，尤其是在復雜的網路環境和運行環境之下。為了保證代碼的健壯性以及頁面的穩定性，我們從多個方面來做異常的防范和監控。

三種思路 主動防御

對于我們操作的數據，尤其是由 API 接口返回的，時常會有一個很復雜的深層嵌套的數據結構。為了代碼的健壯性，很多時候需要對每一層訪問都作空值判斷，就像這樣：

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

類似的代碼大家可能都寫過，沒寫過大概也見到別人寫過。看起來確實相當地不美觀，有句話說得很棒：

The opposite of beautiful is not ugly, but wrong.

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

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

接下來我們這樣訪問就可以了：

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

如果正常訪問到，則返回對應的值，否則返回 null。

這里提供的只是主動防御的一種情形，關于如何編寫更安全的代碼這里不作深入展開。

全局監控

瀏覽器提供 window.onerror API 來幫助我們進行全局的錯誤監控：

當 JavaScript 運行時錯誤（包括語法錯誤）發生時，會執行 window.onerror()`

當一項資源（如 或

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

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

2.同時在 CDN 服務器增加響應頭 access-control-allow-orgin，配置允許訪問 CORS 的域，否則瀏覽器直接將禁止加載。

try..catch

這一點上面也有提到，算是一種比較通用，可定制強的方案。當然，在性能上也會有一些損耗。

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

一個監控小工具

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

主要是用于捕獲頁面 JavaScript 異常報錯，捕獲異常類型包含:

JavaScript runtime 異常捕捉 √

靜態資源 load faided 異常捕捉 √

console.error 的異常捕獲 √

try..catch 錯誤捕獲 √

使用方式也很簡單，但使用 script mode 引入文件后，調用 init 函數，進行初始化配置和監聽

如果是使用 module mode，如下：

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

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

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

import jstracker from "jstracker";

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

所有錯誤信息統一由 report 函數處理，可以在此之上做數據處理：

// 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
};
概述

作為開發者以及項目維護者的身份，我們應當編寫更安全健壯的代碼。但由于環境的多樣性，無論再完善的測試，code review 都難免都所疏漏，我們需要一套監控系統來完善整個前端體系。

在監控的時候，出于同源安全策略無法拿到準確的錯誤信息，在此，有兩種解決方案：

增加 CORS 支持

使用 try..catch 進行異常捕獲

最后，我們對整個監控工作封裝了一個基礎的核心，可以監控 JavaScript Runtime 異常，資源加載異常，以及 try..catch 捕獲異常等，并給出一個實際工作中的示例。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83585.html

相關文章

  • 2017-06-22 前端日報

    摘要：前端日報精選新的長度單位你知道么高階函數一點通的故事隔行掃描算法專題之數組去重全家桶每個人都能做的網易云音樂騰訊前端團隊社區中文前端推薦第天聽說你缺少一個順手的圖床知乎專欄譯怎樣創建定制表單組件碎語掘金函數式編程到底是個啥 2017-06-22 前端日報 精選 CSS 新的長度單位 fr 你知道么？高階函數一點通png的故事：隔行掃描算法JavaScript專題之數組去重 · Issu...

    songze 評論0 收藏0

  • 一步一步搭建前端監控系統：JS錯誤監控篇

    摘要：摘要徒手寫錯誤監控。為什么用定時器呢，因為在單頁應用中，路由的切換和地址欄的變化是無法被監控的，我確實沒有想到特別好的辦法來監控，所以用了這種方式，如果有人有更好的辦法，請給我留言，謝謝。 摘要： 徒手寫JS錯誤監控。 作者：一步一個腳印一個坑 原文：搭建前端監控系統（二）JS錯誤監控篇 Fundebug經授權轉載，版權歸原作者所有。 背景：市面上的監控系統有很多，大多收費，對于...

    EdwardUp 評論0 收藏0

  • XSS攻擊之竊取Cookie

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

    DesGemini 評論0 收藏0

  • Node.js面試題之2017

    摘要：譯者按從標準，語法以及模塊角度來看，的發展讓人目不暇接，那么面試題也得與時俱進。因此，手動檢查所有依賴是不現實的。為，加之后返回。自從年雙十一正式上線，累計處理了億錯誤事件，得到了金山軟件百姓網等眾多知名用戶的認可。 譯者按: 從ECMAScript標準，Node.js語法以及NPM模塊角度來看，Node.js的發展讓人目不暇接，那么面試題也得與時俱進。 原文: Node.js In...

    Alliot 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<