@heritsilavo/react-error-boundary


A robust error boundary component for React and Next.js applications with customizable error handling and display.

Features

- 🛡️ Comprehensive error boundary for React and Next.js
- 🎨 Customizable error display component
- ⏱️ Auto-hide functionality with progress indicator
- 🚦 Error context for centralized error management
- 📦 Supports both CommonJS and ES Modules
- 🏷️ Fully typed with TypeScript
- ⚛️ React 18+ compatible
- ⏭️ Next.js 13+ support

Installation

``bash
npm install @heritsilavo/react-error-boundary

or

yarn add @heritsilavo/react-error-boundary

or

pnpm add @heritsilavo/react-error-boundary
`

Peer Dependencies

This package requires:
- React 18+
- React DOM 18+
- For Next.js usage: Next.js 13+

Basic Usage

$3

`tsx
import { ErrorProvider } from '@heritsilavo/react-error-boundary';

function App() {
return (



);
}
`

$3

`tsx
import { ErrorProvider } from '@heritsilavo/react-error-boundary/next';

function App({ Component, pageProps }) {
return (



);
}
`

Advanced Usage

$3

`tsx
import { ErrorProvider } from '@heritsilavo/react-error-boundary';
import type { ErrorComponentType } from '@heritsilavo/react-error-boundary';

function CustomError({ error, onClose }: ErrorComponentType) {
return (

Error: {error.code}

{error.message}

{error.description && {error.description}}
Close

);
}

function App() {
return (
ErrorComponent={CustomError}
autoHideDelay={10000}
>


);
}
`

$3

`tsx
import { useThrowError } from '@heritsilavo/react-error-boundary';

function MyComponent() {
const throwError = useThrowError();

const handleClick = () => {
try {
// Your code that might fail
} catch (err) {
throwError(
'API_ERROR',
'Failed to fetch data',
err.message
);
}
};

return Fetch Data;
}
`

$3

`tsx
import { useError } from '@heritsilavo/react-error-boundary';

function StatusIndicator() {
const { error, clearError } = useError();

if (!error) return null;

return (

Error: {error.message}
Dismiss

);
}
`

API Reference

$3

#### ErrorProvider

The root provider component that sets up the error boundary and context.

Props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | ReactNode | required | Your application components |
| ErrorComponent | ComponentType | DefaultErrorComponent | Custom error display component |
| autoHideDelay | number | 5000 | Time in ms before auto-hiding (0 to disable) |
| onError | () => void | () => {} | Callback when error occurs |
| closeErrorComponetOnClick | boolean | false | Close error component when clicked |

#### ErrorBoundary

The actual error boundary component (used internally by ErrorProvider but can be used directly if needed).

$3

#### useError()

Returns the error context with:
- error: CustomError | null - Current error object
- handleError: (error: Error) => void - Function to trigger errors
- clearError: () => void - Function to clear current error

#### useThrowError()

Returns a convenience function to throw custom errors:
(code: string, message: string, description: string) => void

$3

#### CustomError

Custom error class with:
- code: string
- message: string
- description: string

#### ErrorComponentType

Type for custom error components with props:
- error: CustomError
- onClose: () => void
- closeOnClick?: boolean
- visiblityTime?: number

Styling

The default error component comes with basic styling that can be overridden with CSS variables:

`css
:root {
--tsila-err-color: #ff4444;
--tsila-err-bg: #fff;
--tsila-err-border: 1px solid #ff4444;
--tsila-err-padding: 1rem;
--tsila-err-border-radius: 4px;
--tsila-err-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
`

Examples

$3

`tsx
import { useThrowError } from '@heritsilavo/react-error-boundary';

function DataFetcher() {
const throwError = useThrowError();
const [data, setData] = useState(null);

const fetchData = async () => {
try {
const response = await fetch('/api/data');
if (!response.ok) {
throwError(
'FETCH_FAILED',
'Failed to load data',
Server returned ${response.status}
);
return;
}
setData(await response.json());
} catch (err) {
throwError(
'NETWORK_ERROR',
'Network request failed',
err.message
);
}
};

// ...
}
`

$3

`tsx
// pages/_app.tsx
import { ErrorProvider } from '@heritsilavo/react-error-boundary/next';
import { CustomErrorPage } from '../components/CustomErrorPage';

export default function App({ Component, pageProps }) {
return (
ErrorComponent={CustomErrorPage}
autoHideDelay={0} // Disable auto-hide
closeErrorComponetOnClick={true}
>


);
}
`

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

ISC © Heritsilavo
``