Styling, Errors and Observability

"use client";

import { useState } from "react";
import styles from "./like-button.module.css";

export function LikeButton() {
  const [likes, setLikes] = useState(0);
  return (
    <button className={styles.card} onClick={() => setLikes(likes + 1)}>
      ♥ {likes}
    </button>
  );
}

.card {
  padding: 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
}

.title {
  margin: 0 0 8px;
  color: var(--accent);
}

.card {
  padding: 4px 12px;
  border-radius: 999px;
  background: #fee2e2;
}

:root {
  --ink: #1f2937;
  --accent: #2563eb;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: var(--ink);
}

import Link from "next/link";
import "./globals.css";

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>
        <nav>
          <Link href="/">Home</Link> <Link href="/shop">Shop</Link> <Link href="/blog">Blog</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /blog
└ ○ /shop


○  (Static)  prerendered as static content

body {
  background: #fef3c7;
}

import "./shop.css";

export default function ShopLayout({ children }: LayoutProps<"/shop">) {
  return <section>{children}</section>;
}

export default function Shop() {
  return <h1>Shop</h1>;
}

.post {
  max-width: 60ch;
  line-height: 1.6;
}

import styles from "./blog.module.css";

export default function Blog() {
  return (
    <article className={styles.post}>
      <h1>Blog</h1>
      <p>Long-form text.</p>
    </article>
  );
}

load /           sheets: 2rf2--uiir30_.css, 1gm7blby7ti5l.css                                       bg: rgba(0, 0, 0, 0)
click Shop       sheets: 2rf2--uiir30_.css, 1gm7blby7ti5l.css, 0f_q5p3uid_gl.css                    bg: rgb(254, 243, 199)
click Blog       sheets: 2rf2--uiir30_.css, 1gm7blby7ti5l.css, 0f_q5p3uid_gl.css, 2no7ulbho8ayc.css bg: rgb(254, 243, 199)
reload /blog     sheets: 2rf2--uiir30_.css, 2no7ulbho8ayc.css                                       bg: rgba(0, 0, 0, 0)

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

@import "tailwindcss";

@theme {
  --color-brand: #2563eb;
}

import "./globals.css";

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body className="bg-white text-gray-900">{children}</body>
    </html>
  );
}

import styles from "./price.module.scss";

export default function Home() {
  return (
    <main className="mx-auto max-w-md p-6">
      <h1 className="text-2xl font-bold text-brand">Tailwind in a Server Component</h1>
      <p className={styles.price}>€42</p>
    </main>
  );
}

@use "sass:color";

$sale: #dc2626;

.price {
  font-weight: 700;
  color: $sale;

  &:hover {
    color: color.adjust($sale, $lightness: -10%);
  }
}

export default function Home() {
  return (
    <div>
      <p className="note">Hello</p>
      <style jsx>{`
        .note { color: tomato; }
      `}</style>
    </div>
  );
}

> Build error occurred
Error: Turbopack build failed with 1 error:
./src/app/page.tsx
Error: 'styled-jsx' cannot be imported from a Server Component module
It only works in a Client Component but none of its parents are marked with 'use client', so they're Server Components by default.

"use client";

import { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { StyleRegistry, createStyleRegistry } from "styled-jsx";

export default function StyledJsxRegistry({ children }: { children: React.ReactNode }) {
  // One registry per server render, created once (lazy initial state)
  const [registry] = useState(() => createStyleRegistry());

  useServerInsertedHTML(() => {
    const styles = registry.styles(); // the <style> elements collected so far
    registry.flush();
    return <>{styles}</>;
  });

  return <StyleRegistry registry={registry}>{children}</StyleRegistry>;
}

import StyledJsxRegistry from "./registry";

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  );
}

"use client";

export function Note({ children }: { children: React.ReactNode }) {
  return (
    <p className="note">
      {children}
      <style jsx>{`
        .note {
          color: tomato;
        }
      `}</style>
    </p>
  );
}

import { Note } from "./note";

export default function Home() {
  return <Note>Styled on the server?</Note>;
}

import "server-only";

let calls = 0;

export async function getReport() {
  calls++;
  console.log(`[report] call ${calls}`);
  if (calls === 1) {
    // the first call after the server starts fails, like a cold database connection
    throw new Error("connect ECONNREFUSED db.internal:5432 (user=admin)");
  }
  return { revenue: 1200, orders: 31 };
}

import { connection } from "next/server";
import { getReport } from "../lib/report";

export default async function DashboardPage() {
  await connection(); // render per request, not at build time
  const report = await getReport();
  return (
    <p>
      Revenue {report.revenue}, orders {report.orders}
    </p>
  );
}

export default function Loading() {
  return <p>Loading report…</p>;
}

import { Bomb } from "../bomb";
import { Counter } from "./counter";

export default function DashboardLayout({ children }: LayoutProps<"/dashboard">) {
  return (
    <section>
      <h1>Dashboard</h1>
      <Counter /> <Bomb label="dashboard layout" />
      {children}
    </section>
  );
}

"use client";

import { useState } from "react";

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>Layout clicks: {n}</button>;
}

Route (app)
┌ ○ /
├ ○ /_not-found
└ ◐ /dashboard


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

"use client";

import { useState } from "react";

// A button that throws during the next render after it's clicked
export function Bomb({ label }: { label: string }) {
  const [armed, setArmed] = useState(false);
  if (armed) throw new Error(`${label} exploded`);
  return <button onClick={() => setArmed(true)}>Break {label}</button>;
}

import { Bomb } from "./bomb";

export function RootBomb() {
  return <Bomb label="root layout" />;
}

import Link from "next/link";
import { RootBomb } from "./root-bomb";

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>
        <nav>
          <Link href="/">Home</Link> <Link href="/dashboard">Dashboard</Link> <RootBomb />
        </nav>
        {children}
      </body>
    </html>
  );
}

export default function Home() {
  return <h1>Home</h1>;
}

"use client";

export default function RootError({ error, retry }: { error: unknown; retry: () => void }) {
  return (
    <div role="alert">
      <h2>App-level boundary</h2>
      <p id="root-message">{error instanceof Error ? error.message : String(error)}</p>
      <button onClick={() => retry()}>Retry</button>
    </div>
  );
}

"use client";

export default function GlobalError({ error, retry }: { error: unknown; retry: () => void }) {
  return (
    // replaces the root layout, so it brings its own <html> and <body>
    <html lang="en">
      <body>
        <title>Something went wrong</title>
        <h2>The whole app failed</h2>
        <p id="global-message">{error instanceof Error ? error.message : String(error)}</p>
        <button onClick={() => retry()}>Retry</button>
      </body>
    </html>
  );
}

click "Break dashboard layout"   h2: App-level boundary        message: dashboard layout exploded   nav still there
click "Break root layout"        h2: The whole app failed      message: root layout exploded        nav gone, title "Something went wrong"

"use client";

import { catchError, type ErrorInfo } from "next/error";

function WidgetFallback({ title }: { title: string }, { error, retry }: ErrorInfo) {
  return (
    <div role="alert" className="widget">
      <strong>{title} is unavailable</strong> ({error instanceof Error ? error.message : String(error)})
      <button onClick={() => retry()}>Retry</button>
    </div>
  );
}

export default catchError(WidgetFallback);

"use client";

import { useState } from "react";

export function Weather() {
  const [broken, setBroken] = useState(false);
  if (broken) throw new Error("weather API returned 503");
  return <button onClick={() => setBroken(true)}>Weather: 18°C (click to break)</button>;
}

import WidgetBoundary from "./widget-boundary";
import { Weather } from "./weather";

export default function Home() {
  return (
    <main>
      <h1>Home</h1>
      <WidgetBoundary title="Weather">
        <Weather />
      </WidgetBoundary>
      <p id="news">News: still here</p>
    </main>
  );
}

This page couldn’t load

A server error occurred. Reload to try again.

Reload

ERROR 1808271612

"use client";

import { useActionState } from "react";
import { subscribe, type SubscribeState } from "./actions";

const initial: SubscribeState = { ok: false, message: "" };

export function SubscribeForm() {
  const [state, formAction, pending] = useActionState(subscribe, initial);
  return (
    <form action={formAction}>
      <input name="email" defaultValue="rohit" />
      <button disabled={pending}>Subscribe</button>
      <p id="form-message" aria-live="polite">{state.message}</p>
    </form>
  );
}

"use client";

export default function RootError({ error, retry }: { error: unknown; retry: () => void }) {
  const e = error as Error & { digest?: string };
  return (
    <div role="alert">
      <h2>Something went wrong</h2>
      <p id="boundary-message">{e.message}</p>
      <p id="boundary-digest">{e.digest}</p>
      <button onClick={() => retry()}>Retry</button>
    </div>
  );
}

import { saveThenRedirect, saveThenRedirectFixed } from "./redirect-actions";
import { DeleteButton } from "./delete-button";
import { RedirectForm } from "./redirect-form";
import { SubscribeForm } from "./subscribe-form";

export default function Home() {
  return (
    <main>
      <SubscribeForm />
      <DeleteButton />
      <RedirectForm label="Save and go" action={saveThenRedirect} />
      <RedirectForm label="Save and go (fixed)" action={saveThenRedirectFixed} />
    </main>
  );
}

"use server";

export async function deleteEverything() {
  throw new Error("refusing: table users is locked by pid 4242");
}

"use client";

import { useState } from "react";
import { deleteEverything } from "./delete-action";

export function DeleteButton() {
  const [caught, setCaught] = useState("");
  async function onClick() {
    try {
      await deleteEverything();
    } catch (err) {
      const e = err as Error & { digest?: string };
      setCaught(`${e.message} | digest=${e.digest}`);
    }
  }
  return (
    <>
      <button onClick={onClick}>Delete everything</button>
      <p id="caught">{caught}</p>
    </>
  );
}

"use client";

import { useActionState } from "react";

type Props = { label: string; action: (prev: string, formData: FormData) => Promise<string> };

export function RedirectForm({ label, action }: Props) {
  const [result, formAction] = useActionState(action, "");
  return (
    <form action={formAction}>
      <button>{label}</button>
      <p className="redirect-result">{result}</p>
    </form>
  );
}

export default function Thanks() {
  return <h1>Thanks!</h1>;
}

export async function GET(_req: Request, ctx: RouteContext<"/api/orders/[id]">) {
  const { id } = await ctx.params;
  if (!/^\d+$/.test(id)) {
    // expected: the caller sent bad input, say so with a 4xx and a body
    return Response.json({ error: "id must be numeric" }, { status: 400 });
  }
  if (id === "500") {
    // unexpected: let it throw
    throw new Error("orders replica lag > 30s (host=db-replica-2)");
  }
  return Response.json({ id: Number(id), status: "shipped" });
}

Route (app)
┌ ○ /
├ ○ /_not-found
├ ƒ /api/orders/[id]
└ ○ /thanks


○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

== /api/orders/7
HTTP/1.1 200 OK
content-type: application/json

{"id":7,"status":"shipped"}

== /api/orders/abc
HTTP/1.1 400 Bad Request
content-type: application/json

{"error":"id must be numeric"}

== /api/orders/500
HTTP/1.1 500 Internal Server Error
Transfer-Encoding: chunked

(empty body)

--- terminal (next start)
⨯ Error: orders replica lag > 30s (host=db-replica-2)
    at t (.next/server/chunks/_sandbox_nextjs_1rz_2wzm3t4ny._.js:1:196)

import { Suspense } from "react";
import { connection } from "next/server";

async function Revenue() {
  await connection();
  throw new Error("report query timed out");
  return <p>never</p>;
}

export default function ReportPage() {
  return (
    <Suspense fallback={<p>Loading…</p>}>
      <Revenue />
    </Suspense>
  );
}

import { connection } from "next/server";

export async function GET() {
  await connection(); // run per request (a GET without it is prerendered at build)
  throw new Error("health check: redis unreachable");
}

"use server";

export async function failingAction() {
  throw new Error("payment provider timed out");
}

import { ClientBomb } from "./client-bomb";
import { failingAction } from "./actions";

export default function Home() {
  return (
    <main>
      <h1>Home</h1>
      <form action={failingAction}>
        <button>Run failing action</button>
      </form>
      <ClientBomb />
    </main>
  );
}

import Link from "next/link";

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>
        <nav>
          <Link href="/">Home</Link> <Link href="/report">Report</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

Route (app)
┌ ○ /
├ ○ /_not-found
├ ƒ /api/health
├ ○ /proxied
└ ◐ /report


ƒ Proxy (Middleware)

○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content
ƒ  (Dynamic)            server-rendered on demand

// Runs in the browser after the HTML loads and before hydration
type Log = { errors: string[]; navigations: string[] };
const log: Log = { errors: [], navigations: [] };
(window as unknown as { __obs: Log }).__obs = log;

window.addEventListener("error", (event) => {
  log.errors.push(String(event.error?.message ?? event.message));
});

export function onRouterTransitionStart(url: string, navigationType: "push" | "replace" | "traverse") {
  log.navigations.push(`${navigationType} ${url}`);
}

"use client";

export function ClientBomb() {
  return (
    <button
      onClick={() => {
        throw new Error("click handler bug");
      }}
    >
      Throw in the browser
    </button>
  );
}

import { NextResponse, type NextRequest } from "next/server";

export function proxy(request: NextRequest) {
  if (request.nextUrl.searchParams.has("explode")) {
    throw new Error("proxy failed to parse session cookie");
  }
  return NextResponse.next();
}

export const config = { matcher: "/proxied" };

export default function Proxied() {
  return <h1>Proxied</h1>;
}

page load                      errors: []                                   navigations: []
click "Throw in the browser"   errors: ["click handler bug"]
click the Report link          errors: ["click handler bug", "Minified React error #441; …"]   navigations: ["push /report"]
                               page: This page couldn’t load … ERROR 1808271612

import { registerOTel } from "@vercel/otel";
import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { LineExporter } from "./lib/line-exporter";

export function register() {
  registerOTel({
    serviceName: "shop",
    // a real app exports to a collector (OTLP); this prints one line per finished span
    spanProcessors: [new SimpleSpanProcessor(new LineExporter())],
  });
}

import type { ReadableSpan, SpanExporter } from "@opentelemetry/sdk-trace-base";
import { ExportResultCode, type ExportResult } from "@opentelemetry/core";

export class LineExporter implements SpanExporter {
  export(spans: ReadableSpan[], done: (result: ExportResult) => void) {
    for (const s of spans) {
      const ms = (s.duration[0] * 1e3 + s.duration[1] / 1e6).toFixed(1);
      const trace = s.spanContext().traceId.slice(0, 6);
      const parent = s.parentSpanContext?.spanId.slice(0, 6) ?? "root";
      console.log(`[span] trace=${trace} id=${s.spanContext().spanId.slice(0, 6)} parent=${parent} ${s.name} ${ms}ms`);
    }
    done({ code: ExportResultCode.SUCCESS });
  }
  async shutdown() {}
}

import { trace } from "@opentelemetry/api";

const tracer = trace.getTracer("shop");

export async function getProduct(id: string) {
  // a custom span: it joins the trace of the request that's rendering
  return tracer.startActiveSpan("db.getProduct", async (span) => {
    try {
      span.setAttribute("product.id", id);
      await new Promise((r) => setTimeout(r, 40)); // pretend database call
      return { id, name: `Product ${id}` };
    } finally {
      span.end();
    }
  });
}

import { getProduct } from "@/lib/products";

export default async function ProductPage({ params }: PageProps<"/products/[id]">) {
  const { id } = await params;
  const [product, price] = await Promise.all([
    getProduct(id),
    fetch("http://localhost:4511/api/price").then((r) => r.json()),
  ]);
  return (
    <h1>
      {product.name}: €{price.price}
    </h1>
  );
}

[span] trace=80d723 id=4892b4 parent=0347f1 resolve segment modules 0.9ms
[span] trace=80d723 id=0347f1 parent=369f89 build component tree 1.8ms
[span] trace=80d723 id=0048cb parent=b302d4 executing api route (app) /api/price 0.2ms
[span] trace=80d723 id=b302d4 parent=ec8bfa GET /api/price 5.2ms
[span] trace=80d723 id=ec8bfa parent=369f89 fetch GET http://localhost:4511/api/price 9.8ms
[span] trace=80d723 id=0eb290 parent=369f89 build component tree 0.5ms
[span] trace=80d723 id=4b4fae parent=369f89 db.getProduct 39.3ms
[span] trace=80d723 id=369f89 parent=317e12 render route (app) /products/[id] 48.0ms
[span] trace=80d723 id=78f7cf parent=317e12 NextNodeServer.clientComponentLoading 1.4ms
[span] trace=80d723 id=c9468a parent=369f89 db.getProduct 27.9ms
[span] trace=80d723 id=317e12 parent=root GET /products/[id] 53.2ms

export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    await import("./instrumentation.node");
  }
}

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
  logging: {
    fetches: { fullUrl: true }, // dev: log every server fetch with its URL and cache result
    browserToTerminal: true, // dev: copy browser console output into the terminal
  },
};

export default nextConfig;

"use client";

import { useEffect } from "react";
import { addToCart } from "./actions";

export function CartButton() {
  useEffect(() => {
    console.log("[client] CartButton mounted");
  }, []);
  return <button onClick={() => addToCart("sku-42", 2)}>Add to cart</button>;
}

"use server";

export async function addToCart(productId: string, qty: number) {
  console.log(`[action] addToCart ${productId} x${qty}`);
}

import { connection } from "next/server";

export async function GET() {
  await connection();
  return Response.json({ inStock: 3 });
}

Route (app)
┌ ◐ /
├ ○ /_not-found
└ ƒ /api/stock


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content
ƒ  (Dynamic)            server-rendered on demand

Debugger listening on ws://127.0.0.1:9229/ec567dd7-b373-4832-a2a8-4457fb41f9b9
For help, see: https://nodejs.org/learn/getting-started/debugging
▲ Next.js 16.4.3 (Turbopack)
- Local:         http://localhost:4511
- Network:       http://192.168.53.23:4511
- Debugger port: 9229