> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hana.leafphp.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Errors

> Customize error screens

Hana router provides default error pages for 404 and 500 errors, however, we recommend updating them with your own custom pages

## 404 Pages

When a user enters a route that doesn't exist in your app, Hana will look for a `_404` file, and render the component exported from that file.

```tsx src/pages/_404.tsx theme={"theme":"ayu-dark"}
const NotFound: React.FC = () => {
  return <div>404 - Not Found</div>;
};

export default NotFound;
```

## General Error Pages

When an error is thrown within your application, Hana will catch the error and display whatever component is in your `_error` file.

```tsx src/pages/_error.tsx theme={"theme":"ayu-dark"}
import { useRouteError } from "@hanabira/router";

export default function ErrorPage() {
  const error: any = useRouteError();
  console.log(error, 'error');

  return <div>Error</div>;
}
```

Usually your application will only have one error page, however, Hana allows you to create error pages scoped to only particular folders. For example, you can have a `_error.tsx` file in the `pages/users` directory that will be used for all errors that occur on routes in the `/users` directory.

```
|- pages
  |- index.tsx
  |- _error.tsx
  |- users
    |- _error.tsx
```

Considering the directory structure above, the `_error.tsx` file in the `pages/users` directory will be used for all errors that occur on routes in the `/users` directory. The `_error.tsx` file in the `pages` directory will be used for all other errors.