# Next Error Tsx
> Write Next.js App Router error.tsx (and global-error.tsx) so a thrown page does not dump the production digest screen. Auto-applies when creating or editing a data-fetching page.tsx that has no sibling error boundary. Triggered by /next-error-tsx.
- Skill: `akashp1712/next-error-tsx` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add akashp1712/next-error-tsx`
- Raw SKILL.md: https://api.skillmd.com/api/skills/akashp1712/next-error-tsx/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: akashp1712 (https://skillmd.com/u/akashp1712)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/akashp1712/next-error-tsx
---
# next-error-tsx
You write the files. The human never has to paste a template.
When a route segment throws, Next shows the digest overlay in production unless `error.tsx` exists. That is the bug. This skill is the file.
**Companion:** [next-loading-skeleton](../next-loading-skeleton) covers the blank wait. This covers the crash.
---
## When this applies
**Apply when:** creating or editing an App Router `page.tsx` that fetches or calls a server action; the user says error boundary, error.tsx, try again, digest screen, or "something went wrong"; a route has `loading.tsx` but no `error.tsx`.
**Do not apply when:** they want to catch a missing record (that is `notFound()` + `not-found.tsx`), they want to swallow an error in a try/catch and keep rendering, or they are on Pages Router.
---
## Workflow
You run every step.
1. Find the App Router root (`app/` or `src/app/`).
2. For the route you just touched, if `error.tsx` is missing, write it next to `page.tsx`.
3. If `app/global-error.tsx` is missing, write it. Root `layout.tsx` errors skip `error.tsx`.
4. If the route is dynamic (`[id]`, `[slug]`, …) and `not-found.tsx` is missing, write that too. A 404 is not a 500.
5. Match existing UI: same shell, spacing, and button component the page already uses. If `@/components/ui/button` exists, use it. Do not add shadcn as a new dependency just for this.
6. Do not show `error.message` or `error.digest` in the UI. Log the digest. Production messages leak internals; the digest is for logs.
---
## `error.tsx`
Must be a Client Component. Receives `{ error, reset }`. `reset()` re-renders the segment — wire it to the primary button.
```tsx
"use client";
import { useEffect } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error(error.digest ?? error.message);
}, [error]);
return (
This page failed to load
A temporary fault. Try again. If it keeps happening, go back home.
);
}
```
If there is no shadcn Button, use a native `