學習 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()獲取網頁圖片加載錯誤

varallImgs=document.getElementsByTagName('image')

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

最后 allImsloadedImgs對比即可找出圖片資源未加載項目

Error事件捕獲代碼示例

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

上報錯誤的基本原理

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

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

Image上報錯誤方式: (newImage()).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:發生錯誤的列號(數字)
errorError對象(對象)

MDN unhandledrejection

Promisereject 且沒有 reject 處理器的時候,會觸發 unhandledrejection 事件;這可能發生在 window 下,但也可能發生在 Worker 中。 這對于調試回退錯誤處理非常有用。

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上報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;// 重點關注 captureMessageexports.captureMessage = captureMessage;// 重點關注 initexports.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 injectsif (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-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 環境 賦值給 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,并且把 BrowserBackendoptions傳參給 BaseClient調用。

先看 BrowserBackend,這里的 BaseClient,暫時不看。

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

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

未打包的源碼是使用 ES6extends實現的。這是打包后的對 ES6extends的一種實現。

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

  1. // 繼承靜態方法和屬性

  2. var extendStatics = function(d, b) {

  3. // 如果支持 Object.setPrototypeOf 這個函數,直接使用

  4. // 不支持,則使用原型__proto__ 屬性,

  5. // 如何還不支持(但有可能__proto__也不支持,畢竟是瀏覽器特有的方法。)

  6. // 則使用for in 遍歷原型鏈上的屬性,從而達到繼承的目的。

  7. extendStatics = Object.setPrototypeOf ||

  8. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||

  9. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };

  10. return extendStatics(d, b);

  11. };

  12. function __extends(d, b) {

  13. extendStatics(d, b);

  14. // 申明構造函數__ 并且把 d 賦值給 constructor

  15. function __() { this.constructor = d; }

  16. // (__.prototype = b.prototype, new __()) 這種逗號形式的代碼,最終返回是后者,也就是 new __()

  17. // 比如 (typeof null, 1) 返回的是1

  18. // 如果 b === null 用Object.create(b) 創建 ,也就是一個不含原型鏈等信息的空對象 {}

  19. // 否則使用 new __() 返回

  20. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

  21. }

不得不說這打包后的代碼十分嚴謹,上面說的我的文章?面試官問: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 經過一系列的繼承和初始化

可以輸出下具體 newclientClass(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,再把 newBrowserClient() 的實例對象綁定在 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 oneif (!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 objectreturn getHubFromCarrier(registry);
}

衍生的函數 getMainCarrier、getHubFromCarrier

function getMainCarrier() {// 載體 這里是window// 通過一系列new BrowerClient() 一系列的初始化// 掛載在  carrier.__SENTRY__ 已經有了三個屬性,globalEventProcessors, hub, loggervar carrier = getGlobalObject();carrier.__SENTRY__ = carrier.__SENTRY__ || {hub: undefined,};return carrier;
}
// 獲取控制中心 hub 從載體上
function getHubFromCarrier(carrier) {// 已經有了則返回,沒有則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 綁定客戶端在當前控制中心上

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];}// 獲取當前控制中心 hubvar hub = getCurrentHub();// 有這個方法 把args 數組展開,傳遞給 hub[method] 執行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 傳進來的是 '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/1233referrerPolicy: (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.  就是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;
};

共同點:都會調用 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,也可以看打包后出來未壓縮的代碼。

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

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

推薦閱讀

知乎滴滴云:超詳細!搭建一個前端錯誤監控系統
掘金BlackHole1:JavaScript集成Sentry
丁香園 開源的 Sentry 小程序 SDKsentry-miniapp
sentry官網
sentry-javascript倉庫

關于

作者:常以若川為名混跡于江湖。前端路上 | PPT愛好者 | 所知甚少,唯善學。
個人博客 http://lxchuan12.cn?使用?vuepress重構了,閱讀體驗可能更好些
https://github.com/lxchuan12/blog,相關源碼和資源都放在這里,求個 star^_^~

微信交流群,加我微信lxchuan12,注明來源,拉您進前端視野交流群

下圖是公眾號二維碼:若川視野,一個可能比較有趣的前端開發類公眾號,目前前端內容不多

往期文章

工作一年后,我有些感悟(寫于2017年)

高考七年后、工作三年后的感悟

面試官問:JS的繼承

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

學習underscore源碼整體架構,打造屬于自己的函數式編程類庫

學習 lodash 源碼整體架構,打造屬于自己的函數式編程類庫

由于公眾號限制外鏈,點擊閱讀原文,或許閱讀體驗更佳,覺得文章不錯,可以點個在看呀^_^

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/276505.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/276505.shtml
英文地址,請注明出處:http://en.pswp.cn/news/276505.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

巴西龜吃什么

1、活蝦&#xff0c;哈哈&#xff0c;巴西龜最喜歡的食物&#xff0c;超市很多雞尾蝦買的&#xff0c;就那種&#xff0c;要活的&#xff0c;鍛煉它們的天性&#xff0c;一次一只可以吃一、兩天&#xff1b; 2、蚶子&#xff0c;貝殼類&#xff0c;活的&#xff0c;整個扔進去&…

綁定dictionary 給定關鍵字不再字典中_VBA代碼集錦-利用字典做兩列數據的對比并對齊...

源數據&#xff1a;代碼&#xff1a;Sub 對比()Dim arr, brr, crrDim i, j, n, lastrowA, lastrowB As Integer建立字典對象Set d CreateObject("scripting.dictionary")獲取數據區域最后一行的行數lastrowA Sheets("對比對齊兩列數據").Cells(Rows.Coun…

linux啟動時掛載rootfs的幾種方式 .

轉載鏈接&#xff1a;http://blog.csdn.net/zuokong/article/details/9022707 根文件系統&#xff08;在樣例錯誤消息中名為 rootfs&#xff09;是 Linux 的最基本的組件。根文件系統包含支持完整的 Linux 系統所需的所有內容。它包含所有應用程序、配置、設備、數據等 Linux 中…

PHP 手冊

by:Mehdi AchourFriedhelm BetzAntony DovgalNuno LopesHannes MagnussonGeorg RichterDamien SeguyJakub Vrana其他貢獻者2018-06-19Edited By: Peter Cowburn中文翻譯人員&#xff1a;肖盛文洪建家穆少磊宋琪黃嘯宇王遠之肖理達喬楚戴劼褚兆瑋周夢康袁玉強段小強© 1997-…

前端使用puppeteer 爬蟲生成《React.js 小書》PDF并合并

前端也可以爬蟲&#xff0c;寫于2018年08月29日&#xff0c;現在發布到微信公眾號申明原創。掘金若川 本文章鏈接&#xff1a;https://juejin.im/post/5b86732451882542af1c80821、 puppeteer 是什么&#xff1f;puppeteer: Google 官方出品的 headless Chrome node 庫puppetee…

蜘蛛與佛的故事

最近閉關,空面四壁,窗外層巒疊嶂,窗臺上只有一盆花每日陪著我&#xff0c;朋友們都說我要成佛了,想想也是&#xff01; 于是在閉關即將結束的時候找了一篇佛的故事送給自己&#xff0c;希望自己能夠頓悟一些"禪"機。 從前&#xff0c;有一座圓音寺&#xff0c;每天都…

信息安全管理與評估_計算機工程學院教師參加“信息安全管理與評估賽項”說明會...

看了就要關注我&#xff0c;喵嗚~2019年3月15日下午&#xff0c;2019年陜西省高等職業院校技能大賽“信息安全管理與評估賽項說明會”在咸陽職業技術學院舉行。出席本次會儀的有咸陽職業技術學院教務處長楊新宇、神州數碼范永強經理、神州數碼信息安全工程師高峰和各院校指導教…

haproxy概念和負載均衡

https://pan.baidu.com/s/1Sq2aJ35zrW2Xn7Th9j7oOA //軟件百度網盤連接 在80.100虛擬機上 systemctl stop firewalld //關閉防火墻 setenforce 0 //關閉監控 yum install lrz* -y //安裝上傳軟件 tar xf haproxy-1.5.15.tar.gz -C /opt/ //解壓壓縮包到/opt/ cd /op…

PHP用戶注冊郵箱驗證激活帳號

轉載鏈接&#xff1a;http://www.helloweba.com/view-blog-228.html 本文將結合實例&#xff0c;講解如何使用PHPMysql完成注冊帳號、發送激活郵件、驗證激活帳號、處理URL鏈接過期的功能。 業務流程 1、用戶提交注冊信息。 2、寫入數據庫&#xff0c;此時帳號狀態未激活。 …

知乎問答:一年內的前端看不懂前端框架源碼怎么辦?

知乎問答&#xff1a;一年內的前端看不懂前端框架源碼怎么辦&#xff1f;以下是我的回答&#xff0c;閱讀量 1000。現在轉載到微信公眾號中。鏈接&#xff1a;https://www.zhihu.com/question/350289336/answer/910970733其他回答的已經很好了。剛好最近在寫學習源碼整體架構系…

幫自己發個求職簡歷

幫自己發個求職簡歷 發個求職信息。本人擅長Web開發&#xff0c;尤其擅長Flex&#xff0c;愿從事Web開發&#xff0c;最好是Web前端開發&#xff0c;下面是我的詳細個人簡歷&#xff1a; 個人信息&#xff1a; 姓名&#xff1a;伍國耀 年齡&#xff1a;23 性別&#xff1a;男 專…

python函數 global_**Python的函數參數傳遞 和 global

函數的參數到底是傳遞的一份復制的值&#xff0c;還是對內存的引用&#xff1f;我們看下面一段代碼&#xff1a;a []def fun(x):x.append(1)fun(a)print(a)想想一下&#xff1a;如果傳遞的是一份復制的值&#xff0c;那么列表a應該是不會變化的&#xff0c;還是空列表&#xf…

冷啟動問題:如何構建你的機器學習組合?

作為即將告別大學的機器學習畢業狗的你&#xff0c;會不會有種迷茫的感覺&#xff1f;你知道 HR 最看重的是什么嗎&#xff1f;在求職季到來之前&#xff0c;畢業狗要怎么做&#xff0c;才能受到 HR 的青睞、拿到心儀的 Offer 呢&#xff1f;負責幫助應屆生找到機器學習工作的 …

JavaScript 對象所有API解析【2020版】

寫于 2017年08月20日&#xff0c;雖然是2017年寫的文章&#xff0c;但現在即將2020年依舊不過時&#xff0c;現在補充了2019年新增的ES10 Object.fromEntries()。發到公眾號申明原創。若川順便在此提前祝大家&#xff1a;2020年更上一層樓。近日發現有挺多人對對象基礎API不熟悉…

javascript操作符之new 也瘋狂 (2)

JavaScript本是一種基于原形的&#xff08;prototypal&#xff09;語言&#xff0c;但它的“new”操作符看起來有點像經典語言。這迷惑了廣大程序員們&#xff0c;并導致了很多使用上的問題。 在JavaScript中&#xff0c;不要用到new Object()這種操作&#xff0c;該用{ }來代替…

python中if語句缺省else_9_【Python學習分享文章】_if(條件語句)

【Python學習分享文章】_if(條件語句)_logicalJudgement介紹及基本操作綜述計算機的“條件語句”和生活中的“條件成立”是不一樣的。一個生活中的例子如果被計算機執行則是如下段子&#xff1a;老婆讓程序員老公去買蘋果&#xff0c;說&#xff1a;“去水果店買5個蘋果&#x…

PHP生成各種驗證碼和Ajax驗證

轉載鏈接&#xff1a;http://www.helloweba.com/view-blog-191.html 驗證碼在WEB應用中非常重要&#xff0c;通常用來防止用戶惡意提交表單&#xff0c;如惡意注冊和登錄、論壇惡意灌水等。本文將通過實例講解使用PHP生成各種常見的驗證碼包括數字驗證碼、數字字母驗證碼、中文…

若川的2019年度總結,波瀾不驚

從2014年開始寫年度總結至今已經六個年頭了。正如孔子所說&#xff1a;逝者如斯夫&#xff0c;不舍晝夜。2019年的年度總結寫得比較晚&#xff0c;都快農歷新年了&#xff0c;此刻在家里繼續寫完這篇文章。往年基本是元旦之后幾天就寫完了。我的年度總結盡量寫得非技術人員也能…

如何正確選擇倉儲物流供應商?

如何正確選擇倉儲物流供應商&#xff1f; 以前有做電商的朋友向我咨詢過怎么去選擇優質的倉儲物流供應商&#xff1f;有哪些能做作為關鍵問題進行參考。作為一個優秀的合作伙伴是可以為客戶提供超乎預期的服務的&#xff0c;上海維佳供應鏈服務專業提供物流外包解決倉儲物流供應…

在虛機上安裝WIN2003

Moss2-turn on-WM;SJY;SJYM;666666備注&#xff1a;計算機名在網絡上必須是唯一的。姓名&#xff1a;WP; 單位&#xff1a;SJY; 計算機名稱&#xff1a;SJYP; 密碼&#xff1a;666666server 2003 R2版 MDGJK-PF6YQ-PD8DJ-RFQVM-7WKWG在“網絡設置”頁面上&#xff0c;單擊“典型…