学习 sentry 源码整体架构，打造属于自己的前端异常监控SDK
這是學(xué)習(xí)源碼整體架構(gòu)第四篇。整體架構(gòu)這詞語好像有點(diǎn)大，姑且就算是源碼整體結(jié)構(gòu)吧，主要就是學(xué)習(xí)是代碼整體結(jié)構(gòu)，不深究其他不是主線的具體函數(shù)的實(shí)現(xiàn)。文章學(xué)習(xí)的是打包整合后的代碼，不是實(shí)際倉庫中的拆分的代碼。
其余三篇分別是：
1.學(xué)習(xí) jQuery 源碼整體架構(gòu)，打造屬于自己的 js 類庫
2.學(xué)習(xí)underscore源碼整體架構(gòu)，打造屬于自己的函數(shù)式編程類庫
3.學(xué)習(xí) lodash 源碼整體架構(gòu)，打造屬于自己的函數(shù)式編程類庫
感興趣的讀者可以點(diǎn)擊閱讀。
導(dǎo)讀
本文通過梳理前端錯誤監(jiān)控知識、介紹 sentry錯誤監(jiān)控原理、 sentry初始化、 Ajax上報(bào)、 window.onerror、window.onunhandledrejection幾個方面來學(xué)習(xí) sentry的源碼。
開發(fā)微信小程序，想著搭建小程序錯誤監(jiān)控方案。最近用了丁香園 開源的 Sentry 小程序 SDKsentry-miniapp。 順便研究下 sentry-javascript倉庫 的源碼整體架構(gòu)，于是有了這篇文章。
本文分析的是打包后未壓縮的源碼，源碼總行數(shù)五千余行，鏈接地址是：https://browser.sentry-cdn.com/5.7.1/bundle.js， 版本是 v5.7.1。
本文示例等源代碼在這我的 github博客中g(shù)ithub blog sentry，需要的讀者可以點(diǎn)擊查看，如果覺得不錯，可以順便 star一下。
看源碼前先來梳理下前端錯誤監(jiān)控的知識。
前端錯誤監(jiān)控知識
摘抄自 慕課網(wǎng)視頻教程：前端跳槽面試必備技巧
別人做的筆記：前端跳槽面試必備技巧-4-4 錯誤監(jiān)控類
前端錯誤的分類
1.即時運(yùn)行錯誤：代碼錯誤
try...catch
window.onerror (也可以用 DOM2事件監(jiān)聽)
2.資源加載錯誤
object.onerror: dom對象的 onerror事件
performance.getEntries()
Error事件捕獲
3.使用 performance.getEntries()獲取網(wǎng)頁圖片加載錯誤
varallImgs=document.getElementsByTagName('image')
varloadedImgs=performance.getEntries().filter(i=>i.initiatorType==='img')
最后 allIms和 loadedImgs對比即可找出圖片資源未加載項(xiàng)目
Error事件捕獲代碼示例
window.addEventListener('error', function(e) {console.log('捕獲', e) }, true) // 這里只有捕獲才能觸發(fā)事件，冒泡是不能觸發(fā)上報(bào)錯誤的基本原理
1.采用 Ajax通信的方式上報(bào)
2.利用 Image對象上報(bào) (主流方式)
Image上報(bào)錯誤方式： (newImage()).src='https://lxchuan12.cn/error?name=若川'
Sentry 前端異常監(jiān)控基本原理
1.重寫 window.onerror 方法、重寫 window.onunhandledrejection 方法
如果不了解 onerror和onunhandledrejection方法的讀者，可以看相關(guān)的 MDN文檔。這里簡要介紹一下：
MDN GlobalEventHandlers.onerror
window.onerror = function (message, source, lineno, colno, error) {console.log('message, source, lineno, colno, error', message, source, lineno, colno, error); }參數(shù)：
message：錯誤信息（字符串）。可用于 HTML onerror=""處理程序中的 event。
source：發(fā)生錯誤的腳本 URL（字符串）
lineno：發(fā)生錯誤的行號（數(shù)字）
colno：發(fā)生錯誤的列號（數(shù)字）
error： Error對象（對象）
MDN unhandledrejection
當(dāng) Promise 被 reject 且沒有 reject 處理器的時候，會觸發(fā) unhandledrejection 事件；這可能發(fā)生在 window 下，但也可能發(fā)生在 Worker 中。 這對于調(diào)試回退錯誤處理非常有用。
Sentry 源碼可以搜索 global.onerror 定位到具體位置
GlobalHandlers.prototype._installGlobalOnErrorHandler = function () {// 代碼有刪減// 這里的 this._global 在瀏覽器中就是 windowthis._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) {// 熟悉的 XMLHttpRequestvar 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上報(bào)和 window.onerror、window.onunhandledrejection三條主線來學(xué)習(xí)源碼。
如果看到這里，暫時不想關(guān)注后面的源碼細(xì)節(jié)，直接看后文小結(jié)1和2的兩張圖。或者可以點(diǎn)贊或收藏這篇文章，后續(xù)想看了再看。
Sentry 源碼入口和出口
var Sentry = (function(exports){// code ...var SDK_NAME = 'sentry.javascript.browser';var SDK_VERSION = '5.7.1';// code ...// 省略了導(dǎo)出的Sentry的若干個方法和屬性// 只列出了如下幾個exports.SDK_NAME = SDK_NAME;exports.SDK_VERSION = SDK_VERSION;// 重點(diǎn)關(guān)注 captureMessageexports.captureMessage = captureMessage;// 重點(diǎn)關(guān)注 initexports.init = init;return exports; }({}));Sentry.init 初始化 之 init 函數(shù)
初始化
// 這里的dsn，是sentry.io網(wǎng)站會生成的。 Sentry.init({ dsn: 'xxx' }); // options 是 {dsn: '...'} function init(options) {// 如果options 是undefined，則賦值為 空對象if (options === void 0) { options = {}; }// 如果沒傳 defaultIntegrations 則賦值默認(rèn)的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 injectsif (window_1.SENTRY_RELEASE && window_1.SENTRY_RELEASE.id) {options.release = window_1.SENTRY_RELEASE.id;}}// 初始化并且綁定initAndBind(BrowserClient, options); }getGlobalObject、inNodeEnv 函數(shù)
很多地方用到這個函數(shù) getGlobalObject。其實(shí)做的事情也比較簡單，就是獲取全局對象。瀏覽器中是 window。
/*** 判斷是否是node環(huán)境* Checks whether we're in the Node.js or Browser environment** @returns Answer to given question*/ function isNodeEnv() {// tslint:disable:strict-type-predicatesreturn 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 環(huán)境 賦值給 global? global: typeof window !== 'undefined'? window// 不是 window self 不是undefined 說明是 Web Worker 環(huán)境: typeof self !== 'undefined'? self// 都不是，賦值給空對象。: fallbackGlobalObject);繼續(xù)看 initAndBind 函數(shù)
initAndBind 函數(shù)之 new BrowserClient(options)
function initAndBind(clientClass, options) {// 這里沒有開啟debug模式，logger.enable() 這句不會執(zhí)行if (options.debug === true) {logger.enable();}getCurrentHub().bindClient(new clientClass(options)); }可以看出 initAndBind()，第一個參數(shù)是 BrowserClient 構(gòu)造函數(shù)，第二個參數(shù)是初始化后的 options。 接著先看 構(gòu)造函數(shù) BrowserClient。 另一條線 getCurrentHub().bindClient() 先不看。
BrowserClient 構(gòu)造函數(shù)
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`調(diào)用。return _super.call(this, BrowserBackend, options) || this;}return BrowserClient; }(BaseClient));從代碼中可以看出： BrowserClient 繼承自 BaseClient，并且把 BrowserBackend， options傳參給 BaseClient調(diào)用。
先看 BrowserBackend，這里的 BaseClient，暫時不看。
看 BrowserBackend之前，先提一下繼承、繼承靜態(tài)屬性和方法。
__extends、extendStatics 打包代碼實(shí)現(xiàn)的繼承
未打包的源碼是使用 ES6extends實(shí)現(xiàn)的。這是打包后的對 ES6的 extends的一種實(shí)現(xiàn)。
如果對繼承還不是很熟悉的讀者，可以參考我之前寫的文章。面試官問：JS的繼承
// 繼承靜態(tài)方法和屬性
var extendStatics = function(d, b) {
// 如果支持 Object.setPrototypeOf 這個函數(shù)，直接使用
// 不支持，則使用原型__proto__ 屬性，
// 如何還不支持（但有可能__proto__也不支持，畢竟是瀏覽器特有的方法。）
// 則使用for in 遍歷原型鏈上的屬性，從而達(dá)到繼承的目的。
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);
// 申明構(gòu)造函數(shù)__ 并且把 d 賦值給 constructor
function __() { this.constructor = d; }
// (__.prototype = b.prototype, new __()) 這種逗號形式的代碼，最終返回是后者，也就是 new __()
// 比如 (typeof null, 1) 返回的是1
// 如果 b === null 用Object.create(b) 創(chuàng)建 ，也就是一個不含原型鏈等信息的空對象 {}
// 否則使用 new __() 返回
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
不得不說這打包后的代碼十分嚴(yán)謹(jǐn)，上面說的我的文章?面試官問：JS的繼承?中沒有提到不支持 __proto__的情況?？磥磉@文章可以進(jìn)一步嚴(yán)謹(jǐn)修正了。 讓我想起 Vue源碼中對數(shù)組檢測代理判斷是否支持 __proto__的判斷。
// vuejs 源碼：https://github.com/vuejs/vue/blob/dev/dist/vue.js#L526-L527 // can we use __proto__? var hasProto = '__proto__' in {};看完打包代碼實(shí)現(xiàn)的繼承，繼續(xù)看 BrowserBackend 構(gòu)造函數(shù)
BrowserBackend 構(gòu)造函數(shù) （瀏覽器后端）
var BrowserBackend = /** @class */ (function (_super) {__extends(BrowserBackend, _super);function BrowserBackend() {return _super !== null && _super.apply(this, arguments) || this;}/*** 設(shè)置請求*/BrowserBackend.prototype._setupTransport = function () {if (!this._options.dsn) {// We return the noop transport here in case there is no Dsn.// 沒有設(shè)置dsn，調(diào)用BaseBackend.prototype._setupTransport 返回空函數(shù)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 實(shí)例，否則返回 XHRTransport實(shí)例，// 這兩個構(gòu)造函數(shù)具體代碼在開頭已有提到。if (supportsFetch()) {return new FetchTransport(transportOptions);}return new XHRTransport(transportOptions);};// code ...return BrowserBackend; }(BaseBackend));BrowserBackend 又繼承自 BaseBackend。
BaseBackend 構(gòu)造函數(shù) （基礎(chǔ)后端）
/*** 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.');}// 調(diào)用設(shè)置請求函數(shù)this._transport = this._setupTransport();}/*** Sets up the transport so it can be used later to send requests.* 設(shè)置發(fā)送請求空函數(shù)*/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 構(gòu)造函數(shù)。
BaseClient 構(gòu)造函數(shù)（基礎(chǔ)客戶端）
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; }());小結(jié)1. new BrowerClient 經(jīng)過一系列的繼承和初始化
可以輸出下具體 newclientClass(options)之后的結(jié)果：
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)); }最終輸出得到這樣的數(shù)據(jù)。我畫了一張圖表示。重點(diǎn)關(guān)注的原型鏈用顏色標(biāo)注了，其他部分收縮了。
initAndBind 函數(shù)之 getCurrentHub().bindClient()
繼續(xù)看 initAndBind 的另一條線。
function initAndBind(clientClass, options) {if (options.debug === true) {logger.enable();}getCurrentHub().bindClient(new clientClass(options)); }獲取當(dāng)前的控制中心 Hub，再把 newBrowserClient() 的實(shí)例對象綁定在 Hub上。
getCurrentHub 函數(shù)
// 獲取當(dāng)前Hub 控制中心 function getCurrentHub() {// Get main carrier (global for every environment)var registry = getMainCarrier();// 如果沒有控制中心在載體上，或者它的版本是老版本，就設(shè)置新的。// If there's no hub, or its an old API, assign a new oneif (!hasHubOnCarrier(registry) || getHubFromCarrier(registry).isOlderThan(API_VERSION)) {setHubOnCarrier(registry, new Hub());}// node 才執(zhí)行// Prefer domains over global if they are there (applicable only to Node environment)if (isNodeEnv()) {return getHubFromActiveDomain(registry);}// 返回當(dāng)前控制中心來自載體上。// Return hub that lives on a global objectreturn getHubFromCarrier(registry); }衍生的函數(shù) getMainCarrier、getHubFromCarrier
function getMainCarrier() {// 載體 這里是window// 通過一系列new BrowerClient() 一系列的初始化// 掛載在 carrier.__SENTRY__ 已經(jīng)有了三個屬性，globalEventProcessors, hub, loggervar carrier = getGlobalObject();carrier.__SENTRY__ = carrier.__SENTRY__ || {hub: undefined,};return carrier; } // 獲取控制中心 hub 從載體上 function getHubFromCarrier(carrier) {// 已經(jīng)有了則返回，沒有則new Hubif (carrier && carrier.__SENTRY__ && carrier.__SENTRY__.hub) {return carrier.__SENTRY__.hub;}carrier.__SENTRY__ = carrier.__SENTRY__ || {};carrier.__SENTRY__.hub = new Hub();return carrier.__SENTRY__.hub; }bindClient 綁定客戶端在當(dāng)前控制中心上
Hub.prototype.bindClient = function (client) {// 獲取最后一個var top = this.getStackTop();// 把 new BrowerClient() 實(shí)例 綁定到top上top.client = client; }; Hub.prototype.getStackTop = function () {// 獲取最后一個return this._stack[this._stack.length - 1]; };小結(jié)2. 經(jīng)過一系列的繼承和初始化
再回過頭來看 initAndBind函數(shù)
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實(shí)例對象。筆者畫了一張圖表示，便于查看理解。
初始化完成后，再來看具體例子。 具體 captureMessage 函數(shù)的實(shí)現(xiàn)。
Sentry.captureMessage('Hello, 若川!');captureMessage 函數(shù)
通過之前的閱讀代碼，知道會最終會調(diào)用 Fetch接口，所以直接斷點(diǎn)調(diào)試即可，得出如下調(diào)用棧。 接下來描述調(diào)用棧的主要流程。
調(diào)用棧主要流程：
captureMessage
function captureMessage(message, level) {var syntheticException;try {throw new Error(message);}catch (exception) {syntheticException = exception;}// 調(diào)用 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 傳進(jìn)來的是 'captureMessage'// 把method除外的其他參數(shù)放到args數(shù)組中var args = [];for (var _i = 1; _i < arguments.length; _i++) {args[_i - 1] = arguments[_i];}// 獲取當(dāng)前控制中心 hubvar hub = getCurrentHub();// 有這個方法 把a(bǔ)rgs 數(shù)組展開，傳遞給 hub[method] 執(zhí)行if (hub && hub[method]) {// tslint:disable-next-line:no-unsafe-anyreturn 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 傳進(jìn)來的是 'captureMessage'// 把method除外的其他參數(shù)放到args數(shù)組中var _a;var args = [];for (var _i = 1; _i < arguments.length; _i++) {args[_i - 1] = arguments[_i];}var top = this.getStackTop();// 獲取控制中心的 hub，調(diào)用客戶端也就是new BrowerClient () 實(shí)例中繼承自 BaseClient 的 captureMessage 方法// 有這個方法 把a(bǔ)rgs 數(shù)組展開，傳遞給 hub[method] 執(zhí)行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; };最后會調(diào)用 _processEvent 也就是
=> BaseClient.prototype._processEvent
這個函數(shù)最終會調(diào)用
_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 最終發(fā)送了請求
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/1233referrerPolicy: (supportsReferrerPolicy() ? 'origin' : ''),};// global$2.fetch(this.url, defaultOptions) 使用fetch發(fā)送請求return this._buffer.add(global$2.fetch(this.url, defaultOptions).then(function (response) { return ({status: exports.Status.fromHttpCode(response.status),}); })); };看完 Ajax上報(bào) 主線，再看本文的另外一條主線 window.onerror 捕獲。
window.onerror 和 window.onunhandledrejection 捕獲 錯誤
例子：調(diào)用一個未申明的變量。
func();Promise 不捕獲錯誤
new Promise(() => {fun(); }) .then(res => {console.log('then'); })captureEvent
調(diào)用棧主要流程：
window.onerror
GlobalHandlers.prototype._installGlobalOnErrorHandler = function () {if (this._onErrorHandlerInstalled) {return;}var self = this; // tslint:disable-line:no-this-assignment// 瀏覽器中這里的 this._global. 就是windowthis._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-assignmentthis._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; };共同點(diǎn)：都會調(diào)用 currentHub.captureEvent
currentHub.captureEvent(event, {originalException: error, });=> Hub.prototype.captureEvent
最終又是調(diào)用 _invokeClient ，調(diào)用流程跟 captureMessage 類似，這里就不再贅述。
this._invokeClient('captureEvent')=> Hub.prototype._invokeClient
=> BaseClient.prototype.captureEvent
=> BaseClient.prototype._processEvent
=> BaseBackend.prototype.sendEvent
=> FetchTransport.prototype.sendEvent
最終同樣是調(diào)用了這個函數(shù)發(fā)送了請求。
可謂是殊途同歸，行文至此就基本已經(jīng)結(jié)束，最后總結(jié)一下。
總結(jié)
Sentry-JavaScript源碼高效利用了 JS的原型鏈機(jī)制?？芍^是驚艷，值得學(xué)習(xí)。
本文通過梳理前端錯誤監(jiān)控知識、介紹 sentry錯誤監(jiān)控原理、 sentry初始化、 Ajax上報(bào)、 window.onerror、window.onunhandledrejection幾個方面來學(xué)習(xí) sentry的源碼。還有很多細(xì)節(jié)和構(gòu)造函數(shù)沒有分析。
總共的構(gòu)造函數(shù)（類）有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。
這些構(gòu)造函數(shù)（類）中還有很多值得學(xué)習(xí)，比如同步的 Promise（SyncPromise）。 有興趣的讀者，可以看這一塊官方倉庫中采用 typescript寫的源碼SyncPromise，也可以看打包后出來未壓縮的代碼。
讀源碼比較耗費(fèi)時間，寫文章記錄下來更加費(fèi)時間（比如寫這篇文章跨度十幾天...），但收獲一般都比較大。
如果讀者發(fā)現(xiàn)有不妥或可改善之處，再或者哪里沒寫明白的地方，歡迎評論指出。另外覺得寫得不錯，對您有些許幫助，可以點(diǎn)贊、評論、轉(zhuǎn)發(fā)分享，也是對筆者的一種支持。萬分感謝。
推薦閱讀
知乎滴滴云：超詳細(xì)！搭建一個前端錯誤監(jiān)控系統(tǒng)
掘金B(yǎng)lackHole1：JavaScript集成Sentry
丁香園 開源的 Sentry 小程序 SDKsentry-miniapp
sentry官網(wǎng)
sentry-javascript倉庫
關(guān)于
作者：常以若川為名混跡于江湖。前端路上 | PPT愛好者 | 所知甚少，唯善學(xué)。
個人博客 http://lxchuan12.cn?使用?vuepress重構(gòu)了，閱讀體驗(yàn)可能更好些
https://github.com/lxchuan12/blog，相關(guān)源碼和資源都放在這里，求個 star^_^~
微信交流群，加我微信lxchuan12，注明來源，拉您進(jìn)前端視野交流群
下圖是公眾號二維碼：若川視野，一個可能比較有趣的前端開發(fā)類公眾號，目前前端內(nèi)容不多
往期文章
工作一年后，我有些感悟(寫于2017年)
高考七年后、工作三年后的感悟
面試官問：JS的繼承
學(xué)習(xí) jQuery 源碼整體架構(gòu)，打造屬于自己的 js 類庫
學(xué)習(xí)underscore源碼整體架構(gòu)，打造屬于自己的函數(shù)式編程類庫
學(xué)習(xí) lodash 源碼整體架構(gòu)，打造屬于自己的函數(shù)式編程類庫
由于公眾號限制外鏈，點(diǎn)擊閱讀原文，或許閱讀體驗(yàn)更佳，覺得文章不錯，可以點(diǎn)個在看呀^_^
總結(jié)
以上是生活随笔為你收集整理的学习 sentry 源码整体架构，打造属于自己的前端异常监控SDK的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（3073）：vue+eleme
- 下一篇： DirectX12_基础知识