Official Sentry SDK for browsers providing comprehensive error monitoring, performance tracking, user feedback collection, and session management capabilities for client-side JavaScript applications.
—
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.
Core integrations that are enabled by default for all browser environments.
/**
* Get the default integrations for browser environments
* @param options - SDK configuration options
* @returns Array of default integration instances
*/
function getDefaultIntegrations(options: Options): Integration[];
/**
* Add an integration to the current client
* @param integration - Integration instance to add
*/
function addIntegration(integration: Integration): void;Default integrations include:
inboundFiltersIntegration() - Filters unwanted eventsfunctionToStringIntegration() - Preserves function namesbrowserApiErrorsIntegration() - Captures browser API errorsbreadcrumbsIntegration() - Automatic breadcrumb collectionglobalHandlersIntegration() - Global error handlerslinkedErrorsIntegration() - Captures linked errorsdedupeIntegration() - Prevents duplicate eventshttpContextIntegration() - Adds HTTP contextbrowserSessionIntegration() - Session trackingIntegrations designed specifically for browser environments.
/**
* Automatic breadcrumb collection for user interactions and API calls
* @param options - Breadcrumb collection options
* @returns Breadcrumbs integration
*/
function breadcrumbsIntegration(options?: BreadcrumbsOptions): Integration;
/**
* Global error and unhandled promise rejection handlers
* @param options - Global handler options
* @returns Global handlers integration
*/
function globalHandlersIntegration(options?: GlobalHandlersOptions): Integration;
/**
* HTTP request context information
* @param options - HTTP context options
* @returns HTTP context integration
*/
function httpContextIntegration(options?: HttpContextOptions): Integration;
/**
* Linked and caused-by error tracking
* @param options - Linked errors options
* @returns Linked errors integration
*/
function linkedErrorsIntegration(options?: LinkedErrorsOptions): Integration;
/**
* Browser API error capturing (e.g., failed resource loads)
* @param options - Browser API errors options
* @returns Browser API errors integration
*/
function browserApiErrorsIntegration(options?: BrowserApiErrorsOptions): Integration;
/**
* Browser session tracking and management
* @param options - Session tracking options
* @returns Browser session integration
*/
function browserSessionIntegration(options?: BrowserSessionOptions): Integration;Usage Examples:
import * as Sentry from "@sentry/browser";
Sentry.init({
dsn: "YOUR_DSN",
integrations: [
// Customize default integrations
Sentry.breadcrumbsIntegration({
console: true,
dom: true,
fetch: true,
history: true,
sentry: true,
xhr: true,
}),
Sentry.globalHandlersIntegration({
onerror: true,
onunhandledrejection: true,
}),
Sentry.browserApiErrorsIntegration({
setTimeout: true,
setInterval: true,
requestAnimationFrame: true,
XMLHttpRequest: true,
}),
],
});Integrations for performance monitoring and distributed tracing.
/**
* Browser performance monitoring with automatic instrumentation
* @param options - Browser tracing configuration
* @returns Browser tracing integration
*/
function browserTracingIntegration(options?: BrowserTracingOptions): Integration;
/**
* Start navigation span manually
* @param context - Navigation context
* @returns Navigation span
*/
function startBrowserTracingNavigationSpan(context: NavigationSpanContext): Span;
/**
* Start page load span manually
* @param context - Page load context
* @returns Page load span
*/
function startBrowserTracingPageLoadSpan(context: PageLoadSpanContext): Span;Usage Example:
import { browserTracingIntegration } from "@sentry/browser";
Sentry.init({
dsn: "YOUR_DSN",
integrations: [
browserTracingIntegration({
enableLongTask: true,
enableInp: true,
tracePropagationTargets: ["localhost", "api.example.com"],
routingInstrumentation: Sentry.reactRouterV6Instrumentation(
React.useEffect,
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes
),
}),
],
tracesSampleRate: 0.1,
});Specialized integrations for enhanced error and performance monitoring.
/**
* Reporting Observer API integration for browser warnings
* @param options - Reporting observer options
* @returns Reporting observer integration
*/
function reportingObserverIntegration(options?: ReportingObserverOptions): Integration;
/**
* HTTP client request monitoring
* @param options - HTTP client options
* @returns HTTP client integration
*/
function httpClientIntegration(options?: HttpClientOptions): Integration;
/**
* Source code context lines for stack traces
* @param options - Context lines options
* @returns Context lines integration
*/
function contextLinesIntegration(options?: ContextLinesOptions): Integration;
/**
* GraphQL client request monitoring
* @param options - GraphQL client options
* @returns GraphQL client integration
*/
function graphqlClientIntegration(options?: GraphqlClientOptions): Integration;
/**
* Spotlight development tools integration
* @param options - Spotlight options
* @returns Spotlight integration
*/
function spotlightBrowserIntegration(options?: SpotlightOptions): Integration;
/**
* Web Worker error monitoring
* @param options - Web Worker options
* @returns Web Worker integration
*/
function webWorkerIntegration(options?: WebWorkerOptions): Integration;
/**
* Register a web worker for monitoring
* @param worker - Web Worker instance
*/
function registerWebWorker(worker: Worker): void;Integrations for collecting user feedback on errors and issues.
/**
* Asynchronous user feedback widget
* @param options - Async feedback options
* @returns Async feedback integration
*/
function feedbackAsyncIntegration(options?: FeedbackAsyncOptions): Integration;
/**
* Synchronous user feedback widget
* @param options - Sync feedback options
* @returns Sync feedback integration
*/
function feedbackSyncIntegration(options?: FeedbackSyncOptions): Integration;
/**
* Alias for feedbackSyncIntegration
*/
const feedbackIntegration = feedbackSyncIntegration;Integrations for session recording and replay functionality.
/**
* Session replay recording integration
* @param options - Replay configuration options
* @returns Replay integration
*/
function replayIntegration(options?: ReplayOptions): Integration;
/**
* Canvas recording for session replay
* @param options - Canvas replay options
* @returns Canvas replay integration
*/
function replayCanvasIntegration(options?: ReplayCanvasOptions): Integration;
/**
* Get the current replay client instance
* @returns Replay client or undefined
*/
function getReplay(): ReplayClient | undefined;Browser profiling for performance analysis.
/**
* Browser profiling integration using JS Self-Profiling API
* @param options - Profiling options
* @returns Browser profiling integration
*/
function browserProfilingIntegration(options?: BrowserProfilingOptions): Integration;Integrations for feature flag monitoring and tracking.
/**
* LaunchDarkly feature flag integration
* @param options - LaunchDarkly options
* @returns LaunchDarkly integration
*/
function launchDarklyIntegration(options?: LaunchDarklyOptions): Integration;
/**
* Build LaunchDarkly flag usage handler
* @param client - LaunchDarkly client instance
* @returns Flag usage handler function
*/
function buildLaunchDarklyFlagUsedHandler(client: any): (flagKey: string, flagValue: any) => void;
/**
* OpenFeature integration
* @param options - OpenFeature options
* @returns OpenFeature integration
*/
function openFeatureIntegration(options?: OpenFeatureOptions): Integration;
/**
* Unleash feature flag integration
* @param options - Unleash options
* @returns Unleash integration
*/
function unleashIntegration(options?: UnleashOptions): Integration;
/**
* Statsig feature flag integration
* @param options - Statsig options
* @returns Statsig integration
*/
function statsigIntegration(options?: StatsigOptions): Integration;
/**
* Generic feature flags integration
* @param options - Feature flags options
* @returns Feature flags integration
*/
function featureFlagsIntegration(options?: FeatureFlagsOptions): Integration;Core integrations that can be re-exported and customized.
/**
* Function.toString() preservation for better stack traces
* @param options - Function to string options
* @returns Function to string integration
*/
function functionToStringIntegration(options?: FunctionToStringOptions): Integration;
/**
* Inbound event filtering (deprecated - use eventFiltersIntegration)
* @param options - Inbound filters options
* @returns Inbound filters integration
*/
function inboundFiltersIntegration(options?: InboundFiltersOptions): Integration;
/**
* Event filtering integration
* @param options - Event filters options
* @returns Event filters integration
*/
function eventFiltersIntegration(options?: EventFiltersOptions): Integration;
/**
* Duplicate event deduplication
* @param options - Deduplication options
* @returns Dedupe integration
*/
function dedupeIntegration(options?: DedupeOptions): Integration;
/**
* Console message capturing
* @param options - Console capture options
* @returns Console capture integration
*/
function captureConsoleIntegration(options?: CaptureConsoleOptions): Integration;
/**
* Extra error data extraction
* @param options - Extra error data options
* @returns Extra error data integration
*/
function extraErrorDataIntegration(options?: ExtraErrorDataOptions): Integration;
/**
* Stack frame rewriting for source maps
* @param options - Rewrite frames options
* @returns Rewrite frames integration
*/
function rewriteFramesIntegration(options?: RewriteFramesOptions): Integration;
/**
* Console logging integration
* @param options - Console logging options
* @returns Console logging integration
*/
function consoleLoggingIntegration(options?: ConsoleLoggingOptions): Integration;Additional integrations for specialized use cases.
/**
* Span error instrumentation registration
* @param options - Span error instrumentation options
*/
function registerSpanErrorInstrumentation(options?: SpanErrorInstrumentationOptions): void;
/**
* Module metadata integration
* @param options - Module metadata options
* @returns Module metadata integration
*/
function moduleMetadataIntegration(options?: ModuleMetadataOptions): Integration;
/**
* Supabase client integration
* @param supabaseClient - Supabase client instance
* @param options - Supabase options
* @returns Supabase integration
*/
function supabaseIntegration(supabaseClient: any, options?: SupabaseOptions): Integration;
/**
* Instrument Supabase client for monitoring
* @param supabaseClient - Supabase client instance
* @param options - Instrumentation options
*/
function instrumentSupabaseClient(supabaseClient: any, options?: SupabaseInstrumentationOptions): void;
/**
* Zod schema validation error integration
* @param options - Zod errors options
* @returns Zod errors integration
*/
function zodErrorsIntegration(options?: ZodErrorsOptions): Integration;
/**
* Third-party error filtering integration
* @param options - Third-party error filter options
* @returns Third-party error filter integration
*/
function thirdPartyErrorFilterIntegration(options?: ThirdPartyErrorFilterOptions): Integration;Utility functions for integration management.
/**
* Lazy load an integration when needed
* @param loader - Function that returns a promise resolving to the integration
* @returns Lazy-loaded integration wrapper
*/
function lazyLoadIntegration<T extends Integration>(
loader: () => Promise<T>
): Integration;import * as Sentry from "@sentry/browser";
// Basic setup with default integrations
Sentry.init({
dsn: "YOUR_DSN",
// Uses all default integrations
});
// Custom integration setup
Sentry.init({
dsn: "YOUR_DSN",
integrations: [
// Replace default integrations with custom configuration
Sentry.breadcrumbsIntegration({
console: false, // Disable console breadcrumbs
dom: true,
fetch: true,
history: true,
xhr: true,
}),
// Add additional integrations
Sentry.replayIntegration({
sessionSampleRate: 0.1,
errorSampleRate: 1.0,
}),
Sentry.browserTracingIntegration({
tracePropagationTargets: ["localhost", "api.example.com"],
}),
],
});import * as Sentry from "@sentry/browser";
const integrations = [
Sentry.breadcrumbsIntegration(),
Sentry.globalHandlersIntegration(),
];
// Add development-only integrations
if (process.env.NODE_ENV === "development") {
integrations.push(
Sentry.spotlightBrowserIntegration(),
Sentry.consoleLoggingIntegration({
level: ["error", "warn"],
})
);
}
// Add production-only integrations
if (process.env.NODE_ENV === "production") {
integrations.push(
Sentry.browserProfilingIntegration(),
Sentry.replayIntegration({
sessionSampleRate: 0.01,
errorSampleRate: 1.0,
})
);
}
Sentry.init({
dsn: "YOUR_DSN",
integrations,
});// Breadcrumbs with custom options
Sentry.breadcrumbsIntegration({
console: true,
dom: {
serializeAttribute: ["id", "class", "aria-label"],
maxStringLength: 1000,
},
fetch: {
enableNativeFetchInstrumentation: true,
},
history: true,
sentry: true,
xhr: true,
});
// Browser tracing with custom routing
Sentry.browserTracingIntegration({
enableLongTask: true,
enableInp: true,
enableUserTimingApi: true,
tracePropagationTargets: [/^https:\/\/api\.example\.com/],
beforeNavigate: (context) => {
return {
...context,
tags: {
...context.tags,
custom_route: window.location.pathname,
},
};
},
});
// Replay with privacy settings
Sentry.replayIntegration({
sessionSampleRate: 0.1,
errorSampleRate: 1.0,
maskAllText: false,
maskAllInputs: true,
blockAllMedia: true,
maskTextSelectors: [".sensitive", "[data-sensitive]"],
blockSelectors: [".secret", "[data-secret]"],
});interface Integration {
/** Unique name for this integration */
name: string;
/** Setup function called once when SDK is initialized */
setupOnce(
addGlobalEventProcessor: (processor: EventProcessor) => void,
getCurrentHub: () => Hub
): void;
/** Optional setup function called for each client */
setup?(client: Client): void;
/** Optional preprocessing hook */
preprocessEvent?(event: Event, hint: EventHint, client: Client): void;
/** Optional event processing hook */
processEvent?(event: Event, hint: EventHint, client: Client): Event | null | PromiseLike<Event | null>;
/** Optional afterAllSetup hook */
afterAllSetup?(client: Client): void;
}interface BreadcrumbsOptions {
/** Capture console messages as breadcrumbs */
console?: boolean;
/** Capture DOM events as breadcrumbs */
dom?: boolean | {
serializeAttribute?: string[];
maxStringLength?: number;
};
/** Capture fetch requests as breadcrumbs */
fetch?: boolean | {
enableNativeFetchInstrumentation?: boolean;
};
/** Capture history changes as breadcrumbs */
history?: boolean;
/** Capture Sentry events as breadcrumbs */
sentry?: boolean;
/** Capture XHR requests as breadcrumbs */
xhr?: boolean;
}
interface GlobalHandlersOptions {
/** Capture window.onerror events */
onerror?: boolean;
/** Capture unhandled promise rejections */
onunhandledrejection?: boolean;
}
interface ReplayOptions {
/** Sample rate for normal sessions */
sessionSampleRate?: number;
/** Sample rate for error sessions */
errorSampleRate?: number;
/** Mask all text content */
maskAllText?: boolean;
/** Mask all input values */
maskAllInputs?: boolean;
/** Block all media elements */
blockAllMedia?: boolean;
/** CSS selectors for elements to mask */
maskTextSelectors?: string[];
/** CSS selectors for elements to block */
blockSelectors?: string[];
/** Maximum replay duration in seconds */
maxReplayDuration?: number;
/** Network capture options */
networkDetailAllowUrls?: (string | RegExp)[];
/** Privacy options */
privacy?: {
maskAllText?: boolean;
maskAllInputs?: boolean;
blockAllMedia?: boolean;
};
}Only enable integrations you actually need:
// Minimal setup for better performance
Sentry.init({
dsn: "YOUR_DSN",
integrations: [
Sentry.globalHandlersIntegration(),
Sentry.breadcrumbsIntegration({ console: false, dom: false }),
// Only essential integrations
],
});Configure integrations to respect user privacy:
Sentry.init({
dsn: "YOUR_DSN",
integrations: [
Sentry.replayIntegration({
maskAllInputs: true,
maskTextSelectors: [".pii", "[data-private]"],
blockSelectors: [".secret"],
networkDetailAllowUrls: [], // Block all network details
}),
Sentry.breadcrumbsIntegration({
dom: {
serializeAttribute: ["id", "class"], // Limit captured attributes
},
}),
],
beforeSend(event) {
// Additional privacy filtering
if (event.request && event.request.cookies) {
delete event.request.cookies;
}
return event;
},
});Use integrations to filter unwanted errors:
Sentry.init({
dsn: "YOUR_DSN",
integrations: [
Sentry.eventFiltersIntegration({
ignoreErrors: [
"Script error",
"Non-Error promise rejection captured",
/ResizeObserver loop limit exceeded/,
],
denyUrls: [
/extensions\//i,
/^chrome:\/\//i,
/^moz-extension:\/\//i,
],
}),
Sentry.thirdPartyErrorFilterIntegration({
behaviour: "drop-error-if-contains-third-party-frames",
filterKeys: ["sentry"],
}),
],
});Register a web worker to receive Sentry SDK messages.
/**
* Register a web worker to receive Sentry SDK messages
* @param options - Web worker registration options
*/
function registerWebWorker(options: RegisterWebWorkerOptions): void;
interface RegisterWebWorkerOptions {
self: Worker;
}Usage Example:
// In your web worker file
import * as Sentry from "@sentry/browser";
// Register the worker
Sentry.registerWebWorker({ self });
// Initialize Sentry in the worker
Sentry.init({
dsn: "YOUR_DSN_HERE",
});/**
* OpenFeature integration hook type for feature flag monitoring
*/
type OpenFeatureIntegrationHook = BaseHook<FlagValue, void, void>;
interface BaseHook<T extends FlagValue = FlagValue, BeforeHookReturn = unknown, HooksReturn = unknown> {
before?(hookContext: BeforeHookContext, hookHints?: HookHints): BeforeHookReturn;
after?(
hookContext: Readonly<HookContext<T>>,
evaluationDetails: EvaluationDetails<T>,
hookHints?: HookHints,
): HooksReturn;
error?(hookContext: Readonly<HookContext<T>>, error: unknown, hookHints?: HookHints): HooksReturn;
finally?(hookContext: Readonly<HookContext<T>>, hookHints?: HookHints): HooksReturn;
}
type FlagValue = boolean | string | number | JsonValue;
type JsonValue = PrimitiveValue | JsonObject | JsonArray;
type PrimitiveValue = null | boolean | string | number;Install with Tessl CLI
npx tessl i tessl/npm-sentry--browser