Formatowanie błędów i informacje zwrotne z walidacji pól
Dostosuj sposób konstruowania błędów tRPC i wyświetlaj klientowi przejrzyste komunikaty walidacji na poziomie pól.
Formatowanie błędów i informacje zwrotne z walidacji pól to bezpłatna lekcja tRPC End-to-End Type Safe APIs na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej tRPC End-to-End Type Safe APIs, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs tRPC End-to-End Type Safe APIs zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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.
Ucz się tRPC End-to-End Type Safe APIs dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 10
- Lekcje
- 40
Często zadawane pytania
Czy lekcja „Formatowanie błędów i informacje zwrotne z walidacji pól” jest bezpłatna?
Tak — pełny tekst „Formatowanie błędów i informacje zwrotne z walidacji pól” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu tRPC End-to-End Type Safe APIs, przejdź na CoddyKit PRO. Kurs tRPC End-to-End Type Safe APIs zawiera 4 lekcji w sumie.
Co nauczysz się w „Formatowanie błędów i informacje zwrotne z walidacji pól”?
Dostosuj sposób konstruowania błędów tRPC i wyświetlaj klientowi przejrzyste komunikaty walidacji na poziomie pól. Ćwiczysz tRPC End-to-End Type Safe APIs z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć tRPC End-to-End Type Safe APIs?
Nie wymagamy żadnego doświadczenia. tRPC End-to-End Type Safe APIs w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Formatowanie błędów i informacje zwrotne z walidacji pól”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji tRPC End-to-End Type Safe APIs?
Tak. Każda lekcja tRPC End-to-End Type Safe APIs zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Elegancka obsługa błędów tRPC
- Niestandardowe typy błędów
- Transformery danych do serializacji
- Formatowanie błędów i informacje zwrotne z walidacji pól