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

error-capture.mddocs/

Error and Event Capture

Comprehensive error capturing and event reporting functionality for monitoring application errors, messages, and custom events in browser environments.

Capabilities

Exception Capture

Capture and report exceptions to Sentry.

/**
 * Capture an exception and send it to Sentry
 * @param exception - The exception to capture (Error object, string, or any value)
 * @param hint - Additional context and configuration for the event
 * @returns Event ID string for the captured exception
 */
function captureException(exception: any, hint?: EventHint): string;

Usage Examples:

import { captureException } from "@sentry/browser";

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

// Capture with additional context
captureException(new Error("API request failed"), {
  tags: { endpoint: "/api/users" },
  extra: { requestId: "12345", userId: "user-123" },
  level: "error",
});

// Capture non-Error values
captureException("String error message");
captureException({ customError: "Custom error object" });

Message Capture

Capture and report custom messages with different severity levels.

/**
 * Capture a message and send it to Sentry
 * @param message - The message to capture
 * @param level - Severity level of the message
 * @param hint - Additional context and configuration for the event
 * @returns Event ID string for the captured message
 */
function captureMessage(
  message: string, 
  level?: SeverityLevel, 
  hint?: EventHint
): string;

Usage Examples:

import { captureMessage } from "@sentry/browser";

// Simple message capture
captureMessage("User completed checkout");

// With severity level
captureMessage("Database connection slow", "warning");

// With additional context
captureMessage("Feature flag toggled", "info", {
  tags: { feature: "new-ui", user_segment: "beta" },
  extra: { previousValue: false, newValue: true },
});

Custom Event Capture

Capture fully custom events with complete control over event structure.

/**
 * Capture a custom event and send it to Sentry
 * @param event - The event object to capture
 * @param hint - Additional context and configuration for the event
 * @returns Event ID string for the captured event
 */
function captureEvent(event: Event, hint?: EventHint): string;

Usage Examples:

import { captureEvent } from "@sentry/browser";

// Custom event with full structure
captureEvent({
  message: "Custom business logic event",
  level: "info",
  tags: { module: "payment", action: "refund" },
  extra: { 
    amount: 99.99, 
    currency: "USD", 
    reason: "customer_request" 
  },
  contexts: {
    payment: {
      provider: "stripe",
      method: "credit_card",
    },
  },
});

// Event with custom fingerprint for grouping
captureEvent({
  message: "Rate limit exceeded",
  level: "warning",
  fingerprint: ["rate-limit", "{{ default }}"],
  tags: { endpoint: "/api/search" },
});

Feedback Capture

Capture user feedback associated with errors or general feedback.

/**
 * Capture user feedback and send it to Sentry
 * @param feedback - The feedback event to capture
 * @param hint - Additional context and configuration for the event
 * @returns Event ID string for the captured feedback
 */
function captureFeedback(feedback: FeedbackEvent, hint?: EventHint): string;

Session Capture

Capture session-related events.

/**
 * Capture session information
 * @param end - Whether to end the current session
 */
function captureSession(end?: boolean): void;

Event Processing

Get the ID of the last captured event.

/**
 * Get the ID of the last event that was captured
 * @returns Event ID string or undefined if no event was captured
 */
function lastEventId(): string | undefined;

Add custom event processors to modify events before they are sent.

/**
 * Add a global event processor that processes all events
 * @param processor - Function that processes and optionally modifies events
 */
function addEventProcessor(processor: EventProcessor): void;

type EventProcessor = (event: Event, hint: EventHint) => Event | null | PromiseLike<Event | null>;

Usage Example:

import { addEventProcessor } from "@sentry/browser";

addEventProcessor((event, hint) => {
  // Add custom data to all events
  event.tags = {
    ...event.tags,
    customTag: "customValue",
  };
  
  // Filter out events containing sensitive data
  if (event.message && event.message.includes("password")) {
    return null; // Don't send this event
  }
  
  return event;
});

Types

Event Structure

interface Event {
  /** Unique identifier for this event */
  event_id?: string;
  
  /** Primary message for this event */
  message?: string;
  
  /** Timestamp when the event occurred */
  timestamp?: number;
  
  /** Severity level */
  level?: SeverityLevel;
  
  /** Platform identifier */
  platform?: string;
  
  /** Logger name that created this event */
  logger?: string;
  
  /** Server name where event occurred */
  server_name?: string;
  
  /** Release version */
  release?: string;
  
  /** Distribution identifier */
  dist?: string;
  
  /** Environment name */
  environment?: string;
  
  /** Loaded modules */
  modules?: { [key: string]: string };
  
  /** Additional arbitrary data */
  extra?: { [key: string]: any };
  
  /** Tags for categorization and filtering */
  tags?: { [key: string]: Primitive };
  
  /** Structured context data */
  contexts?: { [key: string]: Context };
  
  /** User information */
  user?: User;
  
  /** Exception information */
  exception?: {
    values?: Exception[];
  };
  
  /** Stack trace information */
  stacktrace?: Stacktrace;
  
  /** HTTP request information */
  request?: Partial<Request>;
  
  /** Transaction name */
  transaction?: string;
  
  /** Custom fingerprint for event grouping */
  fingerprint?: string[];
  
  /** Breadcrumbs leading up to this event */
  breadcrumbs?: Breadcrumb[];
}

Event Hint

interface EventHint {
  /** Original exception object that caused this event */
  originalException?: unknown;
  
  /** Synthetic exception created for this event */
  syntheticException?: Error;
  
  /** Event ID to use for this event */
  event_id?: string;
  
  /** Additional tags to apply */
  tags?: { [key: string]: Primitive };
  
  /** Additional extra data to apply */
  extra?: { [key: string]: any };
  
  /** Severity level override */
  level?: SeverityLevel;
  
  /** Fingerprint override */
  fingerprint?: string[];
  
  /** Mechanism that captured this event */
  mechanism?: Mechanism;
}

Severity Levels

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

Exception Structure

interface Exception {
  /** Exception type (e.g., "TypeError") */
  type?: string;
  
  /** Exception message */
  value?: string;
  
  /** Module where exception occurred */
  module?: string;
  
  /** Thread ID */
  thread_id?: number;
  
  /** Stack trace for this exception */
  stacktrace?: Stacktrace;
  
  /** Mechanism that caught this exception */
  mechanism?: Mechanism;
}

Mechanism

interface Mechanism {
  /** Type of mechanism (e.g., "generic", "promise") */
  type: string;
  
  /** Whether this was handled or unhandled */
  handled?: boolean;
  
  /** Additional mechanism data */
  data?: { [key: string]: any };
  
  /** Description of the mechanism */
  description?: string;
  
  /** Help URL for this mechanism */
  help_link?: string;
  
  /** Whether mechanism data should be included in grouping */
  synthetic?: boolean;
}

Feedback Event

interface FeedbackEvent {
  /** User's name */
  name?: string;
  
  /** User's email */
  email?: string;
  
  /** Feedback message */
  message: string;
  
  /** Associated event ID */
  event_id?: string;
  
  /** URL where feedback was given */
  url?: string;
  
  /** User information */
  user?: User;
  
  /** Additional tags */
  tags?: { [key: string]: Primitive };
}

Error Handling Patterns

Automatic Error Capture

The SDK automatically captures unhandled errors and promise rejections when properly configured with integrations:

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

Sentry.init({
  dsn: "YOUR_DSN",
  integrations: [
    Sentry.globalHandlersIntegration(), // Captures unhandled errors
    Sentry.browserApiErrorsIntegration(), // Captures browser API errors
  ],
});

Manual Error Boundaries

For React applications or manual error handling:

import { captureException, withScope } from "@sentry/browser";

function handleError(error: Error, errorInfo?: any) {
  withScope((scope) => {
    if (errorInfo) {
      scope.setContext("errorInfo", errorInfo);
    }
    scope.setTag("errorBoundary", true);
    captureException(error);
  });
}

Filtering Sensitive Data

Use beforeSend to filter out sensitive information:

Sentry.init({
  dsn: "YOUR_DSN",
  beforeSend(event, hint) {
    // Remove sensitive data
    if (event.extra) {
      delete event.extra.password;
      delete event.extra.creditCard;
    }
    
    // Filter out noisy errors
    if (event.exception) {
      const error = hint.originalException;
      if (error instanceof TypeError && error.message.includes("Script error")) {
        return null;
      }
    }
    
    return event;
  },
});

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