Robust errors handling is crucial for providing a good user experience in React applications. When errors happen, you want to gracefully handle them, log details for debugging, and allow users to keep working without interruptions. In this article, we’ll explore two powerful errors handling features in React – error boundaries and Sentry integration.

The problem: uncaught errors crash apps

In React, when JavaScript throwing errors during rendering, an uncaught error will cause the whole React component tree to unmount. The app essentially crashes. This abruptly stops app execution and provides a poor UX.

function BuggyCounter() {
  const [counter, setCounter] = useState(0);

  function handleClick() {
    // Simulate error
    throw new Error('Oops something went wrong!');

    setCounter(counter + 1); 
  }

  return (
    <div>
      <p>You clicked {counter} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

In the above example, clicking the button throws an error that crashes the app. We need better handling.

Error boundaries catch crashes

The React error boundary feature lets you catch errors in child components before they bubble up and crash the whole app. Implement the componentDidCatch lifecycle method to become an error boundary:

interface ErrorBoundaryProps {
  children: ReactNode;
}

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

  function handleError(error: Error) {
    // Display fallback UI
    setHasError(true);

    // Log error
    console.error(error); 
  }

  if (hasError) {
    return <p>Sorry, an error occurred!</p>;
  }

  return (
    <div>
      {children}
    </div>
  ); 
}

The error boundary component catches any errors bubbling up from descendants in the component tree. It displays a fallback error message instead of crashing the app.

Integrate Sentry for Advanced Reporting

Sentry define as an error monitoring tool often used to track errors. While error boundaries prevent crashes, Sentry takes error handling further. It gives detailed reporting for tracking down bugs.

Sentry integrates directly into React error boundaries. First initialize Sentry in your app:

import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "___PUBLIC_DSN___",
});

Then wrap any error boundary handling errors with Sentry’s ErrorBoundary component:

function ErrorBoundary({ children }) {

  if (hasError) {
    return (
      <Sentry.ErrorBoundary
        fallback={"An error occurred"}
      > 
        <p>Sorry, an error occurred!</p>
      </Sentry.ErrorBoundary>
    );
  }

  return (
    <div>
      {children}
    </div>
  );
}

Now Sentry automatically tracks errors caught by the boundary – including sourcemaps, stack traces, context, release versions, affected users, and more. It provides an invaluable window into resolving issues.

Going further in errors handling with sentry

Sentry has many other features that help drive quality:

  • Configure breadcrumbs – application events that happened prior to an error, great for understanding sequences leading to a crash
  • Set user context like email or id to track impact on different users
  • Enable performance monitoring to detect slow pages
  • Trigger alerts on increased error rates or severe issues needing immediate response

And many more!

Conclusion

Robust errors handling is a key part of delivering quality apps to users. React error boundaries and Sentry provide powerful tools to gracefully handle errors and gain insight through detailed reporting. This prevents disruptive crashing scenarios and builds understanding to drive development of resilient software.

Reach out to the experts

I specialize in building high quality React applications with robust architecture, testing, and errors handling. If you have a web project and are looking for an experienced engineer to implement advanced solutions, please get in touch! I’d be happy to discuss your needs and see how I can help bring your vision to life.