Why error boundaries prevent app crashes in Remix - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an error boundary component in React.

Remix

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = React.useState(false);

  React.useEffect(() => {
    window.addEventListener('error', () => setHasError(true));
  }, []);

  if ([1]) {
    return <h1>Something went wrong.</h1>;
  }

  return children;
}

Drag options to blanks, or click blank then click option'

AhasError

Bchildren

Cfalse

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable name in the if condition.

Checking the children instead of the error state.

The component uses the hasError state to check if an error occurred and conditionally render the fallback UI.

2fill in blank

medium

Complete the code to catch errors in a React component using an error boundary.

Remix

function BuggyComponent() {
  throw new Error('Bug!');
}

function App() {
  return (
    <ErrorBoundary>
      [1]
    </ErrorBoundary>
  );
}

Drag options to blanks, or click blank then click option'

A<React.Fragment />

B<ErrorBoundary />

C<App />

D<BuggyComponent />

Attempts:

3 left

💡 Hint

Common Mistakes

Wrapping the error boundary inside the buggy component.

Not wrapping the buggy component at all.

The BuggyComponent is wrapped inside the ErrorBoundary to catch its errors and prevent app crashes.

3fill in blank

hard

Fix the error in the error boundary component to properly catch errors using React hooks.

Remix

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = React.useState(false);

  React.useEffect(() => {
    try {
      [1];
    } catch {
      setHasError(true);
    }
  }, []);

  if (hasError) {
    return <h1>Something went wrong.</h1>;
  }

  return children;
}

Drag options to blanks, or click blank then click option'

Athrow new Error('Test error')

BsetHasError(false)

Cwindow.addEventListener('error', () => setHasError(true))

Dconsole.log('No error')

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to throw an error inside useEffect.

Not setting the error state when an error occurs.

Using window.addEventListener('error', ...) inside useEffect listens for errors and sets the error state.

4fill in blank

hard

Fill both blanks to create a React error boundary that resets error state on retry.

Remix

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = React.useState(false);

  React.useEffect(() => {
    const handleError = () => setHasError(true);
    window.addEventListener('error', handleError);
    return () => window.[1]('error', [2]);
  }, []);

  if (hasError) {
    return <button onClick={() => setHasError(false)}>Try again</button>;
  }

  return children;
}

Drag options to blanks, or click blank then click option'

AremoveEventListener

BhandleError

CaddEventListener

DsetHasError

Attempts:

3 left

💡 Hint

Common Mistakes

Using addEventListener instead of removeEventListener in cleanup.

Passing wrong handler function to removeEventListener.

We remove the error listener on cleanup using removeEventListener and the same handler handleError.

5fill in blank

hard

Fill all three blanks to create a Remix loader that handles errors gracefully with an error boundary.

Remix

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export async function loader() {
  try {
    const data = await fetch('/api/data').then(res => res.json());
    return json(data);
  } catch (error) {
    throw new Response('Failed to load', { status: [1] });
  }
}

export default function DataPage() {
  const data = useLoaderData();
  return <div>[2]: [3]</div>;
}

Drag options to blanks, or click blank then click option'

A500

BError

Cdata

D404

Attempts:

3 left

💡 Hint

Common Mistakes

Using 404 status for server errors.

Displaying wrong variable names in the component.

The loader throws a 500 status on error. The component displays the data with a label Error.

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