学习 sentry 源码整体架构，打造属于自己的前端异常监控SDK

前言

这是学习源码整体架构第四篇。整体架构这词语好像有点大，姑且就算是源码整体结构吧，主要就是学习是代码整体结构，不深究其他不是主线的具体函数的实现。文章学习的是打包整合后的代码，不是实际仓库中的拆分的代码。

其余三篇分别是：

感兴趣的读者可以点击阅读。

导读
本文通过梳理前端错误监控知识、介绍 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')

最后 allIms和 loadedImgs对比即可找出图片资源未加载项目

Error事件捕获代码示例

1. window.addEventListener('error', function(e) {

2. console.log('捕获', e)

3. }, 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

1. window.onerror = function (message, source, lineno, colno, error) {

2. console.log('message, source, lineno, colno, error', message, source, lineno, colno, error);

3. }

参数：
message：错误信息（字符串）。可用于 HTML onerror=""处理程序中的 event。
source：发生错误的脚本 URL（字符串）
lineno：发生错误的行号（数字）
colno：发生错误的列号（数字）
error： Error对象（对象）

MDN unhandledrejection

当 Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件；这可能发生在 window 下，但也可能发生在 Worker 中。 这对于调试回退错误处理非常有用。

Sentry 源码可以搜索 global.onerror 定位到具体位置

1. GlobalHandlers.prototype._installGlobalOnErrorHandler = function () {

2. // 代码有删减

3. // 这里的 this._global 在浏览器中就是 window

4. this._oldOnErrorHandler = this._global.onerror;

5. this._global.onerror = function (msg, url, line, column, error) {}

6. // code ...

7. }

同样，可以搜索 global.onunhandledrejection 定位到具体位置

1. GlobalHandlers.prototype._installGlobalOnUnhandledRejectionHandler = function () {

2. // 代码有删减

3. this._oldOnUnhandledRejectionHandler = this._global.onunhandledrejection;

4. this._global.onunhandledrejection = function (e) {}

5. }

2.采用 Ajax上传

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

1. BrowserBackend.prototype._setupTransport = function () {

2. // 代码有删减

3. if (supportsFetch()) {

4. return new FetchTransport(transportOptions);

5. }

6. return new XHRTransport(transportOptions);

7. };

2.1 fetch

1. FetchTransport.prototype.sendEvent = function (event) {

2. var defaultOptions = {

3. body: JSON.stringify(event),

4. method: 'POST',

5. referrerPolicy: (supportsReferrerPolicy() ? 'origin' : ''),

6. };

7. return this._buffer.add(global$2.fetch(this.url, defaultOptions).then(function (response) { return ({

8. status: exports.Status.fromHttpCode(response.status),

9. }); }));

10. };

2.2 XMLHttpRequest

1. XHRTransport.prototype.sendEvent = function (event) {

2. var _this = this;

3. return this._buffer.add(new SyncPromise(function (resolve, reject) {

4. // 熟悉的 XMLHttpRequest

5. var request = new XMLHttpRequest();

6. request.onreadystatechange = function () {

7. if (request.readyState !== 4) {

8. return;

9. }

10. if (request.status === 200) {

11. resolve({

12. status: exports.Status.fromHttpCode(request.status),

13. });

14. }

15. reject(request);

16. };

17. request.open('POST', _this.url);

18. request.send(JSON.stringify(event));

19. }));

20. }

接下来主要通过Sentry初始化、如何 Ajax上报和 window.onerror、window.onunhandledrejection三条主线来学习源码。

如果看到这里，暂时不想关注后面的源码细节，直接看后文小结1和2的两张图。或者可以点赞或收藏这篇文章，后续想看了再看。

Sentry 源码入口和出口

1. var Sentry = (function(exports){

2. // code ...

3. var SDK_NAME = 'sentry.javascript.browser';

4. var SDK_VERSION = '5.7.1';

5. // code ...

6. // 省略了导出的Sentry的若干个方法和属性

7. // 只列出了如下几个

8. exports.SDK_NAME = SDK_NAME;

9. exports.SDK_VERSION = SDK_VERSION;

10. // 重点关注 captureMessage

11. exports.captureMessage = captureMessage;

12. // 重点关注 init

13. exports.init = init;

14. return exports;

15. }({}));

Sentry.init 初始化 之 init 函数

初始化

1. // 这里的dsn，是sentry.io网站会生成的。

2. Sentry.init({ dsn: 'xxx' });

1. // options 是 {dsn: '...'}

2. function init(options) {

3. // 如果options 是undefined，则赋值为 空对象

4. if (options === void 0) { options = {}; }

5. // 如果没传 defaultIntegrations 则赋值默认的

6. if (options.defaultIntegrations === undefined) {

7. options.defaultIntegrations = defaultIntegrations;

8. }

9. // 初始化语句

10. if (options.release === undefined) {

11. var window_1 = getGlobalObject();

12. // 这是给 sentry-webpack-plugin 插件提供的，webpack插件注入的变量。这里没用这个插件，所以这里不深究。

13. // This supports the variable that sentry-webpack-plugin injects

14. if (window_1.SENTRY_RELEASE && window_1.SENTRY_RELEASE.id) {

15. options.release = window_1.SENTRY_RELEASE.id;

16. }

17. }

18. // 初始化并且绑定

19. initAndBind(BrowserClient, options);

20. }

getGlobalObject、inNodeEnv 函数

很多地方用到这个函数 getGlobalObject。其实做的事情也比较简单，就是获取全局对象。浏览器中是 window。

1. /**

2. * 判断是否是node环境

3. * Checks whether we're in the Node.js or Browser environment

4. *

5. * @returns Answer to given question

6. */

7. function isNodeEnv() {

8. // tslint:disable:strict-type-predicates

9. return Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';

10. }

11. var fallbackGlobalObject = {};

12. /**

13. * Safely get global scope object

14. *

15. * @returns Global scope object

16. */

17. function getGlobalObject() {

18. return (isNodeEnv()

19. // 是 node 环境 赋值给 global

20. ? global

21. : typeof window !== 'undefined'

22. ? window

23. // 不是 window self 不是undefined 说明是 Web Worker 环境

24. : typeof self !== 'undefined'

25. ? self

26. // 都不是，赋值给空对象。

27. : fallbackGlobalObject);

继续看 initAndBind 函数

initAndBind 函数之 new BrowserClient(options)

1. function initAndBind(clientClass, options) {

2. // 这里没有开启debug模式，logger.enable() 这句不会执行

3. if (options.debug === true) {

4. logger.enable();

5. }

6. getCurrentHub().bindClient(new clientClass(options));

7. }

可以看出 initAndBind()，第一个参数是 BrowserClient 构造函数，第二个参数是初始化后的 options。 接着先看 构造函数 BrowserClient。 另一条线 getCurrentHub().bindClient() 先不看。

BrowserClient 构造函数

1. var BrowserClient = /** @class */ (function (_super) {

2. // `BrowserClient` 继承自`BaseClient`

3. __extends(BrowserClient, _super);

4. /**

5. * Creates a new Browser SDK instance.

6. *

7. * @param options Configuration options for this SDK.

8. */

9. function BrowserClient(options) {

10. if (options === void 0) { options = {}; }

11. // 把`BrowserBackend`，`options`传参给`BaseClient`调用。

12. return _super.call(this, BrowserBackend, options) || this;

13. }

14. return BrowserClient;

15. }(BaseClient));

从代码中可以看出： BrowserClient 继承自 BaseClient，并且把 BrowserBackend， options传参给 BaseClient调用。

先看 BrowserBackend，这里的 BaseClient，暂时不看。

看 BrowserBackend之前，先提一下继承、继承静态属性和方法。

__extends、extendStatics 打包代码实现的继承

未打包的源码是使用 ES6extends实现的。这是打包后的对 ES6的 extends的一种实现。

如果对继承还不是很熟悉的读者，可以参考我之前写的文章。面试官问：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__的判断。

1. // vuejs 源码：https://github.com/vuejs/vue/blob/dev/dist/vue.js#L526-L527

2. // can we use __proto__?

3. var hasProto = '__proto__' in {};

看完打包代码实现的继承，继续看 BrowserBackend 构造函数

BrowserBackend 构造函数 （浏览器后端）

1. var BrowserBackend = /** @class */ (function (_super) {

2. __extends(BrowserBackend, _super);

3. function BrowserBackend() {

4. return _super !== null && _super.apply(this, arguments) || this;

5. }

6. /**

7. * 设置请求

8. */

9. BrowserBackend.prototype._setupTransport = function () {

10. if (!this._options.dsn) {

11. // We return the noop transport here in case there is no Dsn.

12. // 没有设置dsn，调用BaseBackend.prototype._setupTransport 返回空函数

13. return _super.prototype._setupTransport.call(this);

14. }

15. var transportOptions = __assign({}, this._options.transportOptions, { dsn: this._options.dsn });

16. if (this._options.transport) {

17. return new this._options.transport(transportOptions);

18. }

19. // 支持Fetch则返回 FetchTransport 实例，否则返回 XHRTransport实例，

20. // 这两个构造函数具体代码在开头已有提到。

21. if (supportsFetch()) {

22. return new FetchTransport(transportOptions);

23. }

24. return new XHRTransport(transportOptions);

25. };

26. // code ...

27. return BrowserBackend;

28. }(BaseBackend));

BrowserBackend 又继承自 BaseBackend。

BaseBackend 构造函数 （基础后端）

1. /**

2. * This is the base implemention of a Backend.

3. * @hidden

4. */

5. var BaseBackend = /** @class */ (function () {

6. /** Creates a new backend instance. */

7. function BaseBackend(options) {

8. this._options = options;

9. if (!this._options.dsn) {

10. logger.warn('No DSN provided, backend will not do anything.');

11. }

12. // 调用设置请求函数

13. this._transport = this._setupTransport();

14. }

15. /**

16. * Sets up the transport so it can be used later to send requests.

17. * 设置发送请求空函数

18. */

19. BaseBackend.prototype._setupTransport = function () {

20. return new NoopTransport();

21. };

22. // code ...

23. BaseBackend.prototype.sendEvent = function (event) {

24. this._transport.sendEvent(event).then(null, function (reason) {

25. logger.error("Error while sending event: " + reason);

26. });

27. };

28. BaseBackend.prototype.getTransport = function () {

29. return this._transport;

30. };

31. return BaseBackend;

32. }());

通过一系列的继承后，回过头来看 BaseClient 构造函数。

BaseClient 构造函数（基础客户端）

1. var BaseClient = /** @class */ (function () {

2. /**

3. * Initializes this client instance.

4. *

5. * @param backendClass A constructor function to create the backend.

6. * @param options Options for the client.

7. */

8. function BaseClient(backendClass, options) {

9. /** Array of used integrations. */

10. this._integrations = {};

11. /** Is the client still processing a call? */

12. this._processing = false;

13. this._backend = new backendClass(options);

14. this._options = options;

15. if (options.dsn) {

16. this._dsn = new Dsn(options.dsn);

17. }

18. if (this._isEnabled()) {

19. this._integrations = setupIntegrations(this._options);

20. }

21. }

22. // code ...

23. return BaseClient;

24. }());

小结1. new BrowerClient 经过一系列的继承和初始化

可以输出下具体 newclientClass(options)之后的结果：

1. function initAndBind(clientClass, options) {

2. if (options.debug === true) {

3. logger.enable();

4. }

5. var client = new clientClass(options);

6. console.log('new clientClass(options)', client);

7. getCurrentHub().bindClient(client);

8. // 原来的代码

9. // getCurrentHub().bindClient(new clientClass(options));

10. }

最终输出得到这样的数据。我画了一张图表示。重点关注的原型链用颜色标注了，其他部分收缩了。

initAndBind 函数之 getCurrentHub().bindClient()

继续看 initAndBind 的另一条线。

1. function initAndBind(clientClass, options) {

2. if (options.debug === true) {

3. logger.enable();

4. }

5. getCurrentHub().bindClient(new clientClass(options));

6. }

获取当前的控制中心 Hub，再把 newBrowserClient() 的实例对象绑定在 Hub上。

getCurrentHub 函数

1. // 获取当前Hub 控制中心

2. function getCurrentHub() {

3. // Get main carrier (global for every environment)

4. var registry = getMainCarrier();

5. // 如果没有控制中心在载体上，或者它的版本是老版本，就设置新的。

6. // If there's no hub, or its an old API, assign a new one

7. if (!hasHubOnCarrier(registry) || getHubFromCarrier(registry).isOlderThan(API_VERSION)) {

8. setHubOnCarrier(registry, new Hub());

9. }

10. // node 才执行

11. // Prefer domains over global if they are there (applicable only to Node environment)

12. if (isNodeEnv()) {

13. return getHubFromActiveDomain(registry);

14. }

15. // 返回当前控制中心来自载体上。

16. // Return hub that lives on a global object

17. return getHubFromCarrier(registry);

18. }

衍生的函数 getMainCarrier、getHubFromCarrier

1. function getMainCarrier() {

2. // 载体 这里是window

3. // 通过一系列new BrowerClient() 一系列的初始化

4. // 挂载在 carrier.__SENTRY__ 已经有了三个属性，globalEventProcessors, hub, logger

5. var carrier = getGlobalObject();

6. carrier.__SENTRY__ = carrier.__SENTRY__ || {

7. hub: undefined,

8. };

9. return carrier;

10. }

1. // 获取控制中心 hub 从载体上

2. function getHubFromCarrier(carrier) {

3. // 已经有了则返回，没有则new Hub

4. if (carrier && carrier.__SENTRY__ && carrier.__SENTRY__.hub) {

5. return carrier.__SENTRY__.hub;

6. }

7. carrier.__SENTRY__ = carrier.__SENTRY__ || {};

8. carrier.__SENTRY__.hub = new Hub();

9. return carrier.__SENTRY__.hub;

10. }

bindClient 绑定客户端在当前控制中心上

1. Hub.prototype.bindClient = function (client) {

2. // 获取最后一个

3. var top = this.getStackTop();

4. // 把 new BrowerClient() 实例 绑定到top上

5. top.client = client;

6. };

1. Hub.prototype.getStackTop = function () {

2. // 获取最后一个

3. return this._stack[this._stack.length - 1];

4. };

小结2. 经过一系列的继承和初始化

再回过头来看 initAndBind函数

1. function initAndBind(clientClass, options) {

2. if (options.debug === true) {

3. logger.enable();

4. }

5. var client = new clientClass(options);

6. console.log(client, options, 'client, options');

7. var currentHub = getCurrentHub();

8. currentHub.bindClient(client);

9. console.log('currentHub', currentHub);

10. // 源代码

11. // getCurrentHub().bindClient(new clientClass(options));

12. }

最终会得到这样的 Hub实例对象。笔者画了一张图表示，便于查看理解。

初始化完成后，再来看具体例子。 具体 captureMessage 函数的实现。

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

captureMessage 函数

通过之前的阅读代码，知道会最终会调用 Fetch接口，所以直接断点调试即可，得出如下调用栈。 接下来描述调用栈的主要流程。

调用栈主要流程：

captureMessage

1. function captureMessage(message, level) {

2. var syntheticException;

3. try {

4. throw new Error(message);

5. }

6. catch (exception) {

7. syntheticException = exception;

8. }

9. // 调用 callOnHub 方法

10. return callOnHub('captureMessage', message, level, {

11. originalException: message,

12. syntheticException: syntheticException,

13. });

14. }

=> callOnHub

1. /**

2. * This calls a function on the current hub.

3. * @param method function to call on hub.

4. * @param args to pass to function.

5. */

6. function callOnHub(method) {

7. // 这里method 传进来的是 'captureMessage'

8. // 把method除外的其他参数放到args数组中

9. var args = [];

10. for (var _i = 1; _i < arguments.length; _i++) {

11. args[_i - 1] = arguments[_i];

12. }

13. // 获取当前控制中心 hub

14. var hub = getCurrentHub();

15. // 有这个方法 把args 数组展开，传递给 hub[method] 执行

16. if (hub && hub[method]) {

17. // tslint:disable-next-line:no-unsafe-any

18. return hub[method].apply(hub, __spread(args));

19. }

20. throw new Error("No hub defined or " + method + " was not found on the hub, please open a bug report.");

21. }

=> Hub.prototype.captureMessage

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

1. Hub.prototype.captureMessage = function (message, level, hint) {

2. var eventId = (this._lastEventId = uuid4());

3. var finalHint = hint;

4. // 代码有删减

5. this._invokeClient('captureMessage', message, level, __assign({}, finalHint, { event_id: eventId }));

6. return eventId;

7. };

=> Hub.prototype._invokeClient

1. /**

2. * Internal helper function to call a method on the top client if it exists.

3. *

4. * @param method The method to call on the client.

5. * @param args Arguments to pass to the client function.

6. */

7. Hub.prototype._invokeClient = function (method) {

8. // 同样：这里method 传进来的是 'captureMessage'

9. // 把method除外的其他参数放到args数组中

10. var _a;

11. var args = [];

12. for (var _i = 1; _i < arguments.length; _i++) {

13. args[_i - 1] = arguments[_i];

14. }

15. var top = this.getStackTop();

16. // 获取控制中心的 hub，调用客户端也就是new BrowerClient () 实例中继承自 BaseClient 的 captureMessage 方法

17. // 有这个方法 把args 数组展开，传递给 hub[method] 执行

18. if (top && top.client && top.client[method]) {

19. (_a = top.client)[method].apply(_a, __spread(args, [top.scope]));

20. }

21. };

=> BaseClient.prototype.captureMessage

1. BaseClient.prototype.captureMessage = function (message, level, hint, scope) {

2. var _this = this;

3. var eventId = hint && hint.event_id;

4. this._processing = true;

5. var promisedEvent = isPrimitive(message)

6. ? this._getBackend().eventFromMessage("" + message, level, hint)

7. : this._getBackend().eventFromException(message, hint);

8. // 代码有删减

9. promisedEvent

10. .then(function (event) { return _this._processEvent(event, hint, scope); })

11. // 代码有删减

12. return eventId;

13. };

最后会调用 _processEvent 也就是

=> BaseClient.prototype._processEvent

这个函数最终会调用

1. _this._getBackend().sendEvent(finalEvent);

也就是

=> BaseBackend.prototype.sendEvent

1. BaseBackend.prototype.sendEvent = function (event) {

2. this._transport.sendEvent(event).then(null, function (reason) {

3. logger.error("Error while sending event: " + reason);

4. });

5. };

=> FetchTransport.prototype.sendEvent 最终发送了请求

FetchTransport.prototype.sendEvent

1. FetchTransport.prototype.sendEvent = function (event) {

2. var defaultOptions = {

3. body: JSON.stringify(event),

4. method: 'POST',

5. // Despite all stars in the sky saying that Edge supports old draft syntax, aka 'never', 'always', 'origin' and 'default

6. // https://caniuse.com/#feat=referrer-policy

7. // It doesn't. And it throw exception instead of ignoring this parameter...

8. // REF: https://github.com/getsentry/raven-js/issues/1233

9. referrerPolicy: (supportsReferrerPolicy() ? 'origin' : ''),

10. };

11. // global$2.fetch(this.url, defaultOptions) 使用fetch发送请求

12. return this._buffer.add(global$2.fetch(this.url, defaultOptions).then(function (response) { return ({

13. status: exports.Status.fromHttpCode(response.status),

14. }); }));

15. };

看完 Ajax上报 主线，再看本文的另外一条主线 window.onerror 捕获。

window.onerror 和 window.onunhandledrejection 捕获 错误

例子：调用一个未申明的变量。

1. func();

Promise 不捕获错误

1. new Promise(() => {

2. fun();

3. })

4. .then(res => {

5. console.log('then');

6. })

captureEvent

调用栈主要流程：

window.onerror

1. GlobalHandlers.prototype._installGlobalOnErrorHandler = function () {

2. if (this._onErrorHandlerInstalled) {

3. return;

4. }

5. var self = this; // tslint:disable-line:no-this-assignment

6. // 浏览器中这里的 this._global. 就是window

7. this._oldOnErrorHandler = this._global.onerror;

8. this._global.onerror = function (msg, url, line, column, error) {

9. var currentHub = getCurrentHub();

10. // 代码有删减

11. currentHub.captureEvent(event, {

12. originalException: error,

13. });

14. if (self._oldOnErrorHandler) {

15. return self._oldOnErrorHandler.apply(this, arguments);

16. }

17. return false;

18. };

19. this._onErrorHandlerInstalled = true;

20. };

window.onunhandledrejection

1. GlobalHandlers.prototype._installGlobalOnUnhandledRejectionHandler = function () {

2. if (this._onUnhandledRejectionHandlerInstalled) {

3. return;

4. }

5. var self = this; // tslint:disable-line:no-this-assignment

6. this._oldOnUnhandledRejectionHandler = this._global.onunhandledrejection;

7. this._global.onunhandledrejection = function (e) {

8. // 代码有删减

9. var currentHub = getCurrentHub();

10. currentHub.captureEvent(event, {

11. originalException: error,

12. });

13. if (self._oldOnUnhandledRejectionHandler) {

14. return self._oldOnUnhandledRejectionHandler.apply(this, arguments);

15. }

16. return false;

17. };

18. this._onUnhandledRejectionHandlerInstalled = true;

19. };

共同点：都会调用 currentHub.captureEvent

1. currentHub.captureEvent(event, {

2. originalException: error,

3. });

=> Hub.prototype.captureEvent

最终又是调用 _invokeClient ，调用流程跟 captureMessage 类似，这里就不再赘述。

1. 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，注明来源，拉您进前端视野交流群

下图是公众号二维码：若川视野，一个可能比较有趣的前端开发类公众号，目前前端内容不多

往期文章

由于公众号限制外链，点击阅读原文，或许阅读体验更佳，觉得文章不错，可以点个在看呀^_^