Skip to content

Commit 11f4147

Browse files
AkshayPanchivalaAkshayPanchivala
committed
chore: prepare initial release of react-smart-error-boundary v1.0.0
0 parents  commit 11f4147

7 files changed

Lines changed: 360 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎README.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# 🛡️ React Smart Error Boundary
2+
3+
A lightweight and customizable error boundary component for React applications.
4+
Gracefully catch and display runtime errors in your UI — with zero configuration and full flexibility.
5+
6+
---
7+
8+
## 🚀 Installation
9+
10+
Install using npm or yarn:
11+
12+
```bash
13+
npm install react-smart-error-boundary
14+
# or
15+
yarn add react-smart-error-boundary
16+
````
17+
18+
---
19+
20+
## ⚡ Usage
21+
22+
```tsx
23+
import { ErrorBoundary } from 'react-smart-error-boundary';
24+
25+
function App() {
26+
return (
27+
<ErrorBoundary
28+
fallback={(error, info) => (
29+
<div style={{ padding: '1rem', background: '#ffe5e5', color: '#a00' }}>
30+
<h2>🚨 Error: {error.message}</h2>
31+
<details>
32+
<summary>Stack Trace</summary>
33+
<pre>{info.componentStack}</pre>
34+
</details>
35+
</div>
36+
)}
37+
>
38+
<YourComponent />
39+
</ErrorBoundary>
40+
);
41+
}
42+
```
43+
44+
---
45+
46+
## 🧩 Props
47+
48+
| Prop | Type | Description |
49+
| ---------- | ------------------------------------------------------------------- | -------------------------------------------- |
50+
| `children` | `ReactNode` | Child components that should be protected. |
51+
| `fallback` | `ReactNode` or `(error: Error, info: React.ErrorInfo) => ReactNode` | Custom UI to render when an error occurs. |
52+
| `onError` | `(error: Error, info: React.ErrorInfo) => void` | Callback for logging or reporting the error. |
53+
54+
---
55+
56+
## ✨ Features
57+
58+
* ⚙️ Works with React 17 & 18
59+
* 🎨 Fully customizable fallback UI
60+
* 🧠 Supports both static and dynamic fallback rendering
61+
* 💡 Written in TypeScript
62+
* 💼 Perfect for production-ready React apps
63+
64+
---
65+
66+
## 📦 NPM
67+
68+
[![NPM](https://img.shields.io/npm/v/react-smart-error-boundary.svg)](https://www.npmjs.com/package/react-smart-error-boundary)
69+
70+
---
71+
72+
## 📄 License
73+
74+
MIT © [Akshay Panchivala](https://github.com/AkshayPanchivala)
75+
76+
---
77+
78+
## 🛠️ Issues & Contributions
79+
80+
Feel free to [open an issue](https://github.com/AkshayPanchivala/react-smart-error-boundary/issues) or submit a PR.
81+
82+
---
83+
84+
Made with ❤️ by [Akshay Panchivala](https://github.com/AkshayPanchivala)
85+
86+
```

‎index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ErrorBoundary } from './src/ErrorBoundary';

‎package-lock.json‎

Lines changed: 120 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "react-smart-error-boundary",
3+
"version": "1.0.0",
4+
"description": "A lightweight and customizable error boundary component for modern React apps.",
5+
"main": "dist/index.js",
6+
"module": "dist/index.esm.js",
7+
"types": "dist/index.d.ts",
8+
"scripts": {
9+
"build": "tsc"
10+
},
11+
"author": "Akshay Panchivala",
12+
"license": "MIT",
13+
"repository": {
14+
"type": "git",
15+
"url": "https://github.com/AkshayPanchivala/react-smart-error-boundary"
16+
},
17+
"homepage": "https://github.com/AkshayPanchivala/react-smart-error-boundary#readme",
18+
"bugs": {
19+
"url": "https://github.com/AkshayPanchivala/react-smart-error-boundary/issues"
20+
},
21+
"keywords": [
22+
"react",
23+
"error-boundary",
24+
"react-error-boundary",
25+
"error handling",
26+
"react component",
27+
"fallback ui",
28+
"error recovery",
29+
"react error catcher",
30+
"smart error boundary",
31+
"react tools",
32+
"typescript"
33+
],
34+
"peerDependencies": {
35+
"react": "^17.0.0 || ^18.0.0",
36+
"react-dom": "^17.0.0 || ^18.0.0"
37+
},
38+
"devDependencies": {
39+
"@types/react": "^19.1.8",
40+
"@types/react-dom": "^19.1.6",
41+
"typescript": "^5.0.0"
42+
},
43+
"engines": {
44+
"node": ">=14",
45+
"npm": ">=6"
46+
},
47+
"files": [
48+
"dist"
49+
]
50+
}

‎src/ErrorBoundary.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React, { Component, ReactNode } from 'react';
2+
3+
interface ErrorBoundaryProps {
4+
children: ReactNode;
5+
fallback?: ReactNode | ((error: Error, info: React.ErrorInfo) => ReactNode);
6+
onError?: (error: Error, info: React.ErrorInfo) => void;
7+
}
8+
9+
interface ErrorBoundaryState {
10+
hasError: boolean;
11+
error: Error | null;
12+
errorInfo: React.ErrorInfo | null;
13+
}
14+
15+
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
16+
constructor(props: ErrorBoundaryProps) {
17+
super(props);
18+
this.state = {
19+
hasError: false,
20+
error: null,
21+
errorInfo: null
22+
};
23+
}
24+
25+
static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
26+
return { hasError: true, error };
27+
}
28+
29+
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
30+
this.setState({ errorInfo });
31+
32+
if (this.props.onError) {
33+
this.props.onError(error, errorInfo);
34+
}
35+
}
36+
37+
render() {
38+
const { fallback, children } = this.props;
39+
const { hasError, error, errorInfo } = this.state;
40+
41+
if (hasError && error && errorInfo) {
42+
if (typeof fallback === 'function') {
43+
return fallback(error, errorInfo);
44+
}
45+
46+
// Default fallback with styled error info
47+
return (
48+
<div
49+
style={{
50+
padding: '2rem',
51+
border: '1px solid #ff4d4f',
52+
borderRadius: '8px',
53+
backgroundColor: '#fff1f0',
54+
color: '#a8071a',
55+
fontFamily: 'sans-serif',
56+
maxWidth: '600px',
57+
margin: '2rem auto'
58+
}}
59+
>
60+
<h2 style={{ marginBottom: '1rem' }}>🚨 Something went wrong.</h2>
61+
<p>
62+
<strong>Error:</strong> {error.message}
63+
</p>
64+
<details style={{ marginTop: '1rem', whiteSpace: 'pre-wrap' }}>
65+
<summary>Stack Trace</summary>
66+
{errorInfo.componentStack}
67+
</details>
68+
<button
69+
onClick={() => window.location.reload()}
70+
style={{
71+
marginTop: '1.5rem',
72+
padding: '0.5rem 1rem',
73+
backgroundColor: '#ff4d4f',
74+
color: 'white',
75+
border: 'none',
76+
borderRadius: '4px',
77+
cursor: 'pointer'
78+
}}
79+
>
80+
🔄 Try Again
81+
</button>
82+
</div>
83+
);
84+
}
85+
86+
return children;
87+
}
88+
}

‎tsconfig.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES6",
4+
"module": "ESNext",
5+
"declaration": true,
6+
"outDir": "dist",
7+
"jsx": "react-jsx",
8+
"strict": true,
9+
"esModuleInterop": true,
10+
"moduleResolution": "node",
11+
"skipLibCheck": true
12+
},
13+
"include": ["src", "index.ts"]
14+
}

0 commit comments

Comments
 (0)