Comment gérer les erreurs côté serveur

1
import {
2
  isRouteErrorResponse,
3
  useLoaderData,
4
  useRouteError,
5
  type LoaderFunctionArgs,
6
} from 'react-router'
7
import { getUserBySlug } from '~/users.server'
8

9
export async function loader({ params }: LoaderFunctionArgs) {
10
  const user = await getUserBySlug({ slug: params.userSlug })
11
  if (!user) {
12
    // ^? On lève une Response pour renvoyer une erreur HTTP contrôlée
13
    // @callout: throw new Response déclenche isRouteErrorResponse()
14
    throw new Response(`User "${params.userSlug}" was not found`, {
15
      status: 404,
16
      statusText: 'Not Found',
17
    })
18
  }
19
  return { user }
20
}
21

22
export default function UserDetail() {
23
  const { user } = useLoaderData<typeof loader>()
24
  return (
25
    <div className="p-4">
26
      <h1 className="text-2xl font-bold">{user.name}</h1>
27
      <p>ID: {user.id}</p>
28
    </div>
29
  )
30
}

1
export function ErrorBoundary() {
2
  const error = useRouteError()
3

4
  if (isRouteErrorResponse(error)) {
5
    return (
6
      <div className="h-screen flex flex-col items-center justify-center p-4">
7
        <h1 className="text-3xl font-bold text-red-600">
8
          {error.status} {error.statusText}
9
        </h1>
10
        <p className="mt-2 text-red-500">{error.data}</p>
11
      </div>
12
    )
13
  }
14

15
  if (error instanceof Error) {
16
    return (
17
      <div className="h-screen flex flex-col items-center justify-center p-4">
18
        <h1 className="text-3xl font-bold text-red-600">Erreur</h1>
19
        <p className="mt-2 text-red-500">{error.message}</p>
20
      </div>
21
    )
22
  }
23

24
  return <h1>Une erreur inconnue est survenue.</h1>
25
}

1
const db = {
2
  users: [
3
    { id: 1, name: 'Virgile', slug: 'virgile' },
4
    { id: 2, name: 'Robert',  slug: 'robert'  },
5
    // …
6
  ]
7
}
8

9
export async function getUserBySlug({ slug }: { slug: string }) {
10
  // Simule un délai réseau
11
  await new Promise(r => setTimeout(r, 100))
12
  return db.users.find(u => u.slug === slug)
13
}

1
import { isRouteErrorResponse, Link, Outlet } from 'react-router'
2

3
export function ErrorBoundary({ error }: { error: unknown }) {
4
  let title = 'Oops!'
5
  let message = 'Une erreur inattendue est survenue.'
6

7
  if (isRouteErrorResponse(error)) {
8
    title = error.status === 404 ? '404 – Introuvable' : `Erreur ${error.status}`
9
    message = error.data || error.statusText || message
10
  } else if (error instanceof Error) {
11
    message = error.message
12
  }
13

14
  return (
15
    <div className="container mx-auto p-4">
16
      <h1 className="text-4xl font-bold text-red-600 mb-2">{title}</h1>
17
      <p className="text-lg text-gray-700">{message}</p>
18
      <Link to="/" className="text-blue-500 hover:underline mt-4 block">
19
        Retour à l’accueil
20
      </Link>
21
    </div>
22
  )
23
}