Feilhåndtering i actions
Implementer effektive strategier for feilhåndtering i Server Actions for å gi brukerne robuste tilbakemeldinger.
Feilhåndtering i actions er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 3 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 Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
Robuste Server Actions
Når De bygger applikasjoner, kan ting gå galt! Data kan være ugyldige, en database kan være utilgjengelig, eller et eksternt API kan svikte.
Effektiv feilhåndtering i Server Actions er avgjørende for en god brukeropplevelse og for å opprettholde dataintegriteten. Den hindrer krasj og gir tydelige tilbakemeldinger.
`try-catch`-blokken
I JavaScript/TypeScript er den grunnleggende måten å håndtere mulige feil på å bruke en try-catch-blokk. Den lar Dem «prøve» å kjøre kode og «fange opp» eventuelle feil.
- Koden i
try-blokken kjøres. - Hvis det oppstår en feil, hopper kjøringen til
catch-blokken. catch-blokken mottar feilobjektet, slik at De kan håndtere feilen på en kontrollert måte.
Eksempel på feil i en Server Action
La oss se på en enkel Server Action som kan mislykkes. Tenk Dem en handling som deler to tall, der det ene kan være null.
Uten feilhåndtering vil en divisjon med null krasje handlingen og potensielt også skjemainnsendingen på klientsiden.
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 };
}Fange opp feil på serveren
For å hindre at handlingen krasjer, pakker vi den risikable koden inn i en try-catch-blokk. Da kan vi logge feilen på serveren og hindre at sensitive feildetaljer når klienten.
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.' };
}
}Returnere klientvennlige feil
Etter at en feil er fanget opp på serveren, må vi returnere en meningsfull og klientvennlig melding. Denne meldingen hjelper brukerne med å forstå hva som gikk galt, uten å avsløre interne serverdetaljer.
- Returner et objekt med flagget
success: false. - Ta med en
error-egenskap med en brukervennlig melding. - Unngå å sende rå feilstakkspor til klienten av sikkerhetshensyn.
Handling med retur av klientfeil
Slik ser divideNumbers-handlingen vår ut når den returnerer bestemte feilmeldinger til klienten:
Legg merke til at ulike feil får ulike meldinger, og at en generell melding brukes for uventede feil.
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.' };
}
}Visning av feil på klientsiden
På klientsiden mottar du objektet som returneres etter at du har kalt en Server Action. Du kan deretter kontrollere egenskapene success og error for å oppdatere brukergrensesnittet.
Dette gjør det mulig å vise en feilmelding til brukeren, deaktivere deler av skjemaet eller utføre andre korrigerende handlinger.
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>
);
}React-`useFormState`-hook
For skjemaer er Reacts useFormState-hook spesielt utviklet for å håndtere tilstanden som returneres av en Server Action. Den gjør det enklere å vise tilbakemeldinger, for eksempel suksess- eller feilmeldinger, etter at et skjema er sendt inn.
Den tar imot handlingen din og en opprinnelig tilstand, og returnerer den gjeldende tilstanden samt en oppdatert handling som du sender til <form>-elementets action-prop.
Bruke `useFormState` for feil
Slik integrerer du useFormState for å vise feilmeldinger direkte i skjemakomponenten. Dette gjør det svært ryddig å håndtere svaret fra handlingen.
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>
);
}Håndtere feil i Server Actions
Hvilken av de følgende fremgangsmåtene er BEST for å håndtere feil som fanges opp i en Server Action i Next.js?
Oppsummering: Feilhåndtering
Du har nå fått god kontroll på feilhåndtering i Server Actions i Next.js!
- Bruk
try-catch-blokker for å håndtere feil på serveren på en kontrollert måte. - Logg feil på serversiden for feilsøking og overvåking.
- Returner feilmeldinger som er forståelige for klienten, ved hjelp av et strukturert objekt (for eksempel
{ success: false, error: 'message' }). - Bruk Reacts
useFormState-hook for enkelt å håndtere og vise resultater og feil fra handlinger i skjemaene.
Robust feilhåndtering gjør applikasjonene dine mer pålitelige og brukervennlige!
Lær deg TypeScript 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
- 22
- Leksjoner
- 88
Ofte stilte spørsmål
Er leksjonen «Feilhåndtering i actions» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Feilhåndtering i actions», 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 Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
Hva lærer jeg i «Feilhåndtering i actions»?
Implementer effektive strategier for feilhåndtering i Server Actions for å gi brukerne robuste tilbakemeldinger. Du øver på Next.js 15 fullstack (App Router + Server Actions) 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 Next.js 15 fullstack (App Router + Server Actions)?
Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) 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 3 av 4.
Hvor lang tid tar leksjonen «Feilhåndtering i actions»?
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 Next.js 15 fullstack (App Router + Server Actions)-leksjonen?
Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-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
- Grunnleggende skjemaer med Server Actions
- Endring av data og revalidering
- Feilhåndtering i actions
- Optimistisk UI og ventetilstander med Server Actions