Official Sentry SDK for browsers providing comprehensive error monitoring, performance tracking, user feedback collection, and session management capabilities for client-side JavaScript applications.
—
Comprehensive error capturing and event reporting functionality for monitoring application errors, messages, and custom events in browser environments.
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" });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 },
});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" },
});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;Capture session-related events.
/**
* Capture session information
* @param end - Whether to end the current session
*/
function captureSession(end?: boolean): void;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;
});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[];
}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;
}type SeverityLevel = "fatal" | "error" | "warning" | "info" | "debug";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;
}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;
}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 };
}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
],
});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);
});
}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