Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) · Les

Foutafhandeling in Actions

Implementeer effectieve strategieën voor foutafhandeling binnen Server Actions om gebruikers robuuste feedback te bieden.

Les 3 van 411 stappen

Foutafhandeling in Actions is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 3 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Robuuste Server Actions

Bij het bouwen van toepassingen kan er van alles misgaan! Gegevens kunnen ongeldig zijn, een database kan onbereikbaar zijn of een externe API kan mislukken.

Effectieve foutafhandeling in Server Actions is cruciaal voor een soepele gebruikerservaring en het behouden van de gegevensintegriteit. Hiermee voorkom je crashes en geef je duidelijke feedback.

Het blok `try-catch`

In JavaScript/TypeScript is de fundamentele manier om mogelijke fouten af te handelen het gebruik van een blok try-catch. Hiermee kun je proberen code uit te voeren en eventuele fouten die optreden op te vangen.

Code in het blok try wordt uitgevoerd.
Als er een fout optreedt, gaat de uitvoering verder in het blok catch.
Het blok catch ontvangt het foutobject, zodat je de fout netjes kunt afhandelen.

Voorbeeld van een fout in een Server Action

Laten we kijken naar een eenvoudige Server Action die kan mislukken. Stel je een actie voor die twee getallen deelt, waarbij één getal nul kan zijn.

Zonder foutafhandeling zou delen door nul de actie laten crashen en mogelijk ook het verzenden van het formulier aan de clientzijde verhinderen.

export async function divideNumbers(formData: FormData) {
  const num1 = Number(formData.get('num1'));
  const num2 = Number(formData.get('num2'));

  if (num2 === 0) {
    throw new Error('Cannot divide by zero!');
  }

  const result = num1 / num2;
  return { success: true, result };
}

Fouten op de server opvangen

Om te voorkomen dat de actie crasht, plaatsen we de risicovolle code in een blok try-catch. Zo kunnen we de fout op de server loggen en voorkomen we dat gevoelige foutdetails de client bereiken.

export async function divideNumbers(formData: FormData) {
  try {
    const num1 = Number(formData.get('num1'));
    const num2 = Number(formData.get('num2'));

    if (num2 === 0) {
      throw new Error('Cannot divide by zero!');
    }

    const result = num1 / num2;
    return { success: true, result };
  } catch (error: any) {
    console.error('Action Error:', error.message); // Log on server
    // Do NOT return `error` object directly to client!
    return { success: false, error: 'An unexpected error occurred.' };
  }
}

Foutmeldingen terugsturen die geschikt zijn voor de client

Nadat we een fout op de server hebben opgevangen, moeten we een betekenisvolle melding terugsturen die geschikt is voor de client. Zo begrijpen gebruikers wat er is misgegaan zonder dat interne serverdetails worden onthuld.

Retourneer een object met de vlag success: false.
Voeg een eigenschap error toe met een gebruiksvriendelijke melding.
Stuur om veiligheidsredenen geen onbewerkte stacktraces van fouten naar de client.

Actie met foutmelding voor de client

Zo ziet onze actie divideNumbers eruit wanneer specifieke foutmeldingen naar de client worden teruggestuurd:

Let erop dat verschillende fouten verschillende meldingen krijgen en dat voor onverwachte fouten een algemene melding wordt gebruikt.

export async function divideNumbers(formData: FormData) {
  try {
    const num1 = Number(formData.get('num1'));
    const num2 = Number(formData.get('num2'));

    if (isNaN(num1) || isNaN(num2)) {
      throw new Error('Invalid input: Please enter numbers.');
    }
    if (num2 === 0) {
      throw new Error('Division by zero is not allowed.');
    }

    const result = num1 / num2;
    return { success: true, result };
  } catch (error: any) {
    console.error('Server Action Failed:', error.message);
    return { success: false, error: error.message || 'Unknown error occurred.' };
  }
}

Fouten op de client weergeven

Op de client ontvang je na het aanroepen van een Server Action het geretourneerde object. Je kunt vervolgens de eigenschappen success en error controleren om je gebruikersinterface bij te werken.

Zo kun je een foutmelding aan de gebruiker tonen, delen van het formulier uitschakelen of andere corrigerende acties uitvoeren.

import { useState } from 'react';
import { divideNumbers } from './actions'; // Your Server Action

export default function CalculatorForm() {
  const [message, setMessage] = useState('');

  async function handleSubmit(formData: FormData) {
    const res = await divideNumbers(formData);
    if (res.success) {
      setMessage(`Result: ${res.result}`);
    } else {
      setMessage(`Error: ${res.error}`);
    }
  }

  return (
    <form action={handleSubmit}>
      <input type="number" name="num1" />
      <input type="number" name="num2" />
      <button type="submit">Calculate</button>
      {message && <p>{message}</p>}
    </form>
  );
}

De React-hook `useFormState`

Voor formulieren is Reacts hook useFormState speciaal ontworpen om de status te beheren die door een Server Action wordt geretourneerd. Deze hook vereenvoudigt het weergeven van feedback, zoals succes- of foutmeldingen, na het verzenden van een formulier.

De hook ontvangt je actie en een beginstatus en retourneert de huidige status en een bijgewerkte actie die je doorgeeft aan de prop action van je <form>.

`useFormState` gebruiken voor fouten

Zo integreer je useFormState om foutmeldingen rechtstreeks in je formuliercomponent weer te geven. Hierdoor wordt het verwerken van de reactie van de actie heel overzichtelijk.

import { useFormState } from 'react-dom';
import { divideNumbers } from './actions';

const initialState = { success: false, error: '', result: null };

export default function CalculatorForm() {
  const [state, formAction] = useFormState(divideNumbers, initialState);

  return (
    <form action={formAction}>
      <input type="number" name="num1" placeholder="Number 1" />
      <input type="number" name="num2" placeholder="Number 2" />
      <button type="submit">Calculate</button>
      {state.success && <p>Result: {state.result}</p>}
      {!state.success && state.error && <p style={{ color: 'red' }}>{state.error}</p>}
    </form>
  );
}

Fouten in Server Actions verwerken

Wat is volgens jou de BESTE aanpak voor het verwerken van fouten die binnen een Next.js Server Action worden opgevangen?

Beantwoord dit in de interactieve les

Samenvatting: fouten verwerken

Je beheerst nu het verwerken van fouten in Next.js Server Actions!

Gebruik try-catch-blokken om fouten op de server netjes af te handelen.
Leg fouten aan de serverkant vast voor foutopsporing en monitoring.
Retourneer gebruiksvriendelijke foutmeldingen voor de client met een gestructureerd object, bijvoorbeeld { success: false, error: 'message' }.
Gebruik Reacts hook useFormState om actieresultaten en fouten in je formulieren eenvoudig te beheren en weer te geven.

Een robuuste foutafhandeling maakt je applicaties betrouwbaarder en gebruiksvriendelijker!

Gratis beginnen

Leer TypeScript 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: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Foutafhandeling in Actions” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Foutafhandeling in Actions”, 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Wat leer ik in “Foutafhandeling in Actions”?

Implementeer effectieve strategieën voor foutafhandeling binnen Server Actions om gebruikers robuuste feedback te bieden. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?

Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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 3 van 4.

Hoe lang duurt de les “Foutafhandeling in Actions”?

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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?

Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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

Basisformulieren met Server Actions
Gegevens wijzigen en revalideren
Foutafhandeling in Actions
Optimistische UI en wachtstatussen met Server Actions

← Terug naar Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)