Error Boundary

The ErrorBoundary component is a utility component that catches errors in its child component tree, logs the error, and prevents the entire application from crashing by rendering a fallback UI instead..

Import

import { ErrorBoundary } from 'react-haiku';

Usage

This component would normally throw an error to demonstrate the ErrorBoundary.

import React from 'react';
import { ErrorBoundary } from 'react-haiku';

// Component that will intentionally cause an error
const CrashComponent: React.FC = () => {
  throw new Error('This is a test error inside the ErrorBoundary!');
};

export const ErrorBoundaryDemo: React.FC = () => {
  return (
    <ErrorBoundary fallback={Fallback}>
      <CrashComponent />
    </ErrorBoundary>
  );
};

Fallback

You can access retry, error and errorInfo prop in you Fallback component which you can use to create a dynamic UI.

interface FallbackProps {
  retry: () => void;
  error: Error | null;
  errorInfo: React.ErrorInfo | null;
}

const Fallback: React.FC<FallbackProps> = ({ retry }) => {
  return (
    <div className="demo-container-center">
      <b style={{ marginBottom: '1em' }}>We faced an error</b>
      <button
        className="demo-button"
        onClick={retry}
        style={{ marginBottom: '1em' }}
      >
        Retry
      </button>
    </div>
  );
};

API

The ErrorBoundary accepts the following props:

• fallback - Component to render when an error is occured in child components.

The Fallback receives the following props:

• retry - Function to retry/reload the wrapped component.
• error - error of type Error
• errorInfo - error info of type React.ErrorInfo