Les fichiers entry.server.ts et entry.client.ts

Par défaut, tu n'as pas besoin des fichiers entry.client.ts et entry.server.ts. Ils ne sont même pas générés lorsque tu instancies un nouveau projet React Router 7.

Leur nom est très explicite : Ils représentent les points d'entrée du serveur et du client.

À partir du moment où tu souhaites ajouter un système d'Error Reporting avec un service comme PostHog ou Sentry, par contre, tu auras besoin de configuer ton application React Router 7.

Pour générer ces deux fichiers, utilise la commande suivante :

1
npx react-router reveal

Le principe est qu'à l'exécution de ton erreur, tu fasses un appel à l'API de Sentry pour lui envoyer tout le contexte de l'erreur qui a été déclenchée.

Exemple : Tu souhaites être informé des erreurs exécutés côté serveur (erreurs d'accès à des API, bases de données ...), et côté client.

Tu vas donc devoir intégrer Sentry dans les deux fichiers. Le point d'entrée du client, et le point d'entrée du serveur.

Ajouter Sentry au fichier entry.server.tsx

Nous importons donc la librairie Sentry pour React Router 7 pour ajouter le rapport d'erreurs côté serveur.

1
import * as Sentry from "@sentry/react-router";
2

3
/** ... Reste du code **/
4
export function handleError(
5
  error: unknown,
6
  { request }: LoaderFunctionArgs | ActionFunctionArgs,
7
): void {
8
  // Skip capturing if the request is aborted as Remix docs suggest
9
  // Ref: https://remix.run/docs/en/main/file-conventions/entry.server#handleerror
10
  if (request.signal.aborted) {
11
    return;
12
  }
13

14

15
  if (error instanceof Error) {
16
    void Sentry.captureException(error);
17
  } else {
18
    Sentry.captureException(error);
19
  }
20
}

Maintenant, chaque erreur déclenchée côté serveur (dans une méthode loader ou action sera envoyée directement à Sentry.

Implémentons la fonctionnalité côté client.

Ajouter Sentry au fichier entry.client.tsx

Côté client, c'est le même principe. On importe Sentry pour qu'il puisse récupérer les erreurs générées par notre application.

1
import * as Sentry from "@sentry/react-router";
2
import { startTransition, StrictMode } from "react";
3
import { hydrateRoot } from "react-dom/client";
4
import { HydratedRouter } from "react-router/dom";
5
Sentry.init({
6
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
7
  integrations: [
8
  ],
9
});
10
startTransition(() => {
11
  hydrateRoot(
12
    document,
13
    <StrictMode>
14
      <HydratedRouter />
15
    </StrictMode>
16
  );
17
});

Maintenant, nous pouvons être sereins. Le rapport d'erreur sera mis à jour sur le tableau de bord Sentry, et nous serons informés par email de chaque erreur déclenchée sur notre application.

Ces concepts restent très avancés, mais sont très utiles pour ce cas d'utilisation spécifique.