# Errors your users should never see

> Visitors should never see raw stack traces or blank crash screens: your app shows friendly inline messages for expected mistakes, uses `not-found.tsx`, `error.tsx` and `global-error.tsx` safety nets with a “Try again” button for unexpected failures, and gives a short reference ID linked to the server log.

## Analogy

If a restaurant runs out of soup, the waiter doesn't drop a greasy kitchen clipboard on your table. They politely tell you the soup is gone and offer another dish—or, if the oven broke, give you a receipt number while the kitchen handles it.

## How it works

Every web app faces two different kinds of problems: **expected errors** (things that happen in normal use, like an empty form field, a wrong password or a link to a recipe that doesn't exist) and **unexpected errors** (something broke on the server or a service didn't answer).

**Expected errors** are handled right where they happen, without crashing the page. A form returns a clear, calm note next to the field (“Please enter a valid email address”), and a missing item calls `notFound()` to show your custom `not-found.tsx` page with a link back home.

**Unexpected errors** are caught by an error-boundary: a safety net built into Next.js. Each main section has an `error.tsx` file that catches crashes in that area and shows a friendly message with a **“Try again”** button, while `global-error.tsx` is the last-resort safety net for the whole app.

Visitors must **never** see a raw stack-trace: it is confusing for people and can leak internal file paths or logic to attackers. Instead, your error page shows a plain message and a short reference ID (such as `7F3K-2Q`), while the full error-message and details go to your server log under that same ID.

## In your project

Right in Task 1 (the app skeleton), your agent adds `error.tsx`, `global-error.tsx` and `not-found.tsx` so your app has safety nets from day one. Whenever it builds a form, it returns validation messages as plain text instead of throwing raw errors.

## Copy for your agent

```text
Check that our app has not-found.tsx, error.tsx (with a 'Try again' button) and global-error.tsx, and verify that unexpected errors show a friendly message with a short reference ID while logging details only on the server.
```

---
Source: [Agentic Makers](https://agenticmakers.app/en/learn/errors-users-should-never-see) · License: CC BY 4.0