⚡UX Design

Error States designen

Fehlerseiten die helfen statt frustrieren

Jede App hat Fehler. Die Frage ist nicht ob, sondern wie du damit umgehst. Eine gute Error Page erklaert was passiert ist, bietet Loesungen an und frustriert den User nicht. Schlechte Error Pages verlieren Kunden.

Pro-Tip — Der schnelle Weg

Zeig nie technische Fehlermeldungen an. 'Error 500 Internal Server Error' hilft niemandem. 'Etwas ist schiefgelaufen. Bitte versuche es erneut.' ist tausendmal besser.

Seite 1

Next.js Error Boundaries

Next.js App Router hat error.tsx eingebaut. Diese Datei faengt Fehler in der Route ab und zeigt eine Fallback-UI statt einer kaputten Seite.

'use client'

export default function Error({
error, reset
}: {
error: Error
reset: () => void
}) {
return (
<div className="flex flex-col items-center justify-center min-h-[50vh] gap-4">
<h2 className="text-2xl font-bold">Etwas ist schiefgelaufen</h2>
<p className="text-muted-foreground">Bitte versuche es erneut.</p>
<button onClick={reset} className="px-4 py-2 bg-primary text-white rounded-lg">
Erneut versuchen
</button>
</div>
)
}

404 Seite gestalten

Die 404-Seite ist die haeufigste Fehlerseite. Mach sie hilfreich mit einer Suchfunktion, beliebten Links oder einem Zurueck-Button statt nur Seite nicht gefunden.

// app/not-found.tsx
export default function NotFound() {
return (
<div className="flex flex-col items-center justify-center min-h-[50vh] gap-6">
<span className="text-6xl">404</span>
<h1 className="text-2xl font-bold">Seite nicht gefunden</h1>
<p className="text-muted-foreground">Diese Seite existiert nicht oder wurde verschoben.</p>
<a href="/" className="px-4 py-2 bg-primary text-white rounded-lg">
Zur Startseite
</a>
</div>
)
}

Formular-Fehler anzeigen

Fehler in Formularen muessen direkt am Feld erscheinen, nicht als Alert oben auf der Seite. Rote Umrandung plus Fehlermeldung unter dem Feld ist der Standard.

<div>
<input
className={`border rounded-lg px-3 py-2 ${
error ? "border-red-500" : "border-gray-300"
}`}
/>
{error && (
<p className="text-sm text-red-500 mt-1">{error}</p>
)}
</div>

Globales Error Handling

Fang unbehandelte Fehler global ab und logge sie. In Produktion nutz einen Service wie Sentry. Im Development reicht console.error.

// app/global-error.tsx
'use client'

export default function GlobalError({
error, reset
}: {
error: Error
reset: () => void
}) {
// Sentry.captureException(error)
return (
<html><body>
<h2>Kritischer Fehler</h2>
<button onClick={reset}>App neu laden</button>
</body></html>
)
}

Seite 2

Warum das funktioniert

Error Boundaries verhindern dass die komplette App abstuerzt
Freundliche Fehlermeldungen halten User in der App statt sie zu vertreiben
Formular-Fehler am Feld reduzieren Frustration und Abbruchrate
Globales Error Handling faengt auch unerwartete Fehler ab

Tipps

Jede error.tsx muss 'use client' haben weil Error Boundaries Client Components sind
Nutz global-error.tsx fuer Fehler die nicht von Route-Error-Boundaries gefangen werden
Logge Fehler serverseitig mit Details, zeige dem User nur freundliche Meldungen
Biete immer eine Aktion an: Erneut versuchen, Zurueck, oder Startseite

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen