Question 1

Was ist eine Error Boundary in React?

Accepted Answer

Eine Error Boundary ist eine React-Klassenkomponente, die JavaScript-Fehler im Kindkomponentenbaum abfängt, eine Fallback-UI anzeigt und verhindert, dass die gesamte Anwendung abstürzt. Sie verwendet die Methoden componentDidCatch() und getDerivedStateFromError(), um Rendering-Fehler abzufangen und zu behandeln.

Question 2

Warum Error Boundaries statt klassischem try/catch in React verwenden?

Accepted Answer

Try/catch-Blöcke können keine Fehler abfangen, die während des React-Komponenten-Renderings auftreten, da sich diese Fehler asynchron im Baum ausbreiten. Error Boundaries sind speziell dafür konzipiert, Rendering-Fehler, Lifecycle-Fehler und Konstruktor-Fehler in Kindkomponenten abzufangen, während try/catch nur für synchronen imperativen Code funktioniert.

Question 3

Welche Lifecycle-Methode ermöglicht das Abfangen eines Fehlers in einer Error Boundary?

Accepted Answer

componentDidCatch(error, info) ist die Lifecycle-Methode, die aufgerufen wird, nachdem ein Fehler von der Error Boundary abgefangen wurde. Sie erhält den Fehler und ein info-Objekt mit componentStack, was Fehler-Logging oder Side-Effect-Aktionen ermöglicht. Beachten Sie, dass getDerivedStateFromError() ebenfalls verwendet wird, aber um den State zu aktualisieren und die Fallback-UI anzuzeigen.

Error Boundaries & Error Handling

Was ist eine Error Boundary in React?

Antwort

Warum Error Boundaries statt klassischem try/catch in React verwenden?

Antwort

Welche Lifecycle-Methode ermöglicht das Abfangen eines Fehlers in einer Error Boundary?

Antwort

Welche Rolle spielt getDerivedStateFromError() in einer Error Boundary?

Was ist der Unterschied zwischen getDerivedStateFromError() und componentDidCatch()?

Weitere React / Next.js-Interviewthemen

JavaScript-Grundlagen

React-Grundlagen

React Hooks

Komponentenlebenszyklus

React Router

Zustandsverwaltung mit Context

Formulare & Controlled Components

Datenabruf & API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js Grundlagen

TypeScript mit React

Next.js Data Fetching

Next.js Server Actions

Routing & Navigation in Next.js

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware & Auth

React Testing

Zustand State Management

React Performance-Optimierung

Advanced React Patterns

Erweiterte Next.js-Funktionen

Next.js Deployment & Produktion

Architecture & Design Patterns

React Server Components

Next.js Internationalisierung

React Sicherheit & Best Practices

Meistere React / Next.js für dein nächstes Interview