Why error boundaries prevent app crashes in Remix - Performance Evidence

Performance: Why error boundaries prevent app crashes

HIGH IMPACT

This concept affects the app's interaction responsiveness and visual stability by preventing full app crashes during runtime errors.

Handling runtime errors in UI components to avoid app crashes

Remix

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can log the error here
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }

    return this.props.children;
  }
}

function App() {
  return <ErrorBoundary><ComponentThatMayThrow /></ErrorBoundary>;
}

Error boundary catches errors in child components, preventing full app crash and showing fallback UI instead.

📈 Performance GainPrevents full app re-render and CLS; maintains interaction responsiveness (INP).

Handling runtime errors in UI components to avoid app crashes

Remix

function App() {
  return <ComponentThatMayThrow />;
}

// No error boundary wrapping the component

If ComponentThatMayThrow throws an error, the entire app crashes and unmounts, causing a blank screen.

📉 Performance CostBlocks user interaction until reload; causes full app re-render and CLS due to layout shift.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No error boundary	Full app unmount and remount	Multiple reflows due to full layout recalculation	High paint cost due to blank screen and re-render	[X] Bad
With error boundary	Only fallback UI updates	Single reflow limited to fallback area	Low paint cost with stable layout	[OK] Good

Rendering Pipeline

When an error occurs in a child component, the error boundary intercepts it before it propagates to the root. This prevents the browser from unmounting the entire app UI, avoiding costly reflows and repaints.

→JavaScript Execution

→Layout

→Paint

→Composite

⚠️ BottleneckJavaScript Execution when error propagates without boundary

Core Web Vital Affected

INP, CLS

This concept affects the app's interaction responsiveness and visual stability by preventing full app crashes during runtime errors.

Optimization Tips

1Always wrap components that may throw errors with error boundaries.

2Error boundaries prevent full app unmount, reducing layout shifts (CLS).

3Preventing app crashes improves interaction responsiveness (INP).

Performance Quiz - 3 Questions

What is the main performance benefit of using error boundaries in a Remix app?

A They reduce the JavaScript bundle size significantly.

B They prevent the entire app from crashing and reduce layout shifts.

C They speed up initial page load by lazy loading components.

D They improve SEO by pre-rendering error messages.

DevTools: Performance

How to check: Record a session where a component throws an error. Observe if the entire app unmounts or only the error boundary fallback renders.

What to look for: Look for large layout shifts or full app re-renders indicating no error boundary; stable UI and limited re-render indicate good error boundary use.

Practice

1. What is the main purpose of error boundaries in a Remix app?

easy

A. To catch errors in components and prevent the entire app from crashing

B. To speed up the app loading time

C. To style components dynamically

D. To manage user authentication

Solution

1. Step 1: Understand error boundaries role

   Error boundaries catch JavaScript errors in components during rendering or lifecycle methods.

2. Step 2: Identify their effect on app stability

   By catching errors, they prevent the whole app from crashing and show fallback UI instead.

3. Final Answer:

   To catch errors in components and prevent the entire app from crashing -> Option A

4. Quick Check:

   Error boundaries stop crashes = D [OK]

Hint: Error boundaries catch errors to avoid full app crash [OK]

Common Mistakes:

• Thinking error boundaries improve performance
• Confusing error boundaries with styling tools
• Assuming error boundaries handle authentication

2. Which of the following is the correct way to define an error boundary in Remix?

easy

A. export function errorBoundary() { return Error occurred; }

B. export const ErrorBoundary = () => { console.log('Error'); }

C. export function ErrorBoundary() { return Error occurred; }

D. function ErrorBoundary() { throw new Error('Error'); }

Solution

1. Step 1: Check Remix error boundary naming

   Remix expects an exported function named ErrorBoundary that returns fallback UI.

2. Step 2: Validate function syntax

   export function ErrorBoundary() { return <div>Error occurred</div>; } correctly exports a function named ErrorBoundary returning JSX fallback UI.

3. Final Answer:

   export function ErrorBoundary() { return <div>Error occurred</div>; } -> Option C

4. Quick Check:

   Correct export and name = B [OK]

Hint: ErrorBoundary must be exported with exact name and return UI [OK]

Common Mistakes:

• Using lowercase function name
• Not exporting the function
• Not returning JSX fallback UI

3. Given this Remix component with an error boundary:

export function ErrorBoundary() {
  return <div>Oops! Something went wrong.</div>;
}

export default function Component() {
  throw new Error('Crash');
  return <div>Hello</div>;
}

What will the user see when this component is rendered?

medium

A. The fallback UI: 'Oops! Something went wrong.'

B. A blank page with no content

C. The text 'Hello' displayed on the page

D. A JavaScript error message in the console but normal UI

Solution

1. Step 1: Identify error thrown in component

   The component throws an error immediately when rendered, so normal UI won't show.

2. Step 2: Check error boundary fallback UI

   The ErrorBoundary function returns fallback UI text 'Oops! Something went wrong.' which will display instead.

3. Final Answer:

   The fallback UI: 'Oops! Something went wrong.' -> Option A

4. Quick Check:

   Error thrown triggers fallback UI = A [OK]

Hint: Thrown errors show fallback UI, not normal component [OK]

Common Mistakes:

• Expecting normal UI despite error
• Thinking error shows raw error text
• Assuming blank page on error

4. You wrote this error boundary in Remix:

export function ErrorBoundary() {
  console.log('Error caught');
}

Why does this cause the app to crash instead of showing fallback UI?

medium

A. Because the function name must be lowercase

B. Because the function does not return any JSX fallback UI

C. Because console.log is not allowed in error boundaries

D. Because error boundaries cannot be functions

Solution

1. Step 1: Check error boundary requirements

   An error boundary must return JSX to show fallback UI when an error occurs.

2. Step 2: Analyze given function

   The function only logs to console and returns nothing, so no UI is rendered on error.

3. Final Answer:

   Because the function does not return any JSX fallback UI -> Option B

4. Quick Check:

   Return fallback UI to prevent crash = C [OK]

Hint: Always return fallback UI JSX in ErrorBoundary [OK]

Common Mistakes:

• Thinking console.log breaks error boundaries
• Using wrong function name casing
• Believing error boundaries can't be functions

5. In a Remix app, you want to prevent the entire app from crashing when a nested component throws an error. Which approach best uses error boundaries to achieve this?

hard

A. Disable error boundaries and rely on browser error handling

B. Wrap only the root component with a single error boundary

C. Use try/catch blocks inside every component's render function

D. Add error boundaries around each nested component that might throw errors

Solution

1. Step 1: Understand error boundary scope

   Error boundaries catch errors in their child components and prevent those errors from crashing the whole app.

2. Step 2: Apply error boundaries strategically

   Wrapping each risky nested component with its own error boundary isolates errors locally and keeps the rest of the app running.

3. Step 3: Evaluate other options

   Wrapping only root means one error crashes all; try/catch in render is not valid; disabling boundaries loses protection.

4. Final Answer:

   Add error boundaries around each nested component that might throw errors -> Option D

5. Quick Check:

   Local error boundaries isolate crashes = A [OK]

Hint: Use multiple error boundaries around risky components [OK]

Common Mistakes:

• Using only one root error boundary
• Trying try/catch inside render
• Ignoring error boundaries altogether