Egendefinerte feiltypper
Definer og kast egendefinerte feiltyper fra backend som videreformidles korrekt til frontend.
Egendefinerte feiltypper er en gratis leksjon i Typesikre API-er fra frontend til backend med tRPC på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Typesikre API-er fra frontend til backend med tRPC, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.
Hvorfor egendefinerte feiltyper?
I tRPC bruker vi ofte TRPCError til å håndtere problemer. Noen ganger trenger du imidlertid mer spesifikke feiltyper.
- Tydelighet: Egendefinerte feil gjør det tydeligere i koden hva som gikk galt.
- Spesifikk håndtering: Gjør det mulig for frontend-delen å reagere forskjellig på ulike feiltilstander.
- Bedre feilsøking: Gir mer kontekst enn en generell feil.
La oss lære hvordan du definerer og bruker dem!
Grunnleggende egendefinert feilklasse
I sin enkleste form er en egendefinert feil en klasse som utvider JavaScripts innebygde Error-klasse. Dette sikrer at den oppfører seg som en standardfeil.
Den tar vanligvis imot en message og angir sin egen name-egenskap.
class MyCustomError extends Error {
constructor(message: string) {
super(message);
this.name = 'MyCustomError';
}
}
function main() {
try {
throw new MyCustomError('Something specific went wrong!');
} catch (error) {
if (error instanceof MyCustomError) {
console.log(`Caught: ${error.name} - ${error.message}`);
} else {
console.log(`Caught generic error: ${error.message}`);
}
}
}
main();tRPCs TRPCError
For at tRPC skal kunne forstå og videreføre feil på riktig måte, bør de egendefinerte feilene dine utvide TRPCError fra @trpc/server.
TRPCError krever et objekt med en code (for eksempel 'NOT_FOUND' eller 'BAD_REQUEST') og en message. Denne koden hjelper klienten med å forstå feiltypen.
Definere en egendefinert tRPC-feil
Slik definerer du en egendefinert feil for tRPC, slik at den utvider TRPCError og angir en relevant statuskode.
Dette eksempelet oppretter en UserNotFoundError. Legg merke til at vi sender tRPC-verdien code til super()-konstruktøren.
import { TRPCError } from '@trpc/server';
class UserNotFoundError extends TRPCError {
constructor(userId: string) {
super({
code: 'NOT_FOUND',
message: `User with ID '${userId}' not found.`
});
this.name = 'UserNotFoundError';
}
}
function main() {
try {
throw new UserNotFoundError('user-123');
} catch (error) {
if (error instanceof TRPCError) {
console.log(`Error Code: ${error.code}`);
console.log(`Error Message: ${error.message}`);
}
}
}
main();Utløse egendefinerte feil (backend)
Når den er definert, kan du utløse den egendefinerte feilen direkte i tRPC-prosedyrene dine (spørringer eller mutasjoner). tRPC fanger den automatisk opp og sender den til klienten.
Dette gjør at backend-logikken tydelig kan signalisere bestemte problemer.
import { publicProcedure, router } from './trpc'; // Assume trpc setup
import { TRPCError } from '@trpc/server';
class UserNotFoundError extends TRPCError {
constructor(userId: string) {
super({ code: 'NOT_FOUND', message: `User ${userId} not found.` });
this.name = 'UserNotFoundError';
}
}
const appRouter = router({
getUser: publicProcedure
.input(z.string())
.query(async ({ input: userId }) => {
// Simulate database lookup
if (userId === 'nonexistent') {
throw new UserNotFoundError(userId); // Throw our custom error!
}
return { id: userId, name: `User ${userId}` };
}),
});
// Note: `z` for Zod input validation is assumed here
// The router itself is not runnable without a full server context.Frontend: Motta feil
På frontend-siden vil tRPC-biblioteket på klientsiden utløse en instans av TRPCClientError når en tRPC-prosedyre mislykkes.
Dette feilobjektet inneholder code og message fra backendens TRPCError, slik at du kan identifisere det bestemte problemet.
Frontend: Identifisere egendefinerte feil
For å håndtere bestemte egendefinerte feil på klienten kan du bruke en try...catch-blokk og undersøke error-objektet.
- Kontroller
error.data.code: Dette er den mest pålitelige metoden, siden verdien kommer direkte fraTRPCError-koden. - Kontroller
error.message: Mindre pålitelig, men kan brukes for bestemte meldinger. instanceof(med delte typer): Hvis du deler definisjonen av den egendefinerte feilklassen mellom klient og server, kan du brukeinstanceof. Dette er vanlig i monorepoer.
Frontend-eksempel: Håndtere UserNotFoundError
Slik kan en React-komponent (eller tilsvarende frontend-logikk) håndtere UserNotFoundError ved hjelp av egenskapen error.data.code.
Dette gjør at du kan vise en brukervennlig melding som er spesifikk for feilen.
import { trpc } from './utils/trpc'; // Assume trpc client setup
function UserProfile({ userId }: { userId: string }) {
const { data, error, isLoading } = trpc.getUser.useQuery(userId);
if (isLoading) {
return '<p>Loading user data...</p>';
}
if (error) {
if (error.data?.code === 'NOT_FOUND') {
return `<p>User with ID <b>${userId}</b> does not exist.</p>`;
} else {
return `<p>An unexpected error occurred: ${error.message}</p>`;
}
}
return `<h1>Welcome, ${data?.name}!</h1>`;
}
function main() {
// This function simulates component usage.
// In a real app, trpc.getUser.useQuery would trigger an API call.
console.log('Simulating UserProfile for existing user...');
// Assume UserProfile('user-123') would render 'Welcome, User user-123!'
console.log('Simulating UserProfile for nonexistent user...');
// Assume UserProfile('nonexistent') would render 'User with ID nonexistent does not exist.'
}
main();Hurtigkontroll
Hvilke av følgende er gode grunner til å definere og bruke egendefinerte feiltyper i tRPC, særlig når du utvider TRPCError?
Oppsummering: Egendefinerte feiltyper
Godt jobbet! Du har lært hvordan du kan bruke egendefinerte feiltyper i tRPC:
- Utvid
TRPCError: Slik kan tRPC videreføre feilene dine på riktig måte. - Angi
code: Bruk tRPCs feilkoder (for eksempel'NOT_FOUND') for standardisering. - Utløs på backend: Signaler bestemte problemer fra prosedyrene dine.
- Fang opp på frontend: Bruk
error.data.codefor presis feilhåndtering.
Denne fremgangsmåten gir mer robuste og brukervennlige applikasjoner ved å kommunisere backend-problemer tydelig til klienten.
Lær deg Typesikre API-er fra frontend til backend med tRPC med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 10
- Leksjoner
- 40
Ofte stilte spørsmål
Er leksjonen «Egendefinerte feiltypper» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Typesikre API-er fra frontend til backend med tRPC, inkludert «Egendefinerte feiltypper», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.
Hva lærer jeg i «Egendefinerte feiltypper»?
Definer og kast egendefinerte feiltyper fra backend som videreformidles korrekt til frontend. Du øver på Typesikre API-er fra frontend til backend med tRPC med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Typesikre API-er fra frontend til backend med tRPC?
Ingen tidligere erfaring er nødvendig. Typesikre API-er fra frontend til backend med tRPC på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Egendefinerte feiltypper»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Typesikre API-er fra frontend til backend med tRPC-leksjonen?
Ja. Alle Typesikre API-er fra frontend til backend med tRPC-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Elegant håndtering av tRPC-feil
- Egendefinerte feiltypper
- Datatransformatorer for serialisering
- Formatering av feil og valideringstilbakemeldinger på feltnivå