@sentry/browser

Variables

• chromeStackLineParser
• defaultRequestInstrumentationOptions
• defaultStackLineParsers
• defaultStackParser
• featureFlagsIntegration
• feedbackAsyncIntegration
• feedbackIntegration
• feedbackSyncIntegration
• geckoStackLineParser
• opera10StackLineParser
• opera11StackLineParser
• WINDOW
• winjsStackLineParser

Functions

• breadcrumbsIntegration()
• browserApiErrorsIntegration()
• browserProfilingIntegration()
• browserSessionIntegration()
• browserTracingIntegration()
• buildLaunchDarklyFlagUsedHandler()
• contextLinesIntegration()
• createUserFeedbackEnvelope()
• diagnoseSdkConnectivity()
• eventFromException()
• eventFromMessage()
• exceptionFromError()
• forceLoad()
• getDefaultIntegrations()
• globalHandlersIntegration()
• graphqlClientIntegration()
• httpClientIntegration()
• httpContextIntegration()
• init()
• instrumentOutgoingRequests()
• launchDarklyIntegration()
• lazyLoadIntegration()
• linkedErrorsIntegration()
• makeBrowserOfflineTransport()
• makeFetchTransport()
• onLoad()
• openFeatureIntegration()
• reportingObserverIntegration()
• showReportDialog()
• spotlightBrowserIntegration()
• startBrowserTracingNavigationSpan()
• startBrowserTracingPageLoadSpan()
• statsigIntegration()
• unleashIntegration()

Classes

• BrowserClient

  • eventFromException()
  • eventFromMessage()
• OpenFeatureIntegrationHook

  • after()
  • error()

Interfaces

• FeatureFlagsIntegration

  • addFeatureFlag
• RequestInstrumentationOptions

  • enableHTTPTimings
  • onRequestSpanStart()
  • shouldCreateSpanForRequest()
  • traceFetch
  • tracePropagationTargets
  • traceXHR
  • trackFetchStreamPerformance

Type Aliases

• BrowserOptions

Namespaces

• logger

  • debug()
  • error()
  • fatal()
  • info()
  • trace()
  • warn()

variable chromeStackLineParser

const chromeStackLineParser: StackLineParser;

variable defaultRequestInstrumentationOptions

const defaultRequestInstrumentationOptions: RequestInstrumentationOptions;

variable defaultStackLineParsers

const defaultStackLineParsers: StackLineParser[];

variable defaultStackParser

const defaultStackParser: any;

variable featureFlagsIntegration

const featureFlagsIntegration: IntegrationFn<FeatureFlagsIntegration>;

• Sentry integration for buffering feature flags manually with an API, and capturing them on error events. We recommend you do this on each flag evaluation. Flags are buffered per Sentry scope and limited to 100 per event.

  See the [feature flag documentation](https://develop.sentry.dev/sdk/expected-features/#feature-flags) for more information.

  Example 1

  import * as Sentry from '@sentry/browser';
  import { type FeatureFlagsIntegration } from '@sentry/browser';
  
  // Setup
  Sentry.init(..., integrations: [Sentry.featureFlagsIntegration()])
  
  // Verify
  const flagsIntegration = Sentry.getClient()?.getIntegrationByName<FeatureFlagsIntegration>('FeatureFlags');
  if (flagsIntegration) {
    flagsIntegration.addFeatureFlag('my-flag', true);
  } else {
    // check your setup
  }
  Sentry.captureException(Exception('broke')); // 'my-flag' should be captured to this Sentry event.

variable feedbackAsyncIntegration

const feedbackAsyncIntegration: any;

• An integration to add user feedback to your application, while loading most of the code lazily only when it's needed.

variable feedbackIntegration

const feedbackIntegration: any;

• Add a widget to capture user feedback to your application.

variable feedbackSyncIntegration

const feedbackSyncIntegration: any;

• Add a widget to capture user feedback to your application.

variable geckoStackLineParser

const geckoStackLineParser: StackLineParser;

variable opera10StackLineParser

const opera10StackLineParser: StackLineParser;

variable opera11StackLineParser

const opera11StackLineParser: StackLineParser;

variable WINDOW

const WINDOW: any;

variable winjsStackLineParser

const winjsStackLineParser: StackLineParser;

function breadcrumbsIntegration

breadcrumbsIntegration: (
    options?: Partial<BreadcrumbsOptions> | undefined
) => any;

function browserApiErrorsIntegration

browserApiErrorsIntegration: (
    options?: Partial<BrowserApiErrorsOptions> | undefined
) => any;

• Wrap timer functions and event targets to catch errors and provide better meta data.

function browserProfilingIntegration

browserProfilingIntegration: () => any;

function browserSessionIntegration

browserSessionIntegration: () => any;

• When added, automatically creates sessions which allow you to track adoption and crashes (crash free rate) in your Releases in Sentry. More information: https://docs.sentry.io/product/releases/health/

  Note: In order for session tracking to work, you need to set up Releases: https://docs.sentry.io/product/releases/

function browserTracingIntegration

browserTracingIntegration: (_options?: Partial<BrowserTracingOptions>) => {
    name: string;
    afterAllSetup(client: Client<any>): void;
};

• The Browser Tracing integration automatically instruments browser pageload/navigation actions as transactions, and captures requests, metrics and errors as spans.

  The integration can be configured with a variety of options, and can be extended to use any routing library.

  We explicitly export the proper type here, as this has to be extended in some cases.

function buildLaunchDarklyFlagUsedHandler

buildLaunchDarklyFlagUsedHandler: () => LDInspectionFlagUsedHandler;

• LaunchDarkly hook that listens for flag evaluations and updates the flags context in our Sentry scope. This needs to be registered as an 'inspector' in LaunchDarkly initialize() options, separately from launchDarklyIntegration. Both are needed to collect feature flags on error.

function contextLinesIntegration

contextLinesIntegration: (options?: ContextLinesOptions | undefined) => any;

• Collects source context lines around the lines of stackframes pointing to JS embedded in the current page's HTML.

  This integration DOES NOT work for stack frames pointing to JS files that are loaded by the browser. For frames pointing to files, context lines are added during ingestion and symbolication by attempting to download the JS files to the Sentry backend.

  Use this integration if you have inline JS code in HTML pages that can't be accessed by our backend (e.g. due to a login-protected page).

function createUserFeedbackEnvelope

createUserFeedbackEnvelope: (
    feedback: UserFeedback,
    {
        metadata,
        tunnel,
        dsn,
    }: {
        metadata: SdkMetadata | undefined;
        tunnel: string | undefined;
        dsn: DsnComponents | undefined;
    }
) => EventEnvelope;

• Creates an envelope from a user feedback.

function diagnoseSdkConnectivity

diagnoseSdkConnectivity: () => Promise<
    'no-client-active' | 'sentry-unreachable' | 'no-dsn-configured' | void
>;

• A function to diagnose why the SDK might not be successfully sending data.

  Possible return values wrapped in a Promise: - "no-client-active" - There was no active client when the function was called. This possibly means that the SDK was not initialized yet. - "sentry-unreachable" - The Sentry SaaS servers were not reachable. This likely means that there is an ad blocker active on the page or that there are other connection issues.

  If the function doesn't detect an issue it resolves to undefined.

function eventFromException

eventFromException: (
    stackParser: StackParser,
    exception: unknown,
    hint?: EventHint,
    attachStacktrace?: boolean
) => PromiseLike<Event>;

• Creates an Event from all inputs to captureException and non-primitive inputs to captureMessage.

function eventFromMessage

eventFromMessage: (
    stackParser: StackParser,
    message: ParameterizedString,
    level?: SeverityLevel,
    hint?: EventHint,
    attachStacktrace?: boolean
) => PromiseLike<Event>;

• Builds and Event from a Message

function exceptionFromError

exceptionFromError: (stackParser: StackParser, ex: Error) => Exception;

• This function creates an exception from a JavaScript Error

function forceLoad

forceLoad: () => void;

• This function is here to be API compatible with the loader.

function getDefaultIntegrations

getDefaultIntegrations: (_options: Options) => Integration[];

• Get the default integrations for the browser SDK.

function globalHandlersIntegration

globalHandlersIntegration: (
    options?: Partial<GlobalHandlersIntegrations> | undefined
) => any;

function graphqlClientIntegration

graphqlClientIntegration: (options: GraphQLClientOptions) => any;

• This integration ensures that GraphQL requests made in the browser have their GraphQL-specific data captured and attached to spans and breadcrumbs.

function httpClientIntegration

httpClientIntegration: (options?: Partial<HttpClientOptions> | undefined) => any;

• Create events for failed client side HTTP requests.

function httpContextIntegration

httpContextIntegration: () => any;

• Collects information about HTTP request headers and attaches them to the event.

function init

init: (browserOptions?: BrowserOptions) => Client | undefined;

• The Sentry Browser SDK Client.

  To use this SDK, call the init function as early as possible when loading the web page. To set context information or send manual events, use the provided methods.

  Example 1

  import { init } from '@sentry/browser';
  
  init({
    dsn: '__DSN__',
    // ...
  });

  Example 2

  import { addBreadcrumb } from '@sentry/browser';
  addBreadcrumb({
    message: 'My Breadcrumb',
    // ...
  });

  Example 3

  import * as Sentry from '@sentry/browser';
  Sentry.captureMessage('Hello, world!');
  Sentry.captureException(new Error('Good bye'));
  Sentry.captureEvent({
    message: 'Manual',
    stacktrace: [
      // ...
    ],
  });

  See Also

  • BrowserOptions for documentation on configuration options.

function instrumentOutgoingRequests

instrumentOutgoingRequests: (
    client: Client,
    _options?: Partial<RequestInstrumentationOptions>
) => void;

• Registers span creators for xhr and fetch requests

function launchDarklyIntegration

launchDarklyIntegration: () => any;

• Sentry integration for capturing feature flags from LaunchDarkly.

  See the [feature flag documentation](https://develop.sentry.dev/sdk/expected-features/#feature-flags) for more information.

  Example 1

  import * as Sentry from '@sentry/browser';
  import {launchDarklyIntegration, buildLaunchDarklyFlagUsedInspector} from '@sentry/browser';
  import * as LaunchDarkly from 'launchdarkly-js-client-sdk';
  
  Sentry.init(..., integrations: [launchDarklyIntegration()])
  const ldClient = LaunchDarkly.initialize(..., {inspectors: [buildLaunchDarklyFlagUsedHandler()]});

function lazyLoadIntegration

lazyLoadIntegration: (
    name: keyof typeof LazyLoadableIntegrations,
    scriptNonce?: string
) => Promise<IntegrationFn>;

• Lazy load an integration from the CDN. Rejects if the integration cannot be loaded.

function linkedErrorsIntegration

linkedErrorsIntegration: (options?: LinkedErrorsOptions | undefined) => any;

• Aggregrate linked errors in an event.

function makeBrowserOfflineTransport

makeBrowserOfflineTransport: <T extends BaseTransportOptions>(
    createTransport?: (options: T) => Transport
) => (options: T & BrowserOfflineTransportOptions) => Transport;

• Creates a transport that uses IndexedDb to store events when offline.

function makeFetchTransport

makeFetchTransport: (
    options: BrowserTransportOptions,
    nativeFetch?: typeof WINDOW.fetch | undefined
) => Transport;

• Creates a Transport that uses the Fetch API to send events to Sentry.

function onLoad

onLoad: (callback: () => void) => void;

• This function is here to be API compatible with the loader.

function openFeatureIntegration

openFeatureIntegration: () => any;

function reportingObserverIntegration

reportingObserverIntegration: (
    options?: ReportingObserverOptions | undefined
) => any;

• Reporting API integration - https://w3c.github.io/reporting/

function showReportDialog

showReportDialog: (options?: ReportDialogOptions) => void;

• Present the user with a report dialog.

  Parameter options

  Everything is optional, we try to fetch all info need from the global scope.

function spotlightBrowserIntegration

spotlightBrowserIntegration: (
    options?: Partial<SpotlightConnectionOptions> | undefined
) => any;

• Use this integration to send errors and transactions to Spotlight.

  Learn more about spotlight at https://spotlightjs.com

function startBrowserTracingNavigationSpan

startBrowserTracingNavigationSpan: (
    client: Client,
    spanOptions: StartSpanOptions
) => Span | undefined;

• Manually start a navigation span. This will only do something if a browser tracing integration has been setup.

function startBrowserTracingPageLoadSpan

startBrowserTracingPageLoadSpan: (
    client: Client,
    spanOptions: StartSpanOptions,
    traceOptions?: { sentryTrace?: string | undefined; baggage?: string | undefined }
) => Span | undefined;

• Manually start a page load span. This will only do something if a browser tracing integration integration has been setup.

  If you provide a custom traceOptions object, it will be used to continue the trace instead of the default behavior, which is to look it up on the tags.

function statsigIntegration

statsigIntegration: (args_0: { featureFlagClient: StatsigClient }) => any;

• Sentry integration for capturing feature flag evaluations from the Statsig js-client SDK.

  See the [feature flag documentation](https://develop.sentry.dev/sdk/expected-features/#feature-flags) for more information.

  Example 1

  import { StatsigClient } from '@statsig/js-client';
  import * as Sentry from '@sentry/browser';
  
  const statsigClient = new StatsigClient();
  
  Sentry.init({
    dsn: '___PUBLIC_DSN___',
    integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
  });
  
  await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
  
  const result = statsigClient.checkGate('my-feature-gate');
  Sentry.captureException(new Error('something went wrong'));

function unleashIntegration

unleashIntegration: (args_0: UnleashIntegrationOptions) => any;

• Sentry integration for capturing feature flag evaluations from the Unleash SDK.

  See the [feature flag documentation](https://develop.sentry.dev/sdk/expected-features/#feature-flags) for more information.

  Example 1

  import { UnleashClient } from 'unleash-proxy-client';
  import * as Sentry from '@sentry/browser';
  
  Sentry.init({
    dsn: '___PUBLIC_DSN___',
    integrations: [Sentry.unleashIntegration({featureFlagClientClass: UnleashClient})],
  });
  
  const unleash = new UnleashClient(...);
  unleash.start();
  
  unleash.isEnabled('my-feature');
  Sentry.captureException(new Error('something went wrong'));

type BrowserOptions

type BrowserOptions = Options<BrowserTransportOptions> &
    BrowserClientReplayOptions &
    BrowserClientProfilingOptions & {
        /**
         * Important: Only set this option if you know what you are doing!
         *
         * By default, the SDK will check if `Sentry.init` is called in a browser extension.
         * In case it is, it will stop initialization and log a warning
         * because browser extensions require a different Sentry initialization process:
         * https://docs.sentry.io/platforms/javascript/best-practices/shared-environments/
         *
         * Setting up the SDK in a browser extension with global error monitoring is not recommended
         * and will likely flood you with errors from other web sites or extensions. This can heavily
         * impact your quota and cause interference with your and other Sentry SDKs in shared environments.
         *
         * If this check wrongfully flags your setup as a browser extension, you can set this
         * option to `true` to skip the check.
         *
         * @default false
         */
        skipBrowserExtensionCheck?: boolean;
    };

• Configuration options for the Sentry Browser SDK.

  See Also

  • @sentry/core Options for more information.