Introduction

Why do need to care about error handling? As applications grow in complexity use by a larger audience, it becomes vital to handle errors gracefully. When errors occur, users should present with a helpful message or alternative content instead of a blank screen or cryptic error message. This not only improves user experience but also provides a way to report and address issues effectively. The react-error-boundary library offers an elegant solution to achieve this in React applications. 💡

Error Handling and React-Error-Boundary

About Error handling, it encompasses the set of procedures aimed at responding to and recovering from error conditions within a software application. It involves anticipating, detecting, and resolving errors, including programming errors and communication errors. The purpose of error handling is to ensure the smooth execution of the program’s normal flow. In fact, many applications encounter various design challenges when implementing effective error-handling techniques.

In addition, React-error-boundary is an npm package that provides a reusable error boundary component for React. It simplifies the process of catching and handling errors within your application.

Implementing React-Error-Boundary

To begin using react-error-boundary in your React application, follow these steps:

1. Install the react-error-boundary package and config package.json as following:

npm install react-error-boundary

Create an ErrorBoundary component using the ErrorBoundary from the react-error-boundary package. This component will wrap around the entry point of your application and catch any uncaught errors. Here’s an example of an ErrorBoundary component:

import * as React from "react";
import { ErrorBoundary as ErrorBoundaryWrapper } from "react-error-boundary";
import { Result, Typography } from "antd";
import { CloseCircleOutlined } from "@ant-design/icons";

const { Paragraph, Text } = Typography;

/**
 * Error Boundary
 *
 * This component will catch any uncaught errors in the app
 * and display a user-friendly screen instead of a white screen
 */
const ErrorBoundary = ({ children }) => (
  <ErrorBoundaryWrapper FallbackComponent={ErrorScreen}>{children}</ErrorBoundaryWrapper>
);

export default ErrorBoundary;

function ErrorScreen() {
  return (
    <Result
      status="error"
      title="Proscheduler crash 😔"
      subTitle="Something went wrong. Please try again by reload the app."
    >
      <div className="desc">
        <Paragraph>
          <Text
            strong
            style={{
              fontSize: 16,
            }}
          >
            If the problem still resist:
          </Text>
        </Paragraph>
        <Paragraph>
          <CloseCircleOutlined className="site-result-demo-error-icon" /> Contact your administrator.
        </Paragraph>
        <Paragraph>
          <CloseCircleOutlined className="site-result-demo-error-icon" /> Report to our support desk.
          <a
            href="https://devsamurai.atlassian.net/servicedesk/customer/portal/6"
            target="_blank"
            rel="noopener noreferrer"
          >
            &nbsp;Proscheduler Support Desk &gt;
          </a>
        </Paragraph>
      </div>
    </Result>
  );
}

1. Wrap the ErrorBoundary component around the Store Provider of every index entry point in your application. Here’s an example of how to wrap the ErrorBoundary component around the root entry point of your application:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Provider } from "react-redux";

import ErrorBoundary from "./ErrorBoundary";
import store from "./store";
import App from "./App";

import "./index.css";

ReactDOM.render(
  <ErrorBoundary>
    <Provider store={store}>
      <App />
    </Provider>
  </ErrorBoundary>,
  document.getElementById("root")
);

That’s it! You have successfully integrated react-error-boundary into your React application. Now, whenever an uncaught error occurs within the wrapped components, the ErrorBoundary component will handle it and display the user-friendly error screen.

Improving the User Experience

By implementing react-error-boundary, you ensure that your application presents a better user experience when errors occur. Instead of showing a blank screen, users are greeted with an error screen containing a meaningful message and instructions on how to proceed. Additionally, the ErrorBoundary component allows users to report issues and seek support, making it easier to track and resolve bugs.

Sentry Integration

To further enhance our error monitoring and debugging capabilities, I highly recommend integrating Sentry into our application.

1. Sign up for a free account on Sentry: Head to Application Performance Monitoring & Error Tracking Software and create a free account. This will give us access to the necessary tools and features for error tracking and monitoring.
2. Installation and setup: Once we have created our account, Sentry will guide us through the installation process. The code needed for integration will be auto-generated by Sentry, so we just need to copy and paste it into our application. Similar to setting up the react-error-boundary component, it is important to initialize Sentry as soon as possible to handle any caught errors effectively.

3. Demonstrating Sentry’s capabilities: To showcase the power of Sentry, we can add a button with an undefined callback function. This will intentionally trigger an error that Sentry will automatically detect and track.

4. Error detection and visualization: Sentry will seamlessly pick up errors as they occur, providing us with detailed information about the error, including the stack trace and context. For normal errors, Sentry will display them without crashing the application. These errors will be shown as regular notifications. However, fatal errors that lead to a crash will be highlighted with a red color badge, indicating the severity of the issue. This is a fatal error, lead to crash app with red color badgeThis is a normal error, and don’t trigger app to crash.

5. Performance monitoring: In addition to error tracking, Sentry also offers performance monitoring features. We can monitor our application’s loading time and overall performance when clients use our app. This can help us identify and optimize any bottlenecks or performance issues. We can also watch how our app performance, loading time when client use our app.

6. Error replay and event tracking: Another valuable feature of Sentry is the ability to replay user interactions and track events leading up to an application crash. This can be incredibly helpful in identifying the specific steps or actions that caused the crash, allowing us to debug more efficiently. Or even watch step by step replay when user accidentally cause our app to crash

7. Integration with Fallback Component: Sentry provides an event ID that can be used to trace back errors when needed. We can easily integrate this event ID with a Fallback Component, which can display the event details and assist in error troubleshooting. Get event_id then show it via Fallback Component so we can easily traceback when needed.

8. Flexible plans and pricing: Sentry offers a range of plans to suit our needs. We can choose the plan that best fits our requirements or opt for a pay-as-you-go model to ensure cost efficiency. Sentry offer many plans or pay what we need.

By integrating Application Performance Monitoring & Error Tracking Software into our application, we can significantly enhance our error monitoring and debugging capabilities. It provides us with a comprehensive set of tools to track, analyze, and resolve errors efficiently, leading to a more stable and reliable application.

References

1. react-error-boundary – npm (npmjs.com)
2. Use react-error-boundary to handle errors in React (kentcdodds.com)
3. Component – React
4. Application Performance Monitoring & Error Tracking Software | Sentry

Work With Us Today

TopSquad offers a comprehensive hiring programmer service that caters to the specific needs of businesses. With our expertise in the tech industry and a deep understanding of the skills required for programming roles, we assist companies in sourcing and attracting top-notch programming talent. Our service encompasses everything from crafting compelling job descriptions to conducting rigorous screening processes.

By partnering with TopSquad, businesses can streamline their hiring process and gain access to the best programmers in the industry, ultimately bolstering their teams and driving success.