0
# Integrations
1

2
Comprehensive integration system for automatic instrumentation and extended functionality. The Sentry Browser SDK provides 25+ integrations for automatic error capture, performance monitoring, and enhanced debugging capabilities.
3

4
## Capabilities
5

6
### Default Browser Integrations
7

8
Core integrations that are enabled by default for all browser environments.
9

10
```typescript { .api }
11
/**
12
 * Get the default integrations for browser environments
13
 * @param options - SDK configuration options
14
 * @returns Array of default integration instances
15
 */
16
function getDefaultIntegrations(options: Options): Integration[];
17

18
/**
19
 * Add an integration to the current client
20
 * @param integration - Integration instance to add
21
 */
22
function addIntegration(integration: Integration): void;
23
```
24

25
**Default integrations include:**
26
- `inboundFiltersIntegration()` - Filters unwanted events
27
- `functionToStringIntegration()` - Preserves function names
28
- `browserApiErrorsIntegration()` - Captures browser API errors
29
- `breadcrumbsIntegration()` - Automatic breadcrumb collection
30
- `globalHandlersIntegration()` - Global error handlers
31
- `linkedErrorsIntegration()` - Captures linked errors
32
- `dedupeIntegration()` - Prevents duplicate events
33
- `httpContextIntegration()` - Adds HTTP context
34
- `browserSessionIntegration()` - Session tracking
35

36
### Browser-Specific Integrations
37

38
Integrations designed specifically for browser environments.
39

40
```typescript { .api }
41
/**
42
 * Automatic breadcrumb collection for user interactions and API calls
43
 * @param options - Breadcrumb collection options
44
 * @returns Breadcrumbs integration
45
 */
46
function breadcrumbsIntegration(options?: BreadcrumbsOptions): Integration;
47

48
/**
49
 * Global error and unhandled promise rejection handlers
50
 * @param options - Global handler options
51
 * @returns Global handlers integration
52
 */
53
function globalHandlersIntegration(options?: GlobalHandlersOptions): Integration;
54

55
/**
56
 * HTTP request context information
57
 * @param options - HTTP context options
58
 * @returns HTTP context integration
59
 */
60
function httpContextIntegration(options?: HttpContextOptions): Integration;
61

62
/**
63
 * Linked and caused-by error tracking
64
 * @param options - Linked errors options
65
 * @returns Linked errors integration
66
 */
67
function linkedErrorsIntegration(options?: LinkedErrorsOptions): Integration;
68

69
/**
70
 * Browser API error capturing (e.g., failed resource loads)
71
 * @param options - Browser API errors options
72
 * @returns Browser API errors integration
73
 */
74
function browserApiErrorsIntegration(options?: BrowserApiErrorsOptions): Integration;
75

76
/**
77
 * Browser session tracking and management
78
 * @param options - Session tracking options
79
 * @returns Browser session integration
80
 */  
81
function browserSessionIntegration(options?: BrowserSessionOptions): Integration;
82
```
83

84
**Usage Examples:**
85

86
```typescript
87
import * as Sentry from "@sentry/browser";
88

89
Sentry.init({
90
  dsn: "YOUR_DSN",
91
  integrations: [
92
    // Customize default integrations
93
    Sentry.breadcrumbsIntegration({
94
      console: true,
95
      dom: true,
96
      fetch: true,
97
      history: true,
98
      sentry: true,
99
      xhr: true,
100
    }),
101
    
102
    Sentry.globalHandlersIntegration({
103
      onerror: true,
104
      onunhandledrejection: true,
105
    }),
106
    
107
    Sentry.browserApiErrorsIntegration({
108
      setTimeout: true,
109
      setInterval: true,
110
      requestAnimationFrame: true,
111
      XMLHttpRequest: true,
112
    }),
113
  ],
114
});
115
```
116

117
### Performance Monitoring Integrations
118

119
Integrations for performance monitoring and distributed tracing.
120

121
```typescript { .api }
122
/**
123
 * Browser performance monitoring with automatic instrumentation
124
 * @param options - Browser tracing configuration
125
 * @returns Browser tracing integration
126
 */
127
function browserTracingIntegration(options?: BrowserTracingOptions): Integration;
128

129
/**
130
 * Start navigation span manually
131
 * @param context - Navigation context
132
 * @returns Navigation span
133
 */
134
function startBrowserTracingNavigationSpan(context: NavigationSpanContext): Span;
135

136
/**
137
 * Start page load span manually  
138
 * @param context - Page load context
139
 * @returns Page load span
140
 */
141
function startBrowserTracingPageLoadSpan(context: PageLoadSpanContext): Span;
142
```
143

144
**Usage Example:**
145

146
```typescript
147
import { browserTracingIntegration } from "@sentry/browser";
148

149
Sentry.init({
150
  dsn: "YOUR_DSN",
151
  integrations: [
152
    browserTracingIntegration({
153
      enableLongTask: true,
154
      enableInp: true,
155
      tracePropagationTargets: ["localhost", "api.example.com"],
156
      routingInstrumentation: Sentry.reactRouterV6Instrumentation(
157
        React.useEffect,
158
        useLocation,
159
        useNavigationType,
160
        createRoutesFromChildren,
161
        matchRoutes
162
      ),
163
    }),
164
  ],
165
  tracesSampleRate: 0.1,
166
});
167
```
168

169
### Advanced Monitoring Integrations
170

171
Specialized integrations for enhanced error and performance monitoring.
172

173
```typescript { .api }
174
/**
175
 * Reporting Observer API integration for browser warnings
176
 * @param options - Reporting observer options
177
 * @returns Reporting observer integration
178
 */
179
function reportingObserverIntegration(options?: ReportingObserverOptions): Integration;
180

181
/**
182
 * HTTP client request monitoring
183
 * @param options - HTTP client options
184
 * @returns HTTP client integration
185
 */
186
function httpClientIntegration(options?: HttpClientOptions): Integration;
187

188
/**
189
 * Source code context lines for stack traces
190
 * @param options - Context lines options
191
 * @returns Context lines integration
192
 */
193
function contextLinesIntegration(options?: ContextLinesOptions): Integration;
194

195
/**
196
 * GraphQL client request monitoring
197
 * @param options - GraphQL client options
198
 * @returns GraphQL client integration
199
 */
200
function graphqlClientIntegration(options?: GraphqlClientOptions): Integration;
201

202
/**
203
 * Spotlight development tools integration
204
 * @param options - Spotlight options
205
 * @returns Spotlight integration
206
 */
207
function spotlightBrowserIntegration(options?: SpotlightOptions): Integration;
208

209
/**
210
 * Web Worker error monitoring
211
 * @param options - Web Worker options
212
 * @returns Web Worker integration
213
 */
214
function webWorkerIntegration(options?: WebWorkerOptions): Integration;
215

216
/**
217
 * Register a web worker for monitoring
218
 * @param worker - Web Worker instance
219
 */
220
function registerWebWorker(worker: Worker): void;
221
```
222

223
### User Feedback Integrations
224

225
Integrations for collecting user feedback on errors and issues.
226

227
```typescript { .api }
228
/**
229
 * Asynchronous user feedback widget
230
 * @param options - Async feedback options
231
 * @returns Async feedback integration
232
 */
233
function feedbackAsyncIntegration(options?: FeedbackAsyncOptions): Integration;
234

235
/**
236
 * Synchronous user feedback widget
237
 * @param options - Sync feedback options  
238
 * @returns Sync feedback integration
239
 */
240
function feedbackSyncIntegration(options?: FeedbackSyncOptions): Integration;
241

242
/**
243
 * Alias for feedbackSyncIntegration
244
 */
245
const feedbackIntegration = feedbackSyncIntegration;
246
```
247

248
### Session Replay Integrations
249

250
Integrations for session recording and replay functionality.
251

252
```typescript { .api }
253
/**
254
 * Session replay recording integration
255
 * @param options - Replay configuration options
256
 * @returns Replay integration
257
 */
258
function replayIntegration(options?: ReplayOptions): Integration;
259

260
/**
261
 * Canvas recording for session replay
262
 * @param options - Canvas replay options
263
 * @returns Canvas replay integration
264
 */
265
function replayCanvasIntegration(options?: ReplayCanvasOptions): Integration;
266

267
/**
268
 * Get the current replay client instance
269
 * @returns Replay client or undefined
270
 */
271
function getReplay(): ReplayClient | undefined;
272
```
273

274
### Profiling Integration
275

276
Browser profiling for performance analysis.
277

278
```typescript { .api }
279
/**
280
 * Browser profiling integration using JS Self-Profiling API
281
 * @param options - Profiling options
282
 * @returns Browser profiling integration
283
 */
284
function browserProfilingIntegration(options?: BrowserProfilingOptions): Integration;
285
```
286

287
### Feature Flag Integrations
288

289
Integrations for feature flag monitoring and tracking.
290

291
```typescript { .api }
292
/**
293
 * LaunchDarkly feature flag integration
294
 * @param options - LaunchDarkly options
295
 * @returns LaunchDarkly integration
296
 */
297
function launchDarklyIntegration(options?: LaunchDarklyOptions): Integration;
298

299
/**
300
 * Build LaunchDarkly flag usage handler
301
 * @param client - LaunchDarkly client instance
302
 * @returns Flag usage handler function
303
 */
304
function buildLaunchDarklyFlagUsedHandler(client: any): (flagKey: string, flagValue: any) => void;
305

306
/**
307
 * OpenFeature integration
308
 * @param options - OpenFeature options
309
 * @returns OpenFeature integration
310
 */
311
function openFeatureIntegration(options?: OpenFeatureOptions): Integration;
312

313
/**
314
 * Unleash feature flag integration
315
 * @param options - Unleash options
316
 * @returns Unleash integration
317
 */
318
function unleashIntegration(options?: UnleashOptions): Integration;
319

320
/**
321
 * Statsig feature flag integration
322
 * @param options - Statsig options
323
 * @returns Statsig integration
324
 */
325
function statsigIntegration(options?: StatsigOptions): Integration;
326

327
/**
328
 * Generic feature flags integration
329
 * @param options - Feature flags options
330
 * @returns Feature flags integration
331
 */
332
function featureFlagsIntegration(options?: FeatureFlagsOptions): Integration;
333
```
334

335
### Core SDK Integrations
336

337
Core integrations that can be re-exported and customized.
338

339
```typescript { .api }
340
/**
341
 * Function.toString() preservation for better stack traces
342
 * @param options - Function to string options
343
 * @returns Function to string integration
344
 */
345
function functionToStringIntegration(options?: FunctionToStringOptions): Integration;
346

347
/**
348
 * Inbound event filtering (deprecated - use eventFiltersIntegration)
349
 * @param options - Inbound filters options
350
 * @returns Inbound filters integration
351
 */
352
function inboundFiltersIntegration(options?: InboundFiltersOptions): Integration;
353

354
/**
355
 * Event filtering integration
356
 * @param options - Event filters options
357
 * @returns Event filters integration
358
 */
359
function eventFiltersIntegration(options?: EventFiltersOptions): Integration;
360

361
/**
362
 * Duplicate event deduplication
363
 * @param options - Deduplication options
364
 * @returns Dedupe integration
365
 */
366
function dedupeIntegration(options?: DedupeOptions): Integration;
367

368
/**
369
 * Console message capturing
370
 * @param options - Console capture options
371
 * @returns Console capture integration
372
 */
373
function captureConsoleIntegration(options?: CaptureConsoleOptions): Integration;
374

375
/**
376
 * Extra error data extraction
377
 * @param options - Extra error data options
378
 * @returns Extra error data integration
379
 */
380
function extraErrorDataIntegration(options?: ExtraErrorDataOptions): Integration;
381

382
/**
383
 * Stack frame rewriting for source maps
384
 * @param options - Rewrite frames options
385
 * @returns Rewrite frames integration
386
 */
387
function rewriteFramesIntegration(options?: RewriteFramesOptions): Integration;
388

389
/**
390
 * Console logging integration
391
 * @param options - Console logging options
392
 * @returns Console logging integration
393
 */
394
function consoleLoggingIntegration(options?: ConsoleLoggingOptions): Integration;
395
```
396

397
### Advanced Integrations
398

399
Additional integrations for specialized use cases.
400

401
```typescript { .api }
402
/**
403
 * Span error instrumentation registration
404
 * @param options - Span error instrumentation options
405
 */
406
function registerSpanErrorInstrumentation(options?: SpanErrorInstrumentationOptions): void;
407

408
/**
409
 * Module metadata integration
410
 * @param options - Module metadata options
411
 * @returns Module metadata integration
412
 */
413
function moduleMetadataIntegration(options?: ModuleMetadataOptions): Integration;
414

415
/**
416
 * Supabase client integration
417
 * @param supabaseClient - Supabase client instance
418
 * @param options - Supabase options
419
 * @returns Supabase integration
420
 */
421
function supabaseIntegration(supabaseClient: any, options?: SupabaseOptions): Integration;
422

423
/**
424
 * Instrument Supabase client for monitoring
425
 * @param supabaseClient - Supabase client instance
426
 * @param options - Instrumentation options
427
 */
428
function instrumentSupabaseClient(supabaseClient: any, options?: SupabaseInstrumentationOptions): void;
429

430
/**
431
 * Zod schema validation error integration
432
 * @param options - Zod errors options
433
 * @returns Zod errors integration
434
 */
435
function zodErrorsIntegration(options?: ZodErrorsOptions): Integration;
436

437
/**
438
 * Third-party error filtering integration
439
 * @param options - Third-party error filter options
440
 * @returns Third-party error filter integration
441
 */
442
function thirdPartyErrorFilterIntegration(options?: ThirdPartyErrorFilterOptions): Integration;
443
```
444

445
### Utility Integrations
446

447
Utility functions for integration management.
448

449
```typescript { .api }
450
/**
451
 * Lazy load an integration when needed
452
 * @param loader - Function that returns a promise resolving to the integration
453
 * @returns Lazy-loaded integration wrapper
454
 */
455
function lazyLoadIntegration<T extends Integration>(
456
  loader: () => Promise<T>
457
): Integration;
458
```
459

460
## Integration Configuration
461

462
### Basic Integration Setup
463

464
```typescript
465
import * as Sentry from "@sentry/browser";
466

467
// Basic setup with default integrations
468
Sentry.init({
469
  dsn: "YOUR_DSN",
470
  // Uses all default integrations
471
});
472

473
// Custom integration setup
474
Sentry.init({
475
  dsn: "YOUR_DSN",
476
  integrations: [
477
    // Replace default integrations with custom configuration
478
    Sentry.breadcrumbsIntegration({
479
      console: false, // Disable console breadcrumbs
480
      dom: true,
481
      fetch: true,
482
      history: true,
483
      xhr: true,
484
    }),
485
    
486
    // Add additional integrations
487
    Sentry.replayIntegration({
488
      sessionSampleRate: 0.1,
489
      errorSampleRate: 1.0,
490
    }),
491
    
492
    Sentry.browserTracingIntegration({
493
      tracePropagationTargets: ["localhost", "api.example.com"],
494
    }),
495
  ],
496
});
497
```
498

499
### Conditional Integration Loading
500

501
```typescript
502
import * as Sentry from "@sentry/browser";
503

504
const integrations = [
505
  Sentry.breadcrumbsIntegration(),
506
  Sentry.globalHandlersIntegration(),
507
];
508

509
// Add development-only integrations
510
if (process.env.NODE_ENV === "development") {
511
  integrations.push(
512
    Sentry.spotlightBrowserIntegration(),
513
    Sentry.consoleLoggingIntegration({
514
      level: ["error", "warn"],
515
    })
516
  );
517
}
518

519
// Add production-only integrations
520
if (process.env.NODE_ENV === "production") {
521
  integrations.push(
522
    Sentry.browserProfilingIntegration(),
523
    Sentry.replayIntegration({
524
      sessionSampleRate: 0.01,
525
      errorSampleRate: 1.0,
526
    })
527
  );
528
}
529

530
Sentry.init({
531
  dsn: "YOUR_DSN",
532
  integrations,
533
});
534
```
535

536
### Integration Options Examples
537

538
```typescript
539
// Breadcrumbs with custom options
540
Sentry.breadcrumbsIntegration({
541
  console: true,
542
  dom: {
543
    serializeAttribute: ["id", "class", "aria-label"],
544
    maxStringLength: 1000,
545
  },
546
  fetch: {
547
    enableNativeFetchInstrumentation: true,
548
  },
549
  history: true,
550
  sentry: true,
551
  xhr: true,
552
});
553

554
// Browser tracing with custom routing
555
Sentry.browserTracingIntegration({
556
  enableLongTask: true,
557
  enableInp: true,
558
  enableUserTimingApi: true,
559
  tracePropagationTargets: [/^https:\/\/api\.example\.com/],
560
  beforeNavigate: (context) => {
561
    return {
562
      ...context,
563
      tags: {
564
        ...context.tags,
565
        custom_route: window.location.pathname,
566
      },
567
    };
568
  },
569
});
570

571
// Replay with privacy settings
572
Sentry.replayIntegration({
573
  sessionSampleRate: 0.1,
574
  errorSampleRate: 1.0,
575
  maskAllText: false,
576
  maskAllInputs: true,
577
  blockAllMedia: true,
578
  maskTextSelectors: [".sensitive", "[data-sensitive]"],
579
  blockSelectors: [".secret", "[data-secret]"],
580
});
581
```
582

583
## Types
584

585
### Integration Interface
586

587
```typescript { .api }
588
interface Integration {
589
  /** Unique name for this integration */
590
  name: string;
591
  
592
  /** Setup function called once when SDK is initialized */
593
  setupOnce(
594
    addGlobalEventProcessor: (processor: EventProcessor) => void,
595
    getCurrentHub: () => Hub
596
  ): void;
597
  
598
  /** Optional setup function called for each client */
599
  setup?(client: Client): void;
600
  
601
  /** Optional preprocessing hook */
602
  preprocessEvent?(event: Event, hint: EventHint, client: Client): void;
603
  
604
  /** Optional event processing hook */
605
  processEvent?(event: Event, hint: EventHint, client: Client): Event | null | PromiseLike<Event | null>;
606
  
607
  /** Optional afterAllSetup hook */
608
  afterAllSetup?(client: Client): void;
609
}
610
```
611

612
### Common Integration Options
613

614
```typescript { .api }
615
interface BreadcrumbsOptions {
616
  /** Capture console messages as breadcrumbs */
617
  console?: boolean;
618
  
619
  /** Capture DOM events as breadcrumbs */
620
  dom?: boolean | {
621
    serializeAttribute?: string[];
622
    maxStringLength?: number;
623
  };
624
  
625
  /** Capture fetch requests as breadcrumbs */
626
  fetch?: boolean | {
627
    enableNativeFetchInstrumentation?: boolean;
628
  };
629
  
630
  /** Capture history changes as breadcrumbs */
631
  history?: boolean;
632
  
633
  /** Capture Sentry events as breadcrumbs */
634
  sentry?: boolean;
635
  
636
  /** Capture XHR requests as breadcrumbs */
637
  xhr?: boolean;
638
}
639

640
interface GlobalHandlersOptions {
641
  /** Capture window.onerror events */
642
  onerror?: boolean;
643
  
644
  /** Capture unhandled promise rejections */
645
  onunhandledrejection?: boolean;
646
}
647

648
interface ReplayOptions {
649
  /** Sample rate for normal sessions */
650
  sessionSampleRate?: number;
651
  
652
  /** Sample rate for error sessions */
653
  errorSampleRate?: number;
654
  
655
  /** Mask all text content */
656
  maskAllText?: boolean;
657
  
658
  /** Mask all input values */
659
  maskAllInputs?: boolean;
660
  
661
  /** Block all media elements */
662
  blockAllMedia?: boolean;
663
  
664
  /** CSS selectors for elements to mask */
665
  maskTextSelectors?: string[];
666
  
667
  /** CSS selectors for elements to block */
668
  blockSelectors?: string[];
669
  
670
  /** Maximum replay duration in seconds */
671
  maxReplayDuration?: number;
672
  
673
  /** Network capture options */
674
  networkDetailAllowUrls?: (string | RegExp)[];
675
  
676
  /** Privacy options */
677
  privacy?: {
678
    maskAllText?: boolean;
679
    maskAllInputs?: boolean;
680
    blockAllMedia?: boolean;
681
  };
682
}
683
```
684

685
## Integration Best Practices
686

687
### Performance Considerations
688

689
Only enable integrations you actually need:
690

691
```typescript
692
// Minimal setup for better performance
693
Sentry.init({
694
  dsn: "YOUR_DSN",
695
  integrations: [
696
    Sentry.globalHandlersIntegration(),
697
    Sentry.breadcrumbsIntegration({ console: false, dom: false }),
698
    // Only essential integrations
699
  ],
700
});
701
```
702

703
### Privacy and Security
704

705
Configure integrations to respect user privacy:
706

707
```typescript
708
Sentry.init({
709
  dsn: "YOUR_DSN",
710
  integrations: [
711
    Sentry.replayIntegration({
712
      maskAllInputs: true,
713
      maskTextSelectors: [".pii", "[data-private]"],
714
      blockSelectors: [".secret"],
715
      networkDetailAllowUrls: [], // Block all network details
716
    }),
717
    
718
    Sentry.breadcrumbsIntegration({
719
      dom: {
720
        serializeAttribute: ["id", "class"], // Limit captured attributes
721
      },
722
    }),
723
  ],
724
  
725
  beforeSend(event) {
726
    // Additional privacy filtering
727
    if (event.request && event.request.cookies) {
728
      delete event.request.cookies;
729
    }
730
    return event;
731
  },
732
});
733
```
734

735
### Error Filtering
736

737
Use integrations to filter unwanted errors:
738

739
```typescript
740
Sentry.init({
741
  dsn: "YOUR_DSN",
742
  integrations: [
743
    Sentry.eventFiltersIntegration({
744
      ignoreErrors: [
745
        "Script error",
746
        "Non-Error promise rejection captured",
747
        /ResizeObserver loop limit exceeded/,
748
      ],
749
      denyUrls: [
750
        /extensions\//i,
751
        /^chrome:\/\//i,
752
        /^moz-extension:\/\//i,
753
      ],
754
    }),
755
    
756
    Sentry.thirdPartyErrorFilterIntegration({
757
      behaviour: "drop-error-if-contains-third-party-frames",
758
      filterKeys: ["sentry"],
759
    }),
760
  ],
761
});
762
```
763

764
## Utility Functions
765

766
### Web Worker Registration
767

768
Register a web worker to receive Sentry SDK messages.
769

770
```typescript { .api }
771
/**
772
 * Register a web worker to receive Sentry SDK messages
773
 * @param options - Web worker registration options
774
 */
775
function registerWebWorker(options: RegisterWebWorkerOptions): void;
776

777
interface RegisterWebWorkerOptions {
778
  self: Worker;
779
}
780
```
781

782
**Usage Example:**
783

784
```typescript
785
// In your web worker file
786
import * as Sentry from "@sentry/browser";
787

788
// Register the worker
789
Sentry.registerWebWorker({ self });
790

791
// Initialize Sentry in the worker
792
Sentry.init({
793
  dsn: "YOUR_DSN_HERE",
794
});
795
```
796

797
## Additional Types
798

799
```typescript { .api }
800
/**
801
 * OpenFeature integration hook type for feature flag monitoring
802
 */
803
type OpenFeatureIntegrationHook = BaseHook<FlagValue, void, void>;
804

805
interface BaseHook<T extends FlagValue = FlagValue, BeforeHookReturn = unknown, HooksReturn = unknown> {
806
  before?(hookContext: BeforeHookContext, hookHints?: HookHints): BeforeHookReturn;
807
  after?(
808
    hookContext: Readonly<HookContext<T>>,
809
    evaluationDetails: EvaluationDetails<T>,
810
    hookHints?: HookHints,
811
  ): HooksReturn;
812
  error?(hookContext: Readonly<HookContext<T>>, error: unknown, hookHints?: HookHints): HooksReturn;
813
  finally?(hookContext: Readonly<HookContext<T>>, hookHints?: HookHints): HooksReturn;
814
}
815

816
type FlagValue = boolean | string | number | JsonValue;
817
type JsonValue = PrimitiveValue | JsonObject | JsonArray;
818
type PrimitiveValue = null | boolean | string | number;
819
```