Skip to content

ErrorBoundary Component

Description

The ErrorBoundary component is a React class component that catches JavaScript errors anywhere in its child component tree. It prevents the entire application from crashing by displaying a fallback UI and logging the error using Sentry.

Features:

  • Catches errors in the component tree and prevents the app from breaking.
  • Uses Sentry for error reporting when Sentry is available.
  • Provides a customizable fallback UI.
  • Supports React class component lifecycle methods for error handling.

Props

Prop Type Default Description
children ReactNode - Components wrapped inside the boundary.
fallback ReactNode - Optional fallback UI when an error occurs.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { ErrorBoundary } from "@nomana-it/liberty-core"
import { MyComponent } from "./MyComponent";

export const MyApp = () => {
  return (
    <ErrorBoundary fallback={<div>Something went wrong.</div>}>
      <MyComponent />
    </ErrorBoundary>
  );
};

Implementation

The ErrorBoundary component utilizes React lifecycle methods to catch and handle errors. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { Component, ErrorInfo, ReactNode } from "react";
import { Div } from "@ly_styles/Div";
import * as Sentry from "@sentry/react";

interface ErrorBoundaryProps {
  children: ReactNode;
  fallback?: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
}

export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(_: Error): ErrorBoundaryState {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Error caught by ErrorBoundary:", error, errorInfo);
    if (Sentry.getClient()) {
      Sentry.captureException(error);
    }
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <Div>An unexpected error has occurred.</Div>;
    }
    return this.props.children;
  }
}

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core