201 Workshop

Debugging Next.js
Logs, Traces & Metrics

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.

What You'll Learn

Logs = Investigation

Wide events with context — who, what, why — queryable by any attribute

Traces = Timing

Follow requests across route types: static, cached, dynamic. See where time goes.

Metrics = Counting

Page views by route type, cache hit rates, auth failure rates. Dashboard and alert.

Modules

01

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
02

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
03

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
04

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
05

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

Tools

Sentry CLI

Create dashboards, query logs, and view traces from the terminal.

Sentry MCP Server

Query Sentry data with natural language through your AI editor.

Monitors & Alerts

Threshold-based monitors on logs and metrics with Slack/PagerDuty/email actions.

Prerequisites