Introducing useCatch: The Easy Way to Create Error Boundaries in Fiddlehead
Tags: javascript, webdev, react, hook
Published: 2023-02-07 18:17:37

Have you ever encountered a situation where a component in your React app throws an unexpected error and causes the entire app to break down? This can be a frustrating experience for both you as the developer and for your users.

Fortunately, you can handle such errors with error boundaries. Error boundaries are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

In React, to create an error boundary, you typically need to use a class component with methods such as `componentDidCatch` and `getDerivedStateFromError`. However, in [Fiddlehead](https://github.com/fiddleheadjs/fiddlehead), creating an error boundary is much simpler. With the [useCatch](https://fiddleheadjs.com/API/useCatch) hook, you can easily catch errors during rendering and in hook callbacks in the subtree below, and provide a user-friendly message instead of a blank screen.

Here's an example of how to use the `useCatch` hook to create an error boundary in Fiddlehead:

```jsx
import {useCatch} from 'fiddlehead';

export function ErrorBoundary({children}) {
  let [error, clearError] = useCatch();

  if (error !== null) {
    if (error instanceof Error) {
      return `${error.name}: ${error.message}`;
    }

    return 'Oops... Something went wrong!';
  }

  return children;
}
```

In the example above, the `ErrorBoundary` component uses the `useCatch` hook to catch errors during rendering and in hook callbacks in the subtree below. When an error occurs, it displays either the error name and message, or a user-friendly message of "Oops... Something went wrong!"

In addition to catching and displaying errors, you may also want to log the errors to a logging service. Here's an example of how you can use the `useCatch` hook to log errors to a logging service in the background:

```jsx
import {useCatch, useEffect} from 'fiddlehead';
import {logErrorToService} from './logging';

export function ErrorBoundary({children}) {
  let [error, clearError] = useCatch();

  useEffect(() => {
    if (error !== null) {
      // Log the error to a logging service
      logErrorToService(error);
    }
  }, [error]);

  if (error !== null) {
    return 'Oops... Something went wrong!';
  }

  return children;
}
```

The name "useCatch" in Fiddlehead was inspired by the "catch" keyword in the traditional try-catch statement. Just as the "catch" keyword is used to handle errors in a try-catch block, the `useCatch` hook in Fiddlehead allows you to handle errors during the rendering of your components, or the execution of the callbacks of hooks (`useEffect`, `useState`,...), making it an error boundary for your application.

Similar to React, [useCatch](https://fiddleheadjs.com/API/useCatch) in Fiddlehead do NOT catch errors for:

- Errors that occur within event handlers
- Asynchronous errors, such as those that occur within `setTimeout` or `requestAnimationFrame` callbacks
- Errors that are thrown within the error boundary component itself, instead of its children components.

Whether you want to display a user-friendly message, log errors to a service, or both, the `useCatch` hook has you covered. So why not give [Fiddlehead](https://fiddleheadjs.com) a try and transform your web development experience today?