Skip to content

ref(browser): Don't use Breadcrumbs integration in send event flow #5024

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 3, 2022
Merged

ref(browser): Don't use Breadcrumbs integration in send event flow #5024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c6f4c95
ref(browser): Don't use Breadcrumbs integration in send event flow
May 3, 2022
2ae7099
Add missing space in comment
May 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 37 additions & 5 deletions packages/browser/src/client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import { BaseClient, getEnvelopeEndpointWithUrlEncodedAuth, Scope, SDK_VERSION } from '@sentry/core';
import { BaseClient, getCurrentHub, getEnvelopeEndpointWithUrlEncodedAuth, Scope, SDK_VERSION } from '@sentry/core';
import { ClientOptions, Event, EventHint, Options, Severity, SeverityLevel } from '@sentry/types';
import { createClientReportEnvelope, dsnToString, getGlobalObject, logger, serializeEnvelope } from '@sentry/utils';
import {
createClientReportEnvelope,
dsnToString,
getEventDescription,
getGlobalObject,
logger,
serializeEnvelope,
} from '@sentry/utils';

import { eventFromException, eventFromMessage } from './eventbuilder';
import { IS_DEBUG_BUILD } from './flags';
import { Breadcrumbs } from './integrations';
import { BREADCRUMB_INTEGRATION_ID } from './integrations/breadcrumbs';
import { sendReport } from './transports/utils';

const globalObject = getGlobalObject<Window>();
Expand Down Expand Up @@ -104,10 +112,34 @@ export class BrowserClient extends BaseClient<BrowserClientOptions> {
* @inheritDoc
*/
protected _sendEvent(event: Event): void {
const integration = this.getIntegration(Breadcrumbs);
if (integration) {
integration.addSentryBreadcrumb(event);
// We only want to add the sentry event breadcrumb when the user has the breadcrumb integration installed and
// activated its `sentry` option.
// We also do not want to use the `Breadcrumbs` class here directly, because we do not want it to be included in
// bundles, if it is not used by the SDK.
// This all sadly is a bit ugly, but we currently don't have a "pre-send" hook on the integrations so we do it this
// way for now.
const breadcrumbIntegration = this.getIntegrationById(BREADCRUMB_INTEGRATION_ID) as Breadcrumbs | null;
if (
breadcrumbIntegration &&
// We check for definedness of `options`, even though it is not strictly necessary, because that access to
// `.sentry` below does not throw, in case users provided their own integration with id "Breadcrumbs" that does
// not have an`options` field
breadcrumbIntegration.options &&
breadcrumbIntegration.options.sentry
) {
getCurrentHub().addBreadcrumb(
{
category: `sentry.${event.type === 'transaction' ? 'transaction' : 'event'}`,
event_id: event.event_id,
level: event.level,
message: getEventDescription(event),
},
{
event,
},
);
}

super._sendEvent(event);
}

Expand Down
48 changes: 16 additions & 32 deletions packages/browser/src/integrations/breadcrumbs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable max-lines */
import { getCurrentHub } from '@sentry/core';
import { Event, Integration } from '@sentry/types';
import { Integration } from '@sentry/types';
import {
addInstrumentationHandler,
getEventDescription,
getGlobalObject,
htmlTreeAsString,
parseUrl,
Expand All @@ -22,6 +21,8 @@ interface BreadcrumbsOptions {
xhr: boolean;
}

export const BREADCRUMB_INTEGRATION_ID = 'Breadcrumbs';

/**
* Default Breadcrumbs instrumentations
* TODO: Deprecated - with v6, this will be renamed to `Instrument`
Expand All @@ -30,21 +31,24 @@ export class Breadcrumbs implements Integration {
/**
* @inheritDoc
*/
public static id: string = 'Breadcrumbs';
public static id: string = BREADCRUMB_INTEGRATION_ID;

/**
* @inheritDoc
*/
public name: string = Breadcrumbs.id;

/** JSDoc */
private readonly _options: BreadcrumbsOptions;
/**
* Options of the breadcrumbs integration.
*/
// This field is public, because we use it in the browser client to check if the `sentry` option is enabled.
public readonly options: Readonly<BreadcrumbsOptions>;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This now means that options cannot be minified - but I guess not the end of the world.


/**
* @inheritDoc
*/
public constructor(options?: Partial<BreadcrumbsOptions>) {
this._options = {
this.options = {
console: true,
dom: true,
fetch: true,
Expand All @@ -55,26 +59,6 @@ export class Breadcrumbs implements Integration {
};
}

/**
* Create a breadcrumb of `sentry` from the events themselves
*/
public addSentryBreadcrumb(event: Event): void {
if (!this._options.sentry) {
return;
}
getCurrentHub().addBreadcrumb(
{
category: `sentry.${event.type === 'transaction' ? 'transaction' : 'event'}`,
event_id: event.event_id,
level: event.level,
message: getEventDescription(event),
},
{
event,
},
);
}

/**
* Instrument browser built-ins w/ breadcrumb capturing
* - Console API
Expand All @@ -84,19 +68,19 @@ export class Breadcrumbs implements Integration {
* - History API
*/
public setupOnce(): void {
if (this._options.console) {
if (this.options.console) {
addInstrumentationHandler('console', _consoleBreadcrumb);
}
if (this._options.dom) {
addInstrumentationHandler('dom', _domBreadcrumb(this._options.dom));
if (this.options.dom) {
addInstrumentationHandler('dom', _domBreadcrumb(this.options.dom));
}
if (this._options.xhr) {
if (this.options.xhr) {
addInstrumentationHandler('xhr', _xhrBreadcrumb);
}
if (this._options.fetch) {
if (this.options.fetch) {
addInstrumentationHandler('fetch', _fetchBreadcrumb);
}
if (this._options.history) {
if (this.options.history) {
addInstrumentationHandler('history', _historyBreadcrumb);
}
}
Expand Down
9 changes: 9 additions & 0 deletions packages/core/src/baseclient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,15 @@ export abstract class BaseClient<O extends ClientOptions> implements Client<O> {
}
}

/**
* Gets an installed integration by its `id`.
*
* @returns The installed integration or `undefined` if no integration with that `id` was installed.
*/
public getIntegrationById(integrationId: string): Integration | undefined {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about making this should be generic over an Integration? This means the caller can define the value without needing a cast.

Suggested change
public getIntegrationById(integrationId: string): Integration | undefined {
public getIntegrationById<I extends Integration>(integrationId: string): I | undefined {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly, I do not like it. I do not want to help people to disable TS checks. If you are sure that your code is right go ahead and cast it, because that is way more explicitly saying that you're doing some dangerous stuff than using a generic, which kind of hides the danger...

return this._integrations[integrationId];
}

/**
* @inheritDoc
*/
Expand Down