Fouten formatteren en validatiefeedback per veld
Pas aan hoe tRPC-fouten worden gestructureerd en toon uw client duidelijke validatiemeldingen per veld.
Fouten formatteren en validatiefeedback per veld is een gratis tRPC API's met typeveiligheid van begin tot eind-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject tRPC API's met typeveiligheid van begin tot eind. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus tRPC API's met typeveiligheid van begin tot eind bevat in totaal 4 lessen.
Waarom fouten formatteren?
Je kunt tRPC-fouten veroorzaken en opvangen. Maar clients hebben vaak gestructureerde foutgegevens nodig, vooral meldingen per veld uit validatie, om die naast invoervelden in formulieren te tonen.
De optie errorFormatter
Met tRPC kun je de foutstructuur globaal aanpassen met errorFormatter tijdens het initialiseren.
const t = initTRPC.create({
errorFormatter({ shape }) {
return shape;
},
});Zod-fouten detecteren
Wanneer een Zod-invoer mislukt, voegt tRPC die toe als oorzaak van de fout. Je kunt die detecteren en beschikbaar maken.
import { ZodError } from "zod";
errorFormatter({ shape, error }) {
const isZod = error.cause instanceof ZodError;
return { ...shape, data: { ...shape.data, isZod } };
}Afgeplatte fouten per veld toevoegen
Zod kan problemen afvlakken tot een fieldErrors-overzicht dat elk veld aan zijn meldingen koppelt.
const zodError = error.cause instanceof ZodError
? error.cause.flatten().fieldErrors
: null;
return { ...shape, data: { ...shape.data, zodError } };Wat de client ontvangt
De client ontvangt nu een gestructureerd object dat aan formuliervelden kan worden gekoppeld.
// e.g. { zodError: { email: ["Invalid email"] } }Fouten op de client lezen
Vang de fout op en lees de geformatteerde gegevens.
try {
await client.signup.mutate(input);
} catch (err) {
const fields = err.data?.zodError;
// show fields.email next to the input
}HTTP-statuscodes
De structuur bevat een code die aan een HTTP-status wordt gekoppeld, wat nuttig is voor clients die verschillend reageren op UNAUTHORIZED en BAD_REQUEST.
// shape.data.code === "BAD_REQUEST"
// shape.data.httpStatus === 400Interne details niet lekken
Wees voorzichtig: maak in productie geen stacktraces of interne meldingen openbaar. Formatteer fouten zo dat alleen veilige, voor gebruikers bedoelde details zichtbaar worden.
De oorspronkelijke fout registreren
Registreer de volledige fout aan de serverkant voor het opsporen van fouten en stuur ondertussen een opgeschoonde versie naar de client.
errorFormatter({ shape, error }) {
console.error(error); // full detail in server logs
return shape; // safe shape to client
}Consistente foutovereenkomst
Een consistente foutstructuur voor alle procedures betekent dat je frontend fouten met één herbruikbare helper kan afhandelen.
Een helper aan de clientzijde hergebruiken
Omdat elke procedure dezelfde foutstructuur gebruikt, schrijf je één helper die fieldErrors en een bericht op het hoogste niveau uit elke mislukte aanroep haalt.
function parseError(err) {
return { fields: err.data?.zodError, message: err.message };
}Korte controle
Test je kennis van foutopmaak.
Samenvatting
Je hebt geleerd hoe je goede feedback over fouten geeft:
- errorFormatter past de foutstructuur globaal aan
- Detecteer oorzaken van het type ZodError en maak fieldErrors beschikbaar
- Registreer aan de serverkant alle details en stuur clients een opgeschoonde structuur
Goed vormgegeven fouten maken formulieren en clients veel eenvoudiger om te bouwen.
Leer tRPC API's met typeveiligheid van begin tot eind met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 10
- Lessen
- 40
Veelgestelde vragen
Is de les “Fouten formatteren en validatiefeedback per veld” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad tRPC API's met typeveiligheid van begin tot eind, waaronder “Fouten formatteren en validatiefeedback per veld”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus tRPC API's met typeveiligheid van begin tot eind bevat in totaal 4 lessen.
Wat leer ik in “Fouten formatteren en validatiefeedback per veld”?
Pas aan hoe tRPC-fouten worden gestructureerd en toon uw client duidelijke validatiemeldingen per veld. Je oefent met tRPC API's met typeveiligheid van begin tot eind door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met tRPC API's met typeveiligheid van begin tot eind te beginnen?
Ervaring vooraf is niet nodig. tRPC API's met typeveiligheid van begin tot eind op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Fouten formatteren en validatiefeedback per veld”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over tRPC API's met typeveiligheid van begin tot eind?
Ja. Elke les over tRPC API's met typeveiligheid van begin tot eind bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- tRPC-fouten correct afhandelen
- Aangepaste fouttypen
- Datatransformators voor serialisatie
- Fouten formatteren en validatiefeedback per veld