@shubhamchavhan/react-smart-error-boundary 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,16 +1,86 @@
|
|
|
1
1
|
# React Smart Error Boundary
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
A production-ready React Error Boundary library with modern fallback UI, built-in recovery actions, and TypeScript support.
|
|
5
|
+
|
|
6
|
+
It helps you gracefully handle runtime crashes in React apps using a simple wrapper with customizable fallback UI, reload, and navigation controls.
|
|
4
7
|
|
|
5
8
|
## Features
|
|
6
9
|
|
|
7
|
-
- Error
|
|
8
|
-
-
|
|
9
|
-
- Reload
|
|
10
|
-
-
|
|
11
|
-
-
|
|
10
|
+
- ⚛️ Built using React Error Boundaries (class-based internally)
|
|
11
|
+
- 🎨 Fully customizable fallback UI
|
|
12
|
+
- 🔄 Reload page support
|
|
13
|
+
- 🏠 Go to home navigation support
|
|
14
|
+
- ♻️ Reset error state without refresh
|
|
15
|
+
- 📦 Lightweight & production-ready
|
|
16
|
+
- 💪 TypeScript support
|
|
12
17
|
|
|
13
18
|
## Install
|
|
14
19
|
|
|
15
20
|
```bash
|
|
16
|
-
npm i @shubhamchavhan/react-smart-error-boundary
|
|
21
|
+
npm i @shubhamchavhan/react-smart-error-boundary
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
Basic Usage
|
|
25
|
+
|
|
26
|
+
Wrap your app with Error Boundary:
|
|
27
|
+
|
|
28
|
+
import React from "react";
|
|
29
|
+
import ReactDOM from "react-dom/client";
|
|
30
|
+
import { ErrorBoundary } from "@shubhamchavhan/react-smart-error-boundary";
|
|
31
|
+
import App from "./App";
|
|
32
|
+
|
|
33
|
+
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
34
|
+
<React.StrictMode>
|
|
35
|
+
<ErrorBoundary>
|
|
36
|
+
<App />
|
|
37
|
+
</ErrorBoundary>
|
|
38
|
+
</React.StrictMode>
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
Custom Fallback UI
|
|
43
|
+
|
|
44
|
+
You can fully customize the error screen:
|
|
45
|
+
|
|
46
|
+
function Fallback({ error, resetError }: any) {
|
|
47
|
+
return (
|
|
48
|
+
<div style={{ padding: 20 }}>
|
|
49
|
+
<h2>⚠️ Something went wrong</h2>
|
|
50
|
+
|
|
51
|
+
<p style={{ color: "red" }}>{error.message}</p>
|
|
52
|
+
|
|
53
|
+
<button onClick={resetError}>🔄 Try Again</button>
|
|
54
|
+
|
|
55
|
+
<button onClick={() => window.location.reload()}>
|
|
56
|
+
🔃 Reload Page
|
|
57
|
+
</button>
|
|
58
|
+
|
|
59
|
+
<button onClick={() => (window.location.href = "/")}>
|
|
60
|
+
🏠 Go Home
|
|
61
|
+
</button>
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
Usage:
|
|
67
|
+
import { ErrorBoundary } from "@shubhamchavhan/react-smart-error-boundary";
|
|
68
|
+
|
|
69
|
+
<ErrorBoundary fallback={Fallback}>
|
|
70
|
+
<App />
|
|
71
|
+
</ErrorBoundary>;
|
|
72
|
+
|
|
73
|
+
Advanced Usage (Error Logging)
|
|
74
|
+
|
|
75
|
+
You can capture errors for monitoring tools:
|
|
76
|
+
|
|
77
|
+
<ErrorBoundary
|
|
78
|
+
onError={(error, info) => {
|
|
79
|
+
console.log("Error:", error);
|
|
80
|
+
console.log("Component Stack:", info.componentStack);
|
|
81
|
+
|
|
82
|
+
// Example: Send to Sentry or LogRocket
|
|
83
|
+
}}
|
|
84
|
+
>
|
|
85
|
+
<App />
|
|
86
|
+
</ErrorBoundary>
|
package/package.json
CHANGED