Sentry JavaScript (@sentry/browser)

@sentry/browser is the flagship client-side SDK from the Sentry JavaScript monorepo, giving vanilla JS and framework-agnostic browser apps a single Sentry.init() call to unlock error monitoring, distributed tracing, session replay, and user feedback collection. It is the foundation that framework-specific SDKs (React, Vue, Angular, Svelte, Astro, and more) build on top of, so adopting it directly gives teams the same instrumentation core used across the entire Sentry JavaScript ecosystem.

Beyond basic exception capture, the SDK ships default integrations for global error handlers, breadcrumbs, HTTP context, and dedupe, plus opt-in integrations for browser tracing (Core Web Vitals, navigation/pageload spans), session replay, canvas replay, and both sync and async feedback widgets. Everything is tree-shakeable and side-effect free, so bundlers only pull in the pieces an app actually imports.

What You Get

• Automatic global error and unhandled-promise-rejection capture via globalHandlersIntegration
• Browser performance tracing with Core Web Vitals, pageload and navigation spans via browserTracingIntegration
• Session Replay and canvas replay integrations for visual reproduction of user sessions
• Synchronous and asynchronous in-app user feedback widgets (feedbackSyncIntegration / feedbackAsyncIntegration)
• Breadcrumb trails, HTTP/console context, and automatic dedupe of repeated errors out of the box
• A pluggable integration system (httpClientIntegration, contextLinesIntegration, graphqlClientIntegration, etc.) for extending what gets captured

Common Use Cases

• Monitoring production JavaScript errors and stack traces for a single-page app or static site
• Tracking Core Web Vitals and route-level performance regressions across page loads and client-side navigations
• Recording session replays to visually reproduce a user-reported bug
• Collecting structured in-app user feedback tied directly to a captured error or session

Under The Hood

Architecture: @sentry/browser is a thin browser-specific layer over @sentry/core: sdk.ts assembles a default integration list (inboundFilters, functionToString, browserApiErrors, breadcrumbs, globalHandlers, linkedErrors, dedupe, httpContext, cultureContext, browserSession) and calls core’s initAndBind with a BrowserClient (client.ts) that wires in eventFromException/eventFromMessage (eventbuilder.ts) and a fetch-based transport (transports/fetch.ts). Optional capabilities — tracing (tracing/browserTracingIntegration.ts), replay, replay-canvas, and feedback (feedbackSync.ts/feedbackAsync.ts) — are separate sibling packages re-exported from index.ts, so the dependency graph stays a star around @sentry/core rather than a tangle.

Tech Stack: 100% TypeScript, built with Rollup (rollup.npm.config.mjs for the tree-shakeable npm build, rollup.bundle.config.mjs for CDN bundles) and typed via a dedicated tsconfig.types.json plus downlevel-dts for TS 3.8 compatibility. Runtime dependencies are all first-party Sentry packages (@sentry/core, @sentry/browser-utils, @sentry/feedback, @sentry/replay, @sentry/replay-canvas, @sentry/conventions), keeping the external dependency surface at zero.

Code Quality: The package ships 50+ dedicated *.test.ts files under test/ (index bundling variants, eventbuilder, userfeedback, tracing) run via Vitest, plus madge --circular to guard against circular imports and oxlint --type-aware for type-aware linting. Public functions carry JSDoc with @example blocks, and internal helpers use exhaustive TypeScript types imported from @sentry/core rather than any.

API Design: The package favors a flat, function-based public API (captureException, addBreadcrumb, setUser, startSpan) over a class hierarchy, so getting started is a single Sentry.init({ dsn }) call plus direct function imports — no client instance to thread through the app. Every optional capability (tracing, replay, feedback) is its own named integration/export, letting consumers opt in without pulling unused code into their bundle (sideEffects: false), a deliberate ergonomics/bundle-size trade-off applied consistently across the whole @sentry/* family.