Use when capturing and reporting errors to Sentry, adding context, or handling exceptions. Covers error boundaries, context enrichment, and fingerprinting.
Capture errors and enrich them with context for better debugging.
import * as Sentry from "@sentry/browser";
try {
riskyOperation();
} catch (error) {
Sentry.captureException(error);
}
Sentry.captureException(error, {
tags: {
section: "checkout",
feature: "payment",
},
extra: {
orderId: order.id,
cartItems: cart.items.length,
},
level: "error",
});
Sentry.captureMessage("User exceeded rate limit", {
level: "warning",
tags: { userId: user.id },
});
Sentry.setUser({
id: user.id,
email: user.email,
username: user.username,
ip_address: "{{auto}}",
});
// Clear on logout
Sentry.setUser(null);
// Global tags
Sentry.setTag("app.version", "1.2.3");
Sentry.setTag("tenant", customer.tenantId);
// Per-event tags
Sentry.captureException(error, {
tags: { operation: "database_query" },
});
Sentry.setExtra("orderDetails", {
items: order.items,
total: order.total,
});
Sentry.setContext("order", {
id: order.id,
status: order.status,
items: order.items.length,
});
Sentry.setContext("customer", {
plan: customer.plan,
region: customer.region,
});
// Most integrations add breadcrumbs automatically
// Console, fetch, XHR, DOM events, navigation
Sentry.addBreadcrumb({
category: "auth",
message: "User logged in",
level: "info",
data: {
userId: user.id,
method: "oauth",
},
});
Sentry.init({
beforeBreadcrumb(breadcrumb, hint) {
// Filter or modify breadcrumbs
if (breadcrumb.category === "console") {
return null; // Don't capture console logs
}
return breadcrumb;
},
maxBreadcrumbs: 50,
});
import * as Sentry from "@sentry/react";
// Basic error boundary
const App = () => (
<Sentry.ErrorBoundary fallback={<ErrorPage />}>
<YourApp />
</Sentry.ErrorBoundary>
);
// With custom fallback and onError
<Sentry.ErrorBoundary
fallback={({ error, resetError }) => (
<div>
<p>Something went wrong: {error.message}</p>
<button onClick={resetError}>Try again</button>
</div>
)}
onError={(error, componentStack) => {
console.error("Caught by Sentry boundary:", error);
}}
beforeCapture={(scope) => {
scope.setTag("location", "checkout");
}}
>
<CheckoutFlow />
</Sentry.ErrorBoundary>
Sentry.captureException(error, {
fingerprint: ["{{ default }}", user.id],
});
Sentry.init({
beforeSend(event) {
if (event.exception?.values?.[0]?.type === "ChunkLoadError") {
event.fingerprint = ["chunk-load-error"];
}
return event;
},
});
Sentry.configureScope((scope) => {
scope.setUser({ id: user.id });
scope.setTag("theme", "dark");
scope.setLevel("warning");
});
Sentry.withScope((scope) => {
scope.setTag("operation", "batch_import");
scope.setExtra("batchSize", items.length);
Sentry.captureException(error);
});
// Tags/extra only apply within this scope