學習 sentry 源碼整體架構，打造屬於自己的前端異常監控SDK

前言

這是學習源碼整體架構第四篇。整體架構這詞語好像有點大，姑且就算是源碼整體結構吧，主要就是學習是代碼整體結構，不深究其他不是主線的具體函數的實現。文章學習的是打包整合後的代碼，不是實際倉庫中的拆分的代碼。

其餘三篇分別是：

1.學習 jQuery 源碼整體架構，打造屬於自己的 js 類庫
2.學習 underscore 源碼整體架構，打造屬於自己的函數式編程類庫
3.學習 lodash 源碼整體架構，打造屬於自己的函數式編程類庫)

感興趣的讀者可以點擊閱讀。

導讀
本文通過梳理前端錯誤監控知識、介紹sentry錯誤監控原理、sentry初始化、Ajax上報、window.onerror、window.onunhandledrejection幾個方面來學習sentry的源碼。

開發微信小程序，想着搭建小程序錯誤監控方案。最近用了丁香園開源的Sentry 小程序 SDKsentry-miniapp。
順便研究下sentry-javascript倉庫的源碼整體架構，於是有了這篇文章。

本文分析的是打包後未壓縮的源碼，源碼總行數五千餘行，鏈接地址是：https://browser.sentry-cdn.com/5.7.1/bundle.js，版本是v5.7.1。

本文示例等源代碼在這我的github博客中github blog sentry，需要的讀者可以點擊查看，如果覺得不錯，可以順便star一下。

看源碼前先來梳理下前端錯誤監控的知識。

前端錯誤監控知識

摘抄自慕課網視頻教程：前端跳槽面試必備技巧
 別人做的筆記：前端跳槽面試必備技巧-4-4 錯誤監控類

前端錯誤的分類

1.即時運行錯誤：代碼錯誤

try...catch

window.onerror (也可以用DOM2事件監聽)

2.資源加載錯誤

object.onerror: dom對象的onerror事件

performance.getEntries()

Error事件捕獲

3.使用performance.getEntries()獲取網頁圖片加載錯誤

var allImgs = document.getElementsByTagName('image')

var loadedImgs = performance.getEntries().filter(i => i.initiatorType === 'img')

最後allIms和loadedImgs對比即可找出圖片資源未加載項目

Error事件捕獲代碼示例

window.addEventListener('error', function(e) {
  console.log('捕獲', e)
}, true) // 這裏只有捕獲才能觸發事件，冒泡是不能觸發

上報錯誤的基本原理

1.採用Ajax通信的方式上報

2.利用Image對象上報 (主流方式)

Image上報錯誤方式：
(new Image()).src = 'https://lxchuan12.cn/error?name=若川'

Sentry 前端異常監控基本原理

1.重寫 window.onerror 方法、重寫 window.onunhandledrejection 方法

如果不瞭解onerror和onunhandledrejection方法的讀者，可以看相關的MDN文檔。這裏簡要介紹一下：

MDN GlobalEventHandlers.onerror

window.onerror = function (message, source, lineno, colno, error) {
    console.log('message, source, lineno, colno, error', message, source, lineno, colno, error);
}

參數： 
message：錯誤信息（字符串）。可用於HTML onerror=""處理程序中的event。 
source：發生錯誤的腳本URL（字符串） 
lineno：發生錯誤的行號（數字） 
colno：發生錯誤的列號（數字） 
error：Error對象（對象）

MDN unhandledrejection

當 Promise 被 reject 且沒有 reject 處理器的時候，會觸發 unhandledrejection 事件；這可能發生在 window 下，但也可能發生在 Worker 中。這對於調試回退錯誤處理非常有用。

Sentry 源碼可以搜索 global.onerror 定位到具體位置

 GlobalHandlers.prototype._installGlobalOnErrorHandler = function () {
    // 代碼有刪減
    // 這裏的 this._global 在瀏覽器中就是 window
    this._oldOnErrorHandler = this._global.onerror;
    this._global.onerror = function (msg, url, line, column, error) {}
    // code ...
 }

同樣，可以搜索global.onunhandledrejection 定位到具體位置

GlobalHandlers.prototype._installGlobalOnUnhandledRejectionHandler = function () {
    // 代碼有刪減
    this._oldOnUnhandledRejectionHandler = this._global.onunhandledrejection;
    this._global.onunhandledrejection = function (e) {}
}

2.採用Ajax上傳

支持 fetch 使用 fetch，否則使用　XHR。

BrowserBackend.prototype._setupTransport = function () {
    // 代碼有刪減
    if (supportsFetch()) {
        return new FetchTransport(transportOptions);
    }
    return new XHRTransport(transportOptions);
};

2.1 fetch

FetchTransport.prototype.sendEvent = function (event) {
    var defaultOptions = {
        body: JSON.stringify(event),
        method: 'POST',
        referrerPolicy: (supportsReferrerPolicy() ? 'origin' : ''),
    };
    return this._buffer.add(global$2.fetch(this.url, defaultOptions).then(function (response) { return ({
        status: exports.Status.fromHttpCode(response.status),
    }); }));
};

2.2 XMLHttpRequest

XHRTransport.prototype.sendEvent = function (event) {
    var _this = this;
    return this._buffer.add(new SyncPromise(function (resolve, reject) {
        // 熟悉的 XMLHttpRequest
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (request.readyState !== 4) {
                return;
            }
            if (request.status === 200) {
                resolve({
                    status: exports.Status.fromHttpCode(request.status),
                });
            }
            reject(request);
        };
        request.open('POST', _this.url);
        request.send(JSON.stringify(event));
    }));
}

接下來主要通過Sentry初始化、如何Ajax上報和window.onerror、window.onunhandledrejection三條主線來學習源碼。

如果看到這裏，暫時不想關注後面的源碼細節，直接看後文小結1和2的兩張圖。或者可以點贊或收藏這篇文章，後續想看了再看。

Sentry 源碼入口和出口

var Sentry = (function(exports){
    // code ...

    var SDK_NAME = 'sentry.javascript.browser';
    var SDK_VERSION = '5.7.1';

    // code ...
    // 省略了導出的Sentry的若干個方法和屬性
    // 只列出瞭如下幾個
    exports.SDK_NAME = SDK_NAME;
    exports.SDK_VERSION = SDK_VERSION;
    // 重點關注 captureMessage
    exports.captureMessage = captureMessage;
    // 重點關注 init
    exports.init = init;

    return exports;
}({}));

Sentry.init 初始化之 init 函數

初始化

// 這裏的dsn，是sentry.io網站會生成的。
Sentry.init({ dsn: 'xxx' });

// options 是 {dsn: '...'}
function init(options) {
    // 如果options 是undefined，則賦值爲 空對象
    if (options === void 0) { options = {}; }
    // 如果沒傳 defaultIntegrations 則賦值默認的
    if (options.defaultIntegrations === undefined) {
        options.defaultIntegrations = defaultIntegrations;
    }
    // 初始化語句
    if (options.release === undefined) {
        var window_1 = getGlobalObject();
        // 這是給  sentry-webpack-plugin 插件提供的，webpack插件注入的變量。這裏沒用這個插件，所以這裏不深究。
        // This supports the variable that sentry-webpack-plugin injects
        if (window_1.SENTRY_RELEASE && window_1.SENTRY_RELEASE.id) {
            options.release = window_1.SENTRY_RELEASE.id;
        }
    }
    // 初始化並且綁定
    initAndBind(BrowserClient, options);
}

getGlobalObject、inNodeEnv 函數

很多地方用到這個函數getGlobalObject。其實做的事情也比較簡單，就是獲取全局對象。瀏覽器中是window。

/**
 * 判斷是否是node環境
 * Checks whether we're in the Node.js or Browser environment
 *
 * @returns Answer to given question
 */
function isNodeEnv() {
    // tslint:disable:strict-type-predicates
    return Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';
}
var fallbackGlobalObject = {};
/**
 * Safely get global scope object
 *
 * @returns Global scope object
 */
function getGlobalObject() {
    return (isNodeEnv()
    // 是 node 環境 賦值給 global
        ? global
        : typeof window !== 'undefined'
            ? window
            // 不是 window self 不是undefined 說明是 Web Worker 環境
            : typeof self !== 'undefined'
                ? self
                // 都不是，賦值給空對象。
                : fallbackGlobalObject);

繼續看 initAndBind 函數

initAndBind 函數之 new BrowserClient(options)

function initAndBind(clientClass, options) {
    // 這裏沒有開啓debug模式，logger.enable() 這句不會執行
    if (options.debug === true) {
        logger.enable();
    }
    getCurrentHub().bindClient(new clientClass(options));
}

可以看出 initAndBind()，第一個參數是 BrowserClient 構造函數，第二個參數是初始化後的options。
接着先看構造函數 BrowserClient。
另一條線 getCurrentHub().bindClient() 先不看。

BrowserClient 構造函數

var BrowserClient = /** @class */ (function (_super) {
    // `BrowserClient` 繼承自`BaseClient`
    __extends(BrowserClient, _super);
    /**
     * Creates a new Browser SDK instance.
     *
     * @param options Configuration options for this SDK.
     */
    function BrowserClient(options) {
        if (options === void 0) { options = {}; }
        // 把`BrowserBackend`，`options`傳參給`BaseClient`調用。
        return _super.call(this, BrowserBackend, options) || this;
    }
    return BrowserClient;
}(BaseClient));

從代碼中可以看出：
BrowserClient 繼承自BaseClient，並且把BrowserBackend，options傳參給BaseClient調用。

先看 BrowserBackend，這裏的BaseClient，暫時不看。

看BrowserBackend之前，先提一下繼承、繼承靜態屬性和方法。

__extends、extendStatics 打包代碼實現的繼承

未打包的源碼是使用ES6 extends實現的。這是打包後的對ES6的extends的一種實現。

如果對繼承還不是很熟悉的讀者，可以參考我之前寫的文章。面試官問：JS的繼承

// 繼承靜態方法和屬性
var extendStatics = function(d, b) {
    // 如果支持 Object.setPrototypeOf 這個函數，直接使用
    // 不支持，則使用原型__proto__ 屬性，
    // 如何還不支持（但有可能__proto__也不支持，畢竟是瀏覽器特有的方法。）
    // 則使用for in 遍歷原型鏈上的屬性，從而達到繼承的目的。
    extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return extendStatics(d, b);
};

function __extends(d, b) {
    extendStatics(d, b);
    // 申明構造函數__ 並且把 d 賦值給 constructor
    function __() { this.constructor = d; }
    // (__.prototype = b.prototype, new __()) 這種逗號形式的代碼，最終返回是後者，也就是 new __()
    // 比如 (typeof null, 1) 返回的是1
    // 如果 b === null 用Object.create(b) 創建 ，也就是一個不含原型鏈等信息的空對象 {}
    // 否則使用 new __() 返回
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

不得不說這打包後的代碼十分嚴謹，上面說的我的文章《面試官問：JS的繼承》中沒有提到不支持__proto__的情況。看來這文章可以進一步嚴謹修正了。
讓我想起Vue源碼中對數組檢測代理判斷是否支持__proto__的判斷。

// vuejs 源碼：https://github.com/vuejs/vue/blob/dev/dist/vue.js#L526-L527
// can we use __proto__?
var hasProto = '__proto__' in {};

看完打包代碼實現的繼承，繼續看 BrowserBackend 構造函數

BrowserBackend 構造函數（瀏覽器後端）

var BrowserBackend = /** @class */ (function (_super) {
    __extends(BrowserBackend, _super);
    function BrowserBackend() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    /**
     * 設置請求
     */
    BrowserBackend.prototype._setupTransport = function () {
        if (!this._options.dsn) {
            // We return the noop transport here in case there is no Dsn.
            // 沒有設置dsn，調用BaseBackend.prototype._setupTransport 返回空函數
            return _super.prototype._setupTransport.call(this);
        }
        var transportOptions = __assign({}, this._options.transportOptions, { dsn: this._options.dsn });
        if (this._options.transport) {
            return new this._options.transport(transportOptions);
        }
        // 支持Fetch則返回 FetchTransport 實例，否則返回 XHRTransport實例，
        // 這兩個構造函數具體代碼在開頭已有提到。
        if (supportsFetch()) {
            return new FetchTransport(transportOptions);
        }
        return new XHRTransport(transportOptions);
    };
    // code ...
    return BrowserBackend;
}(BaseBackend));

BrowserBackend 又繼承自 BaseBackend。

BaseBackend 構造函數（基礎後端）

/**
 * This is the base implemention of a Backend.
 * @hidden
 */
var BaseBackend = /** @class */ (function () {
    /** Creates a new backend instance. */
    function BaseBackend(options) {
        this._options = options;
        if (!this._options.dsn) {
            logger.warn('No DSN provided, backend will not do anything.');
        }
        // 調用設置請求函數
        this._transport = this._setupTransport();
    }
    /**
     * Sets up the transport so it can be used later to send requests.
     * 設置發送請求空函數
     */
    BaseBackend.prototype._setupTransport = function () {
        return new NoopTransport();
    };
    // code ...
    BaseBackend.prototype.sendEvent = function (event) {
        this._transport.sendEvent(event).then(null, function (reason) {
            logger.error("Error while sending event: " + reason);
        });
    };
    BaseBackend.prototype.getTransport = function () {
        return this._transport;
    };
    return BaseBackend;
}());

通過一系列的繼承後，回過頭來看 BaseClient 構造函數。

BaseClient 構造函數（基礎客戶端）

var BaseClient = /** @class */ (function () {
    /**
     * Initializes this client instance.
     *
     * @param backendClass A constructor function to create the backend.
     * @param options Options for the client.
     */
    function BaseClient(backendClass, options) {
        /** Array of used integrations. */
        this._integrations = {};
        /** Is the client still processing a call? */
        this._processing = false;
        this._backend = new backendClass(options);
        this._options = options;
        if (options.dsn) {
            this._dsn = new Dsn(options.dsn);
        }
        if (this._isEnabled()) {
            this._integrations = setupIntegrations(this._options);
        }
    }
    // code ...
    return BaseClient;
}());

小結1. new BrowerClient 經過一系列的繼承和初始化

可以輸出下具體new clientClass(options)之後的結果：

function initAndBind(clientClass, options) {
    if (options.debug === true) {
        logger.enable();
    }
    var client = new clientClass(options);
    console.log('new clientClass(options)', client);
    getCurrentHub().bindClient(client);
    // 原來的代碼
    // getCurrentHub().bindClient(new clientClass(options));
}

最終輸出得到這樣的數據。我畫了一張圖表示。重點關注的原型鏈用顏色標註了，其他部分收縮了。

initAndBind 函數之 getCurrentHub().bindClient()

繼續看 initAndBind 的另一條線。

function initAndBind(clientClass, options) {
    if (options.debug === true) {
        logger.enable();
    }
    getCurrentHub().bindClient(new clientClass(options));
}

獲取當前的控制中心 Hub，再把new BrowserClient() 的實例對象綁定在Hub上。

getCurrentHub 函數

// 獲取當前Hub 控制中心
function getCurrentHub() {
    // Get main carrier (global for every environment)
    var registry = getMainCarrier();
    // 如果沒有控制中心在載體上，或者它的版本是老版本，就設置新的。
    // If there's no hub, or its an old API, assign a new one
    if (!hasHubOnCarrier(registry) || getHubFromCarrier(registry).isOlderThan(API_VERSION)) {
        setHubOnCarrier(registry, new Hub());
    }
    // node 才執行
    // Prefer domains over global if they are there (applicable only to Node environment)
    if (isNodeEnv()) {
        return getHubFromActiveDomain(registry);
    }
    // 返回當前控制中心來自載體上。
    // Return hub that lives on a global object
    return getHubFromCarrier(registry);
}

衍生的函數 getMainCarrier、getHubFromCarrier

function getMainCarrier() {
    // 載體 這裏是window
    // 通過一系列new BrowerClient() 一系列的初始化
    // 掛載在  carrier.__SENTRY__ 已經有了三個屬性，globalEventProcessors, hub, logger
    var carrier = getGlobalObject();
    carrier.__SENTRY__ = carrier.__SENTRY__ || {
        hub: undefined,
    };
    return carrier;
}

// 獲取控制中心 hub 從載體上
function getHubFromCarrier(carrier) {
    // 已經有了則返回，沒有則new Hub
    if (carrier && carrier.__SENTRY__ && carrier.__SENTRY__.hub) {
        return carrier.__SENTRY__.hub;
    }
    carrier.__SENTRY__ = carrier.__SENTRY__ || {};
    carrier.__SENTRY__.hub = new Hub();
    return carrier.__SENTRY__.hub;
}

bindClient 綁定客戶端在當前控制中心上

Hub.prototype.bindClient = function (client) {
    // 獲取最後一個
    var top = this.getStackTop();
    // 把 new BrowerClient() 實例 綁定到top上
    top.client = client;
};

Hub.prototype.getStackTop = function () {
    // 獲取最後一個
    return this._stack[this._stack.length - 1];
};

小結2. 經過一系列的繼承和初始化

再回過頭來看 initAndBind函數

function initAndBind(clientClass, options) {
    if (options.debug === true) {
        logger.enable();
    }
    var client = new clientClass(options);
    console.log(client, options, 'client, options');
    var currentHub = getCurrentHub();
    currentHub.bindClient(client);
    console.log('currentHub', currentHub);
    // 源代碼
    // getCurrentHub().bindClient(new clientClass(options));
}

最終會得到這樣的Hub實例對象。筆者畫了一張圖表示，便於查看理解。

初始化完成後，再來看具體例子。
具體 captureMessage 函數的實現。

Sentry.captureMessage('Hello, 若川!');

captureMessage 函數

通過之前的閱讀代碼，知道會最終會調用Fetch接口，所以直接斷點調試即可，得出如下調用棧。
接下來描述調用棧的主要流程。

調用棧主要流程：
captureMessage

function captureMessage(message, level) {
    var syntheticException;
    try {
        throw new Error(message);
    }
    catch (exception) {
        syntheticException = exception;
    }
    // 調用 callOnHub 方法
    return callOnHub('captureMessage', message, level, {
        originalException: message,
        syntheticException: syntheticException,
    });
}

=> callOnHub

/**
 * This calls a function on the current hub.
 * @param method function to call on hub.
 * @param args to pass to function.
 */
function callOnHub(method) {
    // 這裏method 傳進來的是 'captureMessage'
    // 把method除外的其他參數放到args數組中
    var args = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        args[_i - 1] = arguments[_i];
    }
    // 獲取當前控制中心 hub
    var hub = getCurrentHub();
    // 有這個方法 把args 數組展開，傳遞給 hub[method] 執行
    if (hub && hub[method]) {
        // tslint:disable-next-line:no-unsafe-any
        return hub[method].apply(hub, __spread(args));
    }
    throw new Error("No hub defined or " + method + " was not found on the hub, please open a bug report.");
}

=> Hub.prototype.captureMessage

接着看Hub.prototype 上定義的 captureMessage 方法

Hub.prototype.captureMessage = function (message, level, hint) {
    var eventId = (this._lastEventId = uuid4());
    var finalHint = hint;
    // 代碼有刪減
    this._invokeClient('captureMessage', message, level, __assign({}, finalHint, { event_id: eventId }));
    return eventId;
};

=> Hub.prototype._invokeClient

/**
 * Internal helper function to call a method on the top client if it exists.
 *
 * @param method The method to call on the client.
 * @param args Arguments to pass to the client function.
 */
Hub.prototype._invokeClient = function (method) {
    // 同樣：這裏method 傳進來的是 'captureMessage'
    // 把method除外的其他參數放到args數組中
    var _a;
    var args = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        args[_i - 1] = arguments[_i];
    }
    var top = this.getStackTop();
    // 獲取控制中心的 hub，調用客戶端也就是new BrowerClient () 實例中繼承自 BaseClient 的 captureMessage 方法
    // 有這個方法 把args 數組展開，傳遞給 hub[method] 執行
    if (top && top.client && top.client[method]) {
        (_a = top.client)[method].apply(_a, __spread(args, [top.scope]));
    }
};

=> BaseClient.prototype.captureMessage

BaseClient.prototype.captureMessage = function (message, level, hint, scope) {
    var _this = this;
    var eventId = hint && hint.event_id;
    this._processing = true;
    var promisedEvent = isPrimitive(message)
        ? this._getBackend().eventFromMessage("" + message, level, hint)
        : this._getBackend().eventFromException(message, hint);
        // 代碼有刪減
    promisedEvent
        .then(function (event) { return _this._processEvent(event, hint, scope); })
    // 代碼有刪減
    return eventId;
};

最後會調用 _processEvent 也就是

=> BaseClient.prototype._processEvent

這個函數最終會調用

_this._getBackend().sendEvent(finalEvent);

也就是

=> BaseBackend.prototype.sendEvent

BaseBackend.prototype.sendEvent = function (event) {
    this._transport.sendEvent(event).then(null, function (reason) {
        logger.error("Error while sending event: " + reason);
    });
};

=> FetchTransport.prototype.sendEvent 最終發送了請求

FetchTransport.prototype.sendEvent

FetchTransport.prototype.sendEvent = function (event) {
    var defaultOptions = {
        body: JSON.stringify(event),
        method: 'POST',
        // Despite all stars in the sky saying that Edge supports old draft syntax, aka 'never', 'always', 'origin' and 'default
        // https://caniuse.com/#feat=referrer-policy
        // It doesn't. And it throw exception instead of ignoring this parameter...
        // REF: https://github.com/getsentry/raven-js/issues/1233
        referrerPolicy: (supportsReferrerPolicy() ? 'origin' : ''),
    };
    // global$2.fetch(this.url, defaultOptions) 使用fetch發送請求
    return this._buffer.add(global$2.fetch(this.url, defaultOptions).then(function (response) { return ({
        status: exports.Status.fromHttpCode(response.status),
    }); }));
};

看完 Ajax 上報 主線，再看本文的另外一條主線 window.onerror 捕獲。

window.onerror 和 window.onunhandledrejection 捕獲錯誤

例子：調用一個未申明的變量。

func();

Promise 不捕獲錯誤

new Promise(() => {
    fun();
})
.then(res => {
    console.log('then');
})

captureEvent

調用棧主要流程：
window.onerror

GlobalHandlers.prototype._installGlobalOnErrorHandler = function () {
    if (this._onErrorHandlerInstalled) {
        return;
    }
    var self = this; // tslint:disable-line:no-this-assignment
    // 瀏覽器中這裏的 this._global.  就是window
    this._oldOnErrorHandler = this._global.onerror;
    this._global.onerror = function (msg, url, line, column, error) {
        var currentHub = getCurrentHub();
        // 代碼有刪減
        currentHub.captureEvent(event, {
            originalException: error,
        });
        if (self._oldOnErrorHandler) {
            return self._oldOnErrorHandler.apply(this, arguments);
        }
        return false;
    };
    this._onErrorHandlerInstalled = true;
};

window.onunhandledrejection

GlobalHandlers.prototype._installGlobalOnUnhandledRejectionHandler = function () {
    if (this._onUnhandledRejectionHandlerInstalled) {
        return;
    }
    var self = this; // tslint:disable-line:no-this-assignment
    this._oldOnUnhandledRejectionHandler = this._global.onunhandledrejection;
    this._global.onunhandledrejection = function (e) {
        // 代碼有刪減
        var currentHub = getCurrentHub();
        currentHub.captureEvent(event, {
            originalException: error,
        });
        if (self._oldOnUnhandledRejectionHandler) {
            return self._oldOnUnhandledRejectionHandler.apply(this, arguments);
        }
        return false;
    };
    this._onUnhandledRejectionHandlerInstalled = true;
};

共同點：都會調用currentHub.captureEvent

currentHub.captureEvent(event, {
    originalException: error,
});

=> Hub.prototype.captureEvent

最終又是調用 _invokeClient ，調用流程跟 captureMessage 類似，這裏就不再贅述。

this._invokeClient('captureEvent')

=> Hub.prototype._invokeClient

=> BaseClient.prototype.captureEvent

=> BaseClient.prototype._processEvent

=> BaseBackend.prototype.sendEvent

=> FetchTransport.prototype.sendEvent

最終同樣是調用了這個函數發送了請求。

可謂是殊途同歸，行文至此就基本已經結束，最後總結一下。

總結

Sentry-JavaScript源碼高效利用了JS的原型鏈機制。可謂是驚豔，值得學習。

本文通過梳理前端錯誤監控知識、介紹sentry錯誤監控原理、sentry初始化、Ajax上報、window.onerror、window.onunhandledrejection幾個方面來學習sentry的源碼。還有很多細節和構造函數沒有分析。

總共的構造函數（類）有25個，提到的主要有9個，分別是：Hub、BaseClient、BaseBackend、BaseTransport、FetchTransport、XHRTransport、BrowserBackend、BrowserClient、GlobalHandlers。

其他沒有提到的分別是 SentryError、Logger、Memo、SyncPromise、PromiseBuffer、Span、Scope、Dsn、API、NoopTransport、FunctionToString、InboundFilters、TryCatch、Breadcrumbs、LinkedErrors、UserAgent。

這些構造函數（類）中還有很多值得學習，比如同步的Promise（SyncPromise）。
有興趣的讀者，可以看這一塊官方倉庫中採用typescript寫的源碼SyncPromise，也可以看打包後出來未壓縮的代碼。

讀源碼比較耗費時間，寫文章記錄下來更加費時間（比如寫這篇文章跨度十幾天...），但收穫一般都比較大。

如果讀者發現有不妥或可改善之處，再或者哪裏沒寫明白的地方，歡迎評論指出。另外覺得寫得不錯，對您有些許幫助，可以點贊、評論、轉發分享，也是對筆者的一種支持。萬分感謝。

筆者往期文章

學習 lodash 源碼整體架構，打造屬於自己的函數式編程類庫
 學習 underscore 源碼整體架構，打造屬於自己的函數式編程類庫
 學習 jQuery 源碼整體架構，打造屬於自己的 js 類庫
 面試官問：JS的繼承
 面試官問：JS的this指向
 面試官問：能否模擬實現JS的call和apply方法
 面試官問：能否模擬實現JS的bind方法
 面試官問：能否模擬實現JS的new操作符
 前端使用puppeteer 爬蟲生成《React.js 小書》PDF併合並

關於

作者：常以若川爲名混跡於江湖。前端路上 | PPT愛好者 | 所知甚少，唯善學。
個人博客-若川-本文鏈接地址，使用vuepress重構了，閱讀體驗可能更好些
掘金專欄，歡迎關注~
segmentfault前端視野專欄，歡迎關注~
知乎前端視野專欄，歡迎關注~
github blog，相關源碼和資源都放在這裏，求個star^_^~

微信公衆號若川視野

可能比較有趣的微信公衆號，長按掃碼關注。也可以加微信 lxchuan12，註明來源，拉您進【前端視野交流羣】。

學習 sentry 源碼整體架構，打造屬於自己的前端異常監控SDK

前言

前端錯誤監控知識

前端錯誤的分類

Error事件捕獲代碼示例

上報錯誤的基本原理

Sentry 前端異常監控基本原理

Sentry 源碼入口和出口

Sentry.init 初始化之 init 函數

getGlobalObject、inNodeEnv 函數

initAndBind 函數之 new BrowserClient(options)

BrowserClient 構造函數

__extends、extendStatics 打包代碼實現的繼承

BrowserBackend 構造函數（瀏覽器後端）

BaseBackend 構造函數（基礎後端）

BaseClient 構造函數（基礎客戶端）

小結1. new BrowerClient 經過一系列的繼承和初始化

initAndBind 函數之 getCurrentHub().bindClient()

getCurrentHub 函數

衍生的函數 getMainCarrier、getHubFromCarrier

bindClient 綁定客戶端在當前控制中心上

小結2. 經過一系列的繼承和初始化

captureMessage 函數

FetchTransport.prototype.sendEvent

window.onerror 和 window.onunhandledrejection 捕獲錯誤

captureEvent

總結

推薦閱讀

筆者往期文章

關於

微信公衆號若川視野

學習 sentry 源碼整體架構，打造屬於自己的前端異常監控SDK

學習underscorejs整體架構，打造屬於自己的函數式編程類庫

學習 jQuery 源碼整體架構，打造屬於自己的 js 類庫

面試官問：JS的繼承

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

學習 sentry 源碼整體架構，打造屬於自己的前端異常監控SDK

前言

前端錯誤監控知識

前端錯誤的分類

Error事件捕獲代碼示例

上報錯誤的基本原理

Sentry 前端異常監控基本原理

Sentry 源碼入口和出口

Sentry.init 初始化 之 init 函數

getGlobalObject、inNodeEnv 函數

initAndBind 函數之 new BrowserClient(options)

BrowserClient 構造函數

__extends、extendStatics 打包代碼實現的繼承

BrowserBackend 構造函數 （瀏覽器後端）

BaseBackend 構造函數 （基礎後端）

BaseClient 構造函數（基礎客戶端）

小結1. new BrowerClient 經過一系列的繼承和初始化

initAndBind 函數之 getCurrentHub().bindClient()

getCurrentHub 函數

衍生的函數 getMainCarrier、getHubFromCarrier

bindClient 綁定客戶端在當前控制中心上

小結2. 經過一系列的繼承和初始化

captureMessage 函數

FetchTransport.prototype.sendEvent

window.onerror 和 window.onunhandledrejection 捕獲 錯誤

captureEvent

總結

推薦閱讀

筆者往期文章

關於

微信公衆號 若川視野

Sentry.init 初始化之 init 函數

BrowserBackend 構造函數（瀏覽器後端）

BaseBackend 構造函數（基礎後端）

window.onerror 和 window.onunhandledrejection 捕獲錯誤

微信公衆號若川視野