Mise en forme des erreurs et retours de validation au niveau des champs
Personnalisez la structure des erreurs tRPC et présentez à votre client des messages de validation clairs au niveau de chaque champ.
Mise en forme des erreurs et retours de validation au niveau des champs est une leçon tRPC End-to-End Type Safe APIs gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage tRPC End-to-End Type Safe APIs, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours tRPC End-to-End Type Safe APIs comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Why Format Errors?
You can throw and catch tRPC errors. But clients often need structured error data, especially field-level messages from validation, to show next to form inputs.
The errorFormatter Option
tRPC lets you customize the error shape globally with errorFormatter when initializing.
const t = initTRPC.create({
errorFormatter({ shape }) {
return shape;
},
});Detecting Zod Errors
When a Zod input fails, tRPC attaches it as the error cause. You can detect and expose it.
import { ZodError } from "zod";
errorFormatter({ shape, error }) {
const isZod = error.cause instanceof ZodError;
return { ...shape, data: { ...shape.data, isZod } };
}Adding Flattened Field Errors
Zod can flatten issues into a fieldErrors map that maps each field to its messages.
const zodError = error.cause instanceof ZodError
? error.cause.flatten().fieldErrors
: null;
return { ...shape, data: { ...shape.data, zodError } };What the Client Receives
The client now gets a structured object it can attach to form fields.
// e.g. { zodError: { email: ["Invalid email"] } }Reading Errors on the Client
Catch the error and read the formatted data.
try {
await client.signup.mutate(input);
} catch (err) {
const fields = err.data?.zodError;
// show fields.email next to the input
}HTTP Status Codes
The shape includes a code that maps to an HTTP status, useful for clients reacting to UNAUTHORIZED vs BAD_REQUEST.
// shape.data.code === "BAD_REQUEST"
// shape.data.httpStatus === 400Not Leaking Internals
Be careful: do not expose stack traces or internal messages in production. Format errors to reveal only safe, user-facing details.
Logging the Raw Error
Log the full error server-side for debugging while sending a sanitized version to the client.
errorFormatter({ shape, error }) {
console.error(error); // full detail in server logs
return shape; // safe shape to client
}Consistent Error Contract
A consistent error shape across all procedures means your frontend can handle errors with one reusable helper.
Reusing a Client Helper
Because every procedure shares the same error shape, write one helper that extracts fieldErrors and a top-level message for any failed call.
function parseError(err) {
return { fields: err.data?.zodError, message: err.message };
}Quick Check
Test your error formatting knowledge.
Recap
You learned to deliver great error feedback:
- errorFormatter customizes the error shape globally
- Detect ZodError causes and expose fieldErrors
- Log full detail server-side, send a sanitized shape to clients
Well-shaped errors make forms and clients dramatically easier to build.
Questions Fréquemment Posées
La leçon « Mise en forme des erreurs et retours de validation au niveau des champs » est-elle gratuite ?
Oui — le texte complet de « Mise en forme des erreurs et retours de validation au niveau des champs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours tRPC End-to-End Type Safe APIs, passe à CoddyKit PRO. Le cours tRPC End-to-End Type Safe APIs comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Mise en forme des erreurs et retours de validation au niveau des champs » ?
Personnalisez la structure des erreurs tRPC et présentez à votre client des messages de validation clairs au niveau de chaque champ. Tu pratiques tRPC End-to-End Type Safe APIs avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer tRPC End-to-End Type Safe APIs ?
Aucune expérience préalable n'est requise. tRPC End-to-End Type Safe APIs sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Mise en forme des erreurs et retours de validation au niveau des champs » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon tRPC End-to-End Type Safe APIs ?
Oui. Chaque leçon tRPC End-to-End Type Safe APIs inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Gérer les erreurs tRPC avec élégance
- Types d’erreurs personnalisés
- Transformateurs de données pour la sérialisation
- Mise en forme des erreurs et retours de validation au niveau des champs