Typsäkra API:er från frontend till backend med tRPC · Lektion

Anpassade feltyper

Definiera och kasta anpassade feltyper från backend som överförs korrekt till frontend.

Lektion 2 av 410 steg

Anpassade feltyper är en gratis lektion i Typsäkra API:er från frontend till backend med tRPC på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Typsäkra API:er från frontend till backend med tRPC, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.

Varför anpassade feltyper?

I tRPC använder vi ofta TRPCError för att hantera problem. Ibland behöver du dock mer specifika feltyper.

  • Tydlighet: Anpassade fel gör koden tydligare när det gäller vad som gick fel.
  • Specifik hantering: Gör att frontend kan reagera olika på skilda feltillstånd.
  • Bättre felsökning: Ger mer sammanhang än ett generiskt fel.

Låt oss lära oss hur du definierar och använder dem!

Grundläggande anpassad felklass

I sin enklaste form är ett anpassat fel en klass som utökar JavaScripts inbyggda klass Error. Det säkerställer att den fungerar som ett standardfel.

Den tar vanligtvis emot ett message och anger sin egen egenskap name.

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();

tRPC:s TRPCError

För att tRPC ska kunna förstå och vidarebefordra fel korrekt bör dina anpassade fel utöka TRPCError från @trpc/server.

TRPCError kräver ett objekt med en code (till exempel 'NOT_FOUND' eller 'BAD_REQUEST') och ett message. Den här koden hjälper klienten att förstå feltypen.

Definiera ett anpassat tRPC-fel

Så här definierar du ett anpassat fel för tRPC och säkerställer att det utökar TRPCError och anger en relevant statuskod.

Det här exemplet skapar ett UserNotFoundError. Observera att vi skickar tRPC:s code till konstruktorn super().

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();

Kasta anpassade fel (backend)

När det är definierat kan du kasta ditt anpassade fel direkt i dina tRPC-procedurer (frågor eller mutationer). tRPC fångar det automatiskt och skickar det till klienten.

Detta gör att backend-logiken tydligt kan signalera specifika problem.

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: ta emot fel

I frontend kastar tRPC-biblioteket på klientsidan en instans av TRPCClientError när en tRPC-procedur misslyckas.

Det här felobjektet innehåller code och message från ditt TRPCError i backend, så att du kan identifiera det specifika problemet.

Frontend: identifiera anpassade fel

För att hantera specifika anpassade fel på klienten kan du använda ett try...catch-block och granska error-objektet.

  • Kontrollera error.data.code: Detta är det mest tillförlitliga sättet eftersom värdet kommer direkt från TRPCError-koden.
  • Kontrollera error.message: Mindre tillförlitligt, men kan användas för specifika meddelanden.
  • instanceof (med delade typer): Om du delar definitionen av den anpassade felklassen mellan klient och server kan du använda instanceof. Detta är vanligt i monorepon.

Frontend-exempel: hantera UserNotFoundError

Så här kan en React-komponent (eller motsvarande frontend-logik) hantera vårt UserNotFoundError med egenskapen error.data.code.

Detta gör att du kan visa ett användarvänligt meddelande som är specifikt för felet.

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();

Snabbkontroll

Vilka av följande är goda skäl att definiera och använda anpassade feltyper i tRPC, särskilt när du utökar TRPCError?

Sammanfattning: anpassade feltyper

Bra jobbat! Du har lärt dig hur du använder anpassade feltyper i tRPC:

  • Utöka TRPCError: För att tRPC ska kunna vidarebefordra dina fel korrekt.
  • Ange code: Använd tRPC:s felkoder (till exempel 'NOT_FOUND') för standardisering.
  • Kasta i backend: Signalera specifika problem från dina procedurer.
  • Fånga i frontend: Använd error.data.code för exakt felhantering.

Detta tillvägagångssätt leder till robustare och mer användarvänliga program genom att tydligt kommunicera backend-problem till klienten.

Gratis att börja

Lär dig Typsäkra API:er från frontend till backend med tRPC med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
10
Lektioner
40

Vanliga frågor

Är lektionen ”Anpassade feltyper” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Typsäkra API:er från frontend till backend med tRPC, inklusive ”Anpassade feltyper”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.

Vad lär jag mig i ”Anpassade feltyper”?

Definiera och kasta anpassade feltyper från backend som överförs korrekt till frontend. Ni övar på Typsäkra API:er från frontend till backend med tRPC med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Typsäkra API:er från frontend till backend med tRPC?

Du behöver inga förkunskaper. Utbildningen i Typsäkra API:er från frontend till backend med tRPC på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Anpassade feltyper”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Typsäkra API:er från frontend till backend med tRPC-lektionen?

Ja. Varje Typsäkra API:er från frontend till backend med tRPC-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Hantera tRPC-fel på ett robust sätt
  2. Anpassade feltyper
  3. Datatransformatorer för serialisering
  4. Formatera fel och ge valideringsfeedback på fältnivå
← Tillbaka till Typsäkra API:er från frontend till backend med tRPC