From 09718baa8c53bf2c34fb722f46a0f1dffa40db53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= Date: Tue, 19 May 2020 14:48:45 +0200 Subject: [PATCH 1/5] feat: TryCatch Integration options --- .../browser/src/integrations/breadcrumbs.ts | 6 +- packages/browser/src/integrations/trycatch.ts | 111 +++++++++++------- 2 files changed, 74 insertions(+), 43 deletions(-) diff --git a/packages/browser/src/integrations/breadcrumbs.ts b/packages/browser/src/integrations/breadcrumbs.ts index 182789cf73aa..754361f070a7 100644 --- a/packages/browser/src/integrations/breadcrumbs.ts +++ b/packages/browser/src/integrations/breadcrumbs.ts @@ -25,7 +25,7 @@ export interface SentryWrappedXMLHttpRequest extends XMLHttpRequest { } /** JSDoc */ -interface BreadcrumbIntegrations { +interface BreadcrumbsOptions { console?: boolean; dom?: boolean; fetch?: boolean; @@ -50,12 +50,12 @@ export class Breadcrumbs implements Integration { public static id: string = 'Breadcrumbs'; /** JSDoc */ - private readonly _options: BreadcrumbIntegrations; + private readonly _options: BreadcrumbsOptions; /** * @inheritDoc */ - public constructor(options?: BreadcrumbIntegrations) { + public constructor(options?: BreadcrumbsOptions) { this._options = { console: true, dom: true, diff --git a/packages/browser/src/integrations/trycatch.ts b/packages/browser/src/integrations/trycatch.ts index 13e6f99ac523..289653fa2828 100644 --- a/packages/browser/src/integrations/trycatch.ts +++ b/packages/browser/src/integrations/trycatch.ts @@ -3,13 +3,50 @@ import { fill, getFunctionName, getGlobalObject } from '@sentry/utils'; import { wrap } from '../helpers'; +const DEFAULT_EVENT_TARGET = [ + 'EventTarget', + 'Window', + 'Node', + 'ApplicationCache', + 'AudioTrackList', + 'ChannelMergerNode', + 'CryptoOperation', + 'EventSource', + 'FileReader', + 'HTMLUnknownElement', + 'IDBDatabase', + 'IDBRequest', + 'IDBTransaction', + 'KeyOperation', + 'MediaController', + 'MessagePort', + 'ModalWindow', + 'Notification', + 'SVGElementInstance', + 'Screen', + 'TextTrack', + 'TextTrackCue', + 'TextTrackList', + 'WebSocket', + 'WebSocketWorker', + 'Worker', + 'XMLHttpRequest', + 'XMLHttpRequestEventTarget', + 'XMLHttpRequestUpload', +]; + type XMLHttpRequestProp = 'onload' | 'onerror' | 'onprogress' | 'onreadystatechange'; +interface TryCatchOptions { + setTimeout?: boolean; + setInterval?: boolean; + requestAnimationFrame?: boolean; + XMLHttpRequest?: boolean; + eventTarget: boolean | string[]; +} + /** Wrap timer functions and event targets to catch errors and provide better meta data */ export class TryCatch implements Integration { - /** JSDoc */ - private _ignoreOnError: number = 0; - /** * @inheritDoc */ @@ -20,6 +57,23 @@ export class TryCatch implements Integration { */ public static id: string = 'TryCatch'; + /** JSDoc */ + private readonly _options: TryCatchOptions; + + /** + * @inheritDoc + */ + public constructor(options?: TryCatchOptions) { + this._options = { + setTimeout: true, + setInterval: true, + requestAnimationFrame: true, + XMLHttpRequest: true, + eventTarget: true, + ...options, + }; + } + /** JSDoc */ private _wrapTimeFunction(original: () => void): () => number { return function(this: any, ...args: any[]): number { @@ -170,48 +224,25 @@ export class TryCatch implements Integration { * and provide better metadata. */ public setupOnce(): void { - this._ignoreOnError = this._ignoreOnError; - const global = getGlobalObject(); - fill(global, 'setTimeout', this._wrapTimeFunction.bind(this)); - fill(global, 'setInterval', this._wrapTimeFunction.bind(this)); - fill(global, 'requestAnimationFrame', this._wrapRAF.bind(this)); + if (this._options.setTimeout) { + fill(global, 'setTimeout', this._wrapTimeFunction.bind(this)); + } + if (this._options.setInterval) { + fill(global, 'setInterval', this._wrapTimeFunction.bind(this)); + } + if (this._options.requestAnimationFrame) { + fill(global, 'requestAnimationFrame', this._wrapRAF.bind(this)); + } - if ('XMLHttpRequest' in global) { + if (this._options.XMLHttpRequest && 'XMLHttpRequest' in global) { fill(XMLHttpRequest.prototype, 'send', this._wrapXHR.bind(this)); } - [ - 'EventTarget', - 'Window', - 'Node', - 'ApplicationCache', - 'AudioTrackList', - 'ChannelMergerNode', - 'CryptoOperation', - 'EventSource', - 'FileReader', - 'HTMLUnknownElement', - 'IDBDatabase', - 'IDBRequest', - 'IDBTransaction', - 'KeyOperation', - 'MediaController', - 'MessagePort', - 'ModalWindow', - 'Notification', - 'SVGElementInstance', - 'Screen', - 'TextTrack', - 'TextTrackCue', - 'TextTrackList', - 'WebSocket', - 'WebSocketWorker', - 'Worker', - 'XMLHttpRequest', - 'XMLHttpRequestEventTarget', - 'XMLHttpRequestUpload', - ].forEach(this._wrapEventTarget.bind(this)); + if (this._options.eventTarget) { + const eventTarget = Array.isArray(this._options.eventTarget) ? this._options.eventTarget : DEFAULT_EVENT_TARGET; + eventTarget.forEach(this._wrapEventTarget.bind(this)); + } } } From d7789d8cb7d879982ff34cda48483a89c235fc5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= Date: Tue, 19 May 2020 14:52:00 +0200 Subject: [PATCH 2/5] Use for options types --- packages/browser/src/integrations/breadcrumbs.ts | 14 +++++++------- packages/browser/src/integrations/trycatch.ts | 10 +++++----- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/browser/src/integrations/breadcrumbs.ts b/packages/browser/src/integrations/breadcrumbs.ts index 754361f070a7..528baa92df41 100644 --- a/packages/browser/src/integrations/breadcrumbs.ts +++ b/packages/browser/src/integrations/breadcrumbs.ts @@ -26,12 +26,12 @@ export interface SentryWrappedXMLHttpRequest extends XMLHttpRequest { /** JSDoc */ interface BreadcrumbsOptions { - console?: boolean; - dom?: boolean; - fetch?: boolean; - history?: boolean; - sentry?: boolean; - xhr?: boolean; + console: boolean; + dom: boolean; + fetch: boolean; + history: boolean; + sentry: boolean; + xhr: boolean; } /** @@ -55,7 +55,7 @@ export class Breadcrumbs implements Integration { /** * @inheritDoc */ - public constructor(options?: BreadcrumbsOptions) { + public constructor(options?: Partial) { this._options = { console: true, dom: true, diff --git a/packages/browser/src/integrations/trycatch.ts b/packages/browser/src/integrations/trycatch.ts index 289653fa2828..88f202a04928 100644 --- a/packages/browser/src/integrations/trycatch.ts +++ b/packages/browser/src/integrations/trycatch.ts @@ -38,10 +38,10 @@ const DEFAULT_EVENT_TARGET = [ type XMLHttpRequestProp = 'onload' | 'onerror' | 'onprogress' | 'onreadystatechange'; interface TryCatchOptions { - setTimeout?: boolean; - setInterval?: boolean; - requestAnimationFrame?: boolean; - XMLHttpRequest?: boolean; + setTimeout: boolean; + setInterval: boolean; + requestAnimationFrame: boolean; + XMLHttpRequest: boolean; eventTarget: boolean | string[]; } @@ -63,7 +63,7 @@ export class TryCatch implements Integration { /** * @inheritDoc */ - public constructor(options?: TryCatchOptions) { + public constructor(options?: Partial) { this._options = { setTimeout: true, setInterval: true, From a062703f11c5bcd104df09ec0b8c0f51502bddbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= Date: Tue, 19 May 2020 14:53:04 +0200 Subject: [PATCH 3/5] Linter plz --- packages/browser/src/integrations/trycatch.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/browser/src/integrations/trycatch.ts b/packages/browser/src/integrations/trycatch.ts index 88f202a04928..15268000d044 100644 --- a/packages/browser/src/integrations/trycatch.ts +++ b/packages/browser/src/integrations/trycatch.ts @@ -37,9 +37,10 @@ const DEFAULT_EVENT_TARGET = [ type XMLHttpRequestProp = 'onload' | 'onerror' | 'onprogress' | 'onreadystatechange'; +/** JSDoc */ interface TryCatchOptions { - setTimeout: boolean; setInterval: boolean; + setTimeout: boolean; requestAnimationFrame: boolean; XMLHttpRequest: boolean; eventTarget: boolean | string[]; @@ -65,8 +66,8 @@ export class TryCatch implements Integration { */ public constructor(options?: Partial) { this._options = { - setTimeout: true, setInterval: true, + setTimeout: true, requestAnimationFrame: true, XMLHttpRequest: true, eventTarget: true, @@ -226,12 +227,12 @@ export class TryCatch implements Integration { public setupOnce(): void { const global = getGlobalObject(); - if (this._options.setTimeout) { - fill(global, 'setTimeout', this._wrapTimeFunction.bind(this)); - } if (this._options.setInterval) { fill(global, 'setInterval', this._wrapTimeFunction.bind(this)); } + if (this._options.setTimeout) { + fill(global, 'setTimeout', this._wrapTimeFunction.bind(this)); + } if (this._options.requestAnimationFrame) { fill(global, 'requestAnimationFrame', this._wrapRAF.bind(this)); } From 0ab6f81004f96a7f249dcc06c62a8c4c7f361cfd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= Date: Tue, 19 May 2020 14:56:08 +0200 Subject: [PATCH 4/5] X is before e, sure --- packages/browser/src/integrations/trycatch.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/browser/src/integrations/trycatch.ts b/packages/browser/src/integrations/trycatch.ts index 15268000d044..8c60cdcf0cec 100644 --- a/packages/browser/src/integrations/trycatch.ts +++ b/packages/browser/src/integrations/trycatch.ts @@ -39,8 +39,8 @@ type XMLHttpRequestProp = 'onload' | 'onerror' | 'onprogress' | 'onreadystatecha /** JSDoc */ interface TryCatchOptions { - setInterval: boolean; setTimeout: boolean; + setInterval: boolean; requestAnimationFrame: boolean; XMLHttpRequest: boolean; eventTarget: boolean | string[]; @@ -66,11 +66,11 @@ export class TryCatch implements Integration { */ public constructor(options?: Partial) { this._options = { - setInterval: true, - setTimeout: true, - requestAnimationFrame: true, XMLHttpRequest: true, eventTarget: true, + requestAnimationFrame: true, + setInterval: true, + setTimeout: true, ...options, }; } @@ -227,12 +227,14 @@ export class TryCatch implements Integration { public setupOnce(): void { const global = getGlobalObject(); - if (this._options.setInterval) { - fill(global, 'setInterval', this._wrapTimeFunction.bind(this)); - } if (this._options.setTimeout) { fill(global, 'setTimeout', this._wrapTimeFunction.bind(this)); } + + if (this._options.setInterval) { + fill(global, 'setInterval', this._wrapTimeFunction.bind(this)); + } + if (this._options.requestAnimationFrame) { fill(global, 'requestAnimationFrame', this._wrapRAF.bind(this)); } From 5225bf7ad584869f0e94a4f0dabe80bdda0cb0d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= Date: Tue, 19 May 2020 14:56:57 +0200 Subject: [PATCH 5/5] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d3ba436c532..17a5f8edae40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - [core] feat: Send transactions in envelopes (#2553) - [core] fix: Send event timestamp (#2575) +- [browser] feat: Allow for configuring TryCatch integration (#2601) - [browser] fix: Call wrapped `RequestAnimationFrame` with correct context (#2570) - [node] fix: Prevent reading the same source file multiple times (#2569) - [integrations] feat: Vue performance monitoring (#2571)