or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

context-management.mderror-capture.mdindex.mdintegrations.mdperformance-monitoring.mdsdk-initialization.mdsession-management.mdsession-replay.mdtransport.mduser-feedback.md
tile.json

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.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@sentry/browser@10.10.x

To install, run

npx @tessl/cli install tessl/npm-sentry--browser@10.10.0

index.mddocs/

Sentry Browser SDK

The Sentry Browser SDK provides comprehensive error monitoring, performance tracking, user feedback collection, and session management capabilities for client-side JavaScript applications. It offers automatic error capturing, manual event reporting, breadcrumb tracking, user context management, performance monitoring, session replay, and extensive integration options designed for maximum compatibility across modern browsers.

Package Information

  • Package Name: @sentry/browser
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @sentry/browser

Core Imports

import * as Sentry from "@sentry/browser";

For specific functionality:

import { 
  init, 
  captureException, 
  captureMessage, 
  addBreadcrumb,
  setUser,
  setTag,
  setExtra
} from "@sentry/browser";

CommonJS:

const Sentry = require("@sentry/browser");
// or specific imports
const { init, captureException } = require("@sentry/browser");

Basic Usage

import * as Sentry from "@sentry/browser";

// Initialize the SDK
Sentry.init({
  dsn: "YOUR_DSN_HERE",
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

// Capture errors
try {
  throw new Error("Something went wrong");
} catch (error) {
  Sentry.captureException(error);
}

// Capture messages
Sentry.captureMessage("User clicked button", "info");

// Add context
Sentry.setUser({ id: "12345", email: "user@example.com" });
Sentry.setTag("environment", "production");
Sentry.addBreadcrumb({
  message: "User navigated to page",
  category: "navigation",
  level: "info",
});

Architecture

The Sentry Browser SDK is built around several key components:

  • Client: Core BrowserClient class that manages configuration and event processing
  • SDK Initialization: Main init() function with comprehensive configuration options
  • Event Capture: Multiple capture methods for exceptions, messages, and custom events
  • Context Management: Scope-based system for managing user context, tags, and extra data
  • Integrations: Modular system with 25+ integrations for automatic and manual instrumentation
  • Transport Layer: Pluggable transport system with fetch-based and offline-capable options
  • Performance Monitoring: Comprehensive tracing system with browser-specific instrumentation
  • Session Replay: Complete user session recording and playback capabilities
  • User Feedback: Built-in widgets and APIs for collecting user feedback on errors

Capabilities

SDK Initialization and Configuration

Core SDK setup and configuration management for browser environments.

function init(options?: BrowserOptions): Client | undefined;

interface BrowserOptions {
  dsn?: string;
  debug?: boolean;
  environment?: string;
  release?: string;
  sampleRate?: number;
  maxBreadcrumbs?: number;
  attachStacktrace?: boolean;
  sendDefaultPii?: boolean;
  integrations?: Integration[];
  beforeSend?: (event: Event, hint: EventHint) => Event | null | PromiseLike<Event | null>;
  beforeBreadcrumb?: (breadcrumb: Breadcrumb, hint?: BreadcrumbHint) => Breadcrumb | null;
  tracesSampleRate?: number;
  profilesSampleRate?: number;
  // ... additional browser-specific options
}

SDK Initialization

Error and Event Capture

Comprehensive error capturing and event reporting functionality.

function captureException(exception: any, hint?: EventHint): string;
function captureMessage(message: string, level?: SeverityLevel, hint?: EventHint): string;
function captureEvent(event: Event, hint?: EventHint): string;
function captureFeedback(feedback: FeedbackEvent, hint?: EventHint): string;

type SeverityLevel = "fatal" | "error" | "warning" | "info" | "debug";

Error and Event Capture

Context and Scope Management

User context, tags, and extra data management system.

function setUser(user: User): void;
function setTag(key: string, value: Primitive): void;
function setTags(tags: { [key: string]: Primitive }): void;
function setExtra(key: string, extra: Extra): void;
function setContext(key: string, context: Context): void;
function withScope(callback: (scope: Scope) => void): void;

interface User {
  id?: string;
  username?: string;
  email?: string;
  ip_address?: string;
  [key: string]: any;
}

Context Management

Performance Monitoring and Tracing

Browser performance monitoring with distributed tracing capabilities.

function startSpan(context: SpanContext): Span;
function getActiveSpan(): Span | undefined;
function withActiveSpan<T>(span: Span | null, callback: () => T): T;
function startNewTrace<T>(callback: () => T): T;

interface Span {
  setTag(key: string, value: string): void;
  setData(key: string, value: any): void;
  setStatus(status: SpanStatus): void;
  end(timestamp?: number): void;
}

Performance Monitoring

Integrations

Comprehensive integration system for automatic instrumentation and extended functionality.

function browserTracingIntegration(options?: BrowserTracingOptions): Integration;
function replayIntegration(options?: ReplayOptions): Integration;
function feedbackIntegration(options?: FeedbackOptions): Integration;
function breadcrumbsIntegration(options?: BreadcrumbsOptions): Integration;
function globalHandlersIntegration(options?: GlobalHandlersOptions): Integration;

interface Integration {
  name: string;
  setupOnce(addGlobalEventProcessor: (callback: EventProcessor) => void, getCurrentHub: () => Hub): void;
}

Integrations

Session Management

User session tracking and management.

function startSession(context?: SessionContext): Session;
function endSession(): void;
function captureSession(end?: boolean): void;

interface Session {
  sid: string;
  did?: string;
  init: boolean;
  timestamp: number;
  started: number;
  duration?: number;
  status: SessionStatus;
  release?: string;
  environment?: string;
  userAgent?: string;
  ipAddress?: string;
  user?: User;
}

Session Management

User Feedback

User feedback collection system with modal widgets and programmatic APIs.

function showReportDialog(options?: ReportDialogOptions): void;
function getFeedback(): FeedbackWidget | null;
function sendFeedback(feedback: UserFeedback): void;

interface ReportDialogOptions {
  eventId?: string;
  dsn?: string;
  user?: User;
  title?: string;
  subtitle?: string;
  subtitle2?: string;
  labelName?: string;
  labelEmail?: string;
  labelComments?: string;
  labelClose?: string;
  labelSubmit?: string;
  errorGeneric?: string;
  errorFormEntry?: string;
  successMessage?: string;
  onLoad?: () => void;
  onClose?: () => void;
}

User Feedback

Session Replay

Complete user session recording and playback capabilities.

function getReplay(): ReplayClient | undefined;
function replayIntegration(options?: ReplayOptions): Integration;
function replayCanvasIntegration(options?: ReplayCanvasOptions): Integration;

interface ReplayOptions {
  sessionSampleRate?: number;
  errorSampleRate?: number;
  maskAllText?: boolean;
  maskAllInputs?: boolean;
  blockAllMedia?: boolean;
  mutationBreadcrumbLimit?: number;
  mutationLimit?: number;
  slowClickTimeout?: number;
  slowClickIgnoreSelectors?: string[];
}

Session Replay

Transport and Communication

Transport layer for sending events to Sentry with offline support.

function makeFetchTransport(options: BrowserTransportOptions): Transport;
function makeBrowserOfflineTransport(createTransport: (options: BrowserTransportOptions) => Transport): Transport;

interface BrowserTransportOptions {
  url: string;
  headers?: Record<string, string>;
  fetchOptions?: RequestInit;
}

Transport

Logging and Debugging

Structured logging API for capturing logs with different severity levels.

namespace logger {
  function trace(message: ParameterizedString, attributes?: Log['attributes']): void;
  function debug(message: ParameterizedString, attributes?: Log['attributes']): void;
  function info(message: ParameterizedString, attributes?: Log['attributes']): void;
  function warn(message: ParameterizedString, attributes?: Log['attributes']): void;
  function error(message: ParameterizedString, attributes?: Log['attributes']): void;
  function fatal(message: ParameterizedString, attributes?: Log['attributes']): void;
  function fmt(template: TemplateStringsArray, ...values: any[]): ParameterizedString;
}

function diagnoseSdkConnectivity(): Promise<DiagnosticReport>;

interface Log {
  level: LogSeverityLevel;
  message: ParameterizedString;
  attributes?: Record<string, any>;
  severityNumber?: number;
}

type LogSeverityLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
type ParameterizedString = string | { __sentry_template_string__: TemplateStringsArray; __sentry_template_values__: any[] };

interface DiagnosticReport {
  success: boolean;
  issues: DiagnosticIssue[];
}

interface DiagnosticIssue {
  type: 'network' | 'configuration' | 'permissions';
  message: string;
  severity: 'error' | 'warning' | 'info';
}

Usage Example:

import * as Sentry from "@sentry/browser";

// Initialize with logging enabled
Sentry.init({
  dsn: "YOUR_DSN_HERE",
  enableLogs: true,
});

// Structured logging
Sentry.logger.info("User completed checkout", {
  orderId: "order-123",
  amount: 99.99,
  paymentMethod: "credit_card"
});

// Template string logging
Sentry.logger.debug(Sentry.logger.fmt`User ${userId} navigated to ${page}`, {
  userId: "123",
  sessionId: "abc-xyz"
});

// Diagnose connectivity issues
const report = await Sentry.diagnoseSdkConnectivity();
if (!report.success) {
  console.error("SDK connectivity issues:", report.issues);
}

Core Types

interface Event {
  event_id?: string;
  message?: string;
  timestamp?: number;
  level?: SeverityLevel;
  platform?: string;
  logger?: string;
  server_name?: string;
  release?: string;
  dist?: string;
  environment?: string;
  modules?: { [key: string]: string };
  extra?: { [key: string]: any };
  tags?: { [key: string]: Primitive };
  contexts?: { [key: string]: Context };
  user?: User;
  exception?: {
    values?: Exception[];
  };
  stacktrace?: Stacktrace;
  request?: Partial<Request>;
  transaction?: string;
  fingerprint?: string[];
  breadcrumbs?: Breadcrumb[];
}

interface Breadcrumb {
  type?: string;
  level?: SeverityLevel;
  event_id?: string;
  category?: string;
  message?: string;
  data?: any;
  timestamp?: number;
}

interface Exception {
  type?: string;
  value?: string;
  module?: string;
  thread_id?: number;
  stacktrace?: Stacktrace;
  mechanism?: Mechanism;
}

interface Stacktrace {
  frames?: StackFrame[];
  frames_omitted?: [number, number];
}

interface StackFrame {
  filename?: string;
  function?: string;
  module?: string;
  platform?: string;
  lineno?: number;
  colno?: number;
  abs_path?: string;
  context_line?: string;
  pre_context?: string[];
  post_context?: string[];
  in_app?: boolean;
  instruction_addr?: string;
  addr_mode?: string;
  package?: string;
  symbol?: string;
  symbol_addr?: string;
  image_addr?: string;
}

type Primitive = number | string | boolean | bigint | symbol | null | undefined;
type Context = Record<string, any>;
type Extra = any;