A React error boundary component for React and Next.js
npm install @heritsilavo/react-error-boundary
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}}
);
}
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 ;
}
`
$3
`tsx
import { useError } from '@heritsilavo/react-error-boundary';
function StatusIndicator() {
const { error, clearError } = useError();
if (!error) return null;
return (
Error: {error.message}
);
}
`
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
``