# Debugging Next.js Best Practices: Logs and Tracing

> Next.js applications can be challenging to debug in production. It's not always clear where an issue originated or how it impacts users. Hydration errors, server component failures, and performance bottlenecks don't always come with clear answers.

**URL:** https://sentry.io/resources/nextjs-may-workshop/

---

**Type:** Workshop | **Date:** On-demand

**Tags:** next.js, Workshop

**Presented by:** Sergiy Dybskiy

Next.js gives you static pages, cached components, and dynamic renders — each shows up differently in your observability tooling. This session teaches you what to expect from each, how to query it, and when to alert on it.

## Prerequisites

- [Completed 101 workshop](https://sentry.io/resources/debugging-nextjs-apps-workshop/)
- Sentry account with a Next.js project
- Sentry CLI installed

## Modules

### The App & Decision Framework

Tour the app and its four route types: static, cached, dynamic, and user-specific. Learn when to reach for a metric, a log, or a span.

- Metric → counting and alerting (page.view by route type)

- Log → investigating a specific event (auth.login with context)

- Span → timing within a request (db.query, cache lookup)

- What Sentry and Vercel already capture for you

### Structured Logs

Query wide events in Sentry Logs. Each log packs one operation's full context — user, result, duration — so you can filter by any dimension and click through to its trace.

- auth.login — filter by result, group by user

- schedule.add — find the most popular talks

- cache.miss — which cache key, which path

- Log → trace: click any log to see the full request

### Traces Across Route Types

Compare trace waterfalls across the four rendering strategies. See what server work each generates — from zero spans on a static page to full DB queries on a dynamic one.

- Static (/workshop): render only, no DB, no cache

- Cached hit (/): suspense-cache lookup, no DB

- Cached miss (/): db.query spans + cache write-back

- Dynamic (/my-schedule): auth + DB every request

### Metrics & Dashboards

Build a dashboard from the command line with the Sentry CLI. Group page views by route type, track cache miss rates, and visualize auth patterns.

- sentry dashboard create + widget add

- page.view grouped by route_type and path

- cache.miss rate vs total page views

- Sentry MCP server for natural language queries

### Alerts

Create a monitor on login failures from the Sentry UI. Review the framework: metrics for counting, logs for context, traces for timing.

- Log-based monitor: auth failures > threshold

- Metric-based monitor: cache miss rate spike

- Each signal has one job — don't make one do another's

## FAQ

**Which Next.js versions does this cover?**

The workshop targets Next.js 15 and 16. Older versions will work but some APIs (like proxy.ts) may differ.

**Can I get one continuous trace across separate frontend and backend Sentry projects?**

In Next.js this is done automatically by the SDK, however if you're not seeing traces being connected between the frontend and the backend, add your backend API routes to <code>tracePropagationTargets</code> inside the Sentry.init inside <code>instrumentation-client.ts</code>

**What's the difference between logs and metrics in Sentry?**

Logs are for investigations (high-cardinality, wide events with rich attributes). Metrics are for counting, with three APIs: count, gauge, and distribution. Both let you attach unlimited attributes at no extra cost.

**What is a span vs. a trace?**

A span is a unit of work (function call, DB query, resource load). A trace is a collection of related spans tied to the same interaction. Sentry auto-instruments most of these.

**Is replay data private by default?**

Yes. Text is masked by default. You can opt specific elements in or out via classes/attributes.

**How do I keep AI crawlers from eating my Sentry quota?**

Filter in your Sentry init's beforeSend. Inspect the request's user-agent header (server side) and drop events from known crawlers (ClaudeBot, GoogleOther, etc.). A cookbook for this pattern is on the way.

## Related Resources

- debugging-nextjs-apps-workshop

- building-and-monitoring-ai-agents

- logging-in-next-js-is-hard-but-it-doesnt-have-to-be

---

*Source: [sentry.io/resources/nextjs-may-workshop/](https://sentry.io/resources/nextjs-may-workshop/)*