Capturing Exceptions
Capture errors that are handled but still worth tracking.
typescript
import * as Sentry from "@sentry/nextjs";
try {
await riskyOperation();
} catch (err) {
Sentry.captureException(err);
}import * as Sentry from "@sentry/nextjs";
try {
await riskyOperation();
} catch (err) {
Sentry.captureException(err);
}Adding Context
setUser persists for the session. Attach tags (indexed, filterable) and extra (arbitrary detail) per exception.
typescript
import * as Sentry from "@sentry/nextjs";
Sentry.setUser({ id: session.user.id, email: session.user.email });
Sentry.captureException(err, {
tags: { feature: "checkout", plan: "pro" },
extra: { orderId: "order_123", items: cart.items },
});import * as Sentry from "@sentry/nextjs";
Sentry.setUser({ id: session.user.id, email: session.user.email });
Sentry.captureException(err, {
tags: { feature: "checkout", plan: "pro" },
extra: { orderId: "order_123", items: cart.items },
});Clear the user on sign out.
typescript
Sentry.setUser(null);Sentry.setUser(null);Performance Tracing
Wrap meaningful operations in startSpan. The sync form receives the span for attributes.
typescript
import * as Sentry from "@sentry/nextjs";
const users = await Sentry.startSpan(
{ op: "http.client", name: "GET /api/users" },
async () => (await fetch("/api/users")).json(),
);
Sentry.startSpan({ op: "ui.click", name: "Submit Button Click" }, (span) => {
span.setAttribute("form", "checkout");
processSubmit();
});import * as Sentry from "@sentry/nextjs";
const users = await Sentry.startSpan(
{ op: "http.client", name: "GET /api/users" },
async () => (await fetch("/api/users")).json(),
);
Sentry.startSpan({ op: "ui.click", name: "Submit Button Click" }, (span) => {
span.setAttribute("form", "checkout");
processSubmit();
});Breadcrumbs
Console logs, fetches, and UI clicks are captured automatically. Add manual breadcrumbs for custom events.
typescript
import * as Sentry from "@sentry/nextjs";
Sentry.addBreadcrumb({
category: "auth",
message: "User signed in",
level: "info",
});import * as Sentry from "@sentry/nextjs";
Sentry.addBreadcrumb({
category: "auth",
message: "User signed in",
level: "info",
});Sentry Logger
Structured logs surface in the Logs tab.
typescript
import * as Sentry from "@sentry/nextjs";
const { logger } = Sentry;
logger.info("Payment processed", { orderId: "123", amount: 99.99 });
logger.warn("Rate limit approaching", { current: 90, max: 100 });
logger.error("Payment failed", { orderId: "123", reason: "declined" });import * as Sentry from "@sentry/nextjs";
const { logger } = Sentry;
logger.info("Payment processed", { orderId: "123", amount: 99.99 });
logger.warn("Rate limit approaching", { current: 90, max: 100 });
logger.error("Payment failed", { orderId: "123", reason: "declined" });