CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-sentry--browser

Official Sentry SDK for browsers providing comprehensive error monitoring, performance tracking, user feedback collection, and session management capabilities for client-side JavaScript applications.

Pending
Overview
Eval results
Files

integrations.mddocs/

Integrations

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.

Capabilities

Default Browser Integrations

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 events
  • functionToStringIntegration() - Preserves function names
  • browserApiErrorsIntegration() - Captures browser API errors
  • breadcrumbsIntegration() - Automatic breadcrumb collection
  • globalHandlersIntegration() - Global error handlers
  • linkedErrorsIntegration() - Captures linked errors
  • dedupeIntegration() - Prevents duplicate events
  • httpContextIntegration() - Adds HTTP context
  • browserSessionIntegration() - Session tracking

Browser-Specific Integrations

Integrations 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,
    }),
  ],
});

Performance Monitoring Integrations

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,
});

Advanced Monitoring Integrations

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;

User Feedback Integrations

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;

Session Replay Integrations

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;

Profiling Integration

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;

Feature Flag Integrations

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 SDK Integrations

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;

Advanced Integrations

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 Integrations

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;

Integration Configuration

Basic Integration Setup

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"],
    }),
  ],
});

Conditional Integration Loading

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,
});

Integration Options Examples

// 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]"],
});

Types

Integration Interface

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;
}

Common Integration Options

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;
  };
}

Integration Best Practices

Performance Considerations

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
  ],
});

Privacy and Security

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;
  },
});

Error Filtering

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"],
    }),
  ],
});

Utility Functions

Web Worker Registration

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",
});

Additional Types

/**
 * 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

docs

context-management.md

error-capture.md

index.md

integrations.md

performance-monitoring.md

sdk-initialization.md

session-management.md

session-replay.md

transport.md

user-feedback.md

tile.json