Gestion des erreurs

Error boundaries, notifications toast, modèles d'erreurs des Edge Functions et stratégies de journalisation.

Vue d'ensemble

ScaleRocket gère les erreurs à plusieurs niveaux : les error boundaries React pour les plantages, les notifications toast pour les retours utilisateur, la gestion structurée des erreurs dans les Edge Functions, et la journalisation adaptée à l'environnement.

Error Boundaries

error.tsx

Next.js intercepte automatiquement les erreurs de rendu lorsque vous créez un fichier error.tsx :

// src/app/error.tsx
"use client";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <h2 className="text-2xl font-bold">Something went wrong</h2>
      <p className="mt-2 text-gray-500">{error.message}</p>
      <button onClick={reset} className="mt-4 rounded bg-indigo-600 px-4 py-2 text-white">
        Try again
      </button>
    </div>
  );
}

La fonction reset relance le rendu du segment, permettant la récupération sans rechargement complet de la page.

not-found.tsx

Gérez les erreurs 404 avec une page personnalisée :

// src/app/not-found.tsx
export default function NotFound() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <h2 className="text-4xl font-bold">404</h2>
      <p className="mt-2 text-gray-500">Page not found.</p>
      <a href="/" className="mt-4 text-indigo-600 hover:underline">
        Go home
      </a>
    </div>
  );
}

Notifications Toast

Pour les erreurs non fatales (appels API échoués, erreurs de validation), utilisez le système de toast au lieu des error boundaries :

import { useToast } from "@saas/ui";

const { toast } = useToast();

try {
  await updateProfile(data);
  toast({ title: "Profile updated" });
} catch (err) {
  toast({
    title: "Update failed",
    description: err instanceof Error ? err.message : "Please try again.",
    variant: "destructive",
  });
}

Cela maintient l'utilisateur sur la page actuelle tout en affichant un retour d'information.

Modèles d'erreurs des Edge Functions

Structurez les réponses des Edge Functions avec des formats d'erreur cohérents :

// supabase/functions/my-function/index.ts
try {
  const result = await processRequest(req);
  return new Response(JSON.stringify({ data: result }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
} catch (error) {
  return new Response(
    JSON.stringify({ error: error.message || "Internal error" }),
    { status: 500, headers: { "Content-Type": "application/json" } }
  );
}

Codes d'erreur Supabase courants

Code	Signification	Gestion
`23505`	Violation de contrainte d'unicité	Afficher un message "existe déjà"
`42501`	Violation de politique RLS	Afficher un message "non autorisé"
`PGRST116`	Ligne non trouvée	Afficher une page 404 ou un message "non trouvé"
`23503`	Violation de clé étrangère	Afficher un message "enregistrement lié requis"

Stratégie de journalisation

Développement

Enregistrez les erreurs avec les traces complètes pour le débogage :

if (process.env.NODE_ENV === "development") {
  console.error("Full error:", error);
  console.error("Stack:", error.stack);
}

Production

En production, évitez de divulguer des détails internes dans la console. Utilisez la journalisation structurée ou envoyez les erreurs à un service de monitoring :

if (process.env.NODE_ENV === "production") {
  // Send to error tracking service (Sentry, LogRocket, etc.)
  captureException(error);
}

N'exposez jamais les messages d'erreur bruts de la base de données, les traces de pile ou les chemins internes aux utilisateurs finaux.

Bonnes pratiques

Utilisez les error boundaries pour les plantages inattendus ; utilisez les toasts pour les échecs prévisibles.
Fournissez toujours une action de récupération (bouton de réessai, lien vers l'accueil).
Validez les entrées avant de faire des appels API pour réduire la fréquence des erreurs.
Renvoyez des messages compréhensibles par l'utilisateur ; enregistrez les détails techniques côté serveur.

Fini ? Marquez cette page comme terminée.

Gestion des erreurs

On this page