React Smart Error Boundary

A production-ready React Error Boundary library with modern fallback UI, built-in recovery actions, and TypeScript support.

It helps you gracefully handle runtime crashes in React apps using a simple wrapper with customizable fallback UI, reload, and navigation controls.

Features

• ⚛️ Built using React Error Boundaries (class-based internally)
• 🎨 Fully customizable fallback UI
• 🔄 Reload page support
• 🏠 Go to home navigation support
• ♻️ Reset error state without refresh
• 📦 Lightweight & production-ready
• 💪 TypeScript support

Install

npm i @shubhamchavhan/react-smart-error-boundary


Basic Usage

Wrap your app with Error Boundary:

import React from "react";
import ReactDOM from "react-dom/client";
import { ErrorBoundary } from "@shubhamchavhan/react-smart-error-boundary";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </React.StrictMode>
);

 
Custom Fallback UI

You can fully customize the error screen:

function Fallback({ error, resetError }: any) {
  return (
    <div style={{ padding: 20 }}>
      <h2>⚠️ Something went wrong</h2>

      <p style={{ color: "red" }}>{error.message}</p>

      <button onClick={resetError}>🔄 Try Again</button>

      <button onClick={() => window.location.reload()}>
        🔃 Reload Page
      </button>

      <button onClick={() => (window.location.href = "/")}>
        🏠 Go Home
      </button>
    </div>
  );
}

Usage:
import { ErrorBoundary } from "@shubhamchavhan/react-smart-error-boundary";

<ErrorBoundary fallback={Fallback}>
  <App />
</ErrorBoundary>;

Advanced Usage (Error Logging)

You can capture errors for monitoring tools:

<ErrorBoundary
  onError={(error, info) => {
    console.log("Error:", error);
    console.log("Component Stack:", info.componentStack);

    // Example: Send to Sentry or LogRocket
  }}
>
  <App />
</ErrorBoundary>