react-error-boundary 4.0.10 → 4.0.11
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 +3 -0
- package/dist/declarations/src/ErrorBoundary.d.ts +2 -2
- package/dist/declarations/src/types.d.ts +4 -6
- package/dist/react-error-boundary.cjs.js +1 -1
- package/dist/react-error-boundary.development.cjs.js +162 -0
- package/dist/react-error-boundary.development.cjs.mjs +6 -0
- package/dist/react-error-boundary.development.esm.js +155 -0
- package/dist/react-error-boundary.esm.js +1 -1
- package/package.json +15 -3
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Component, ErrorInfo
|
|
1
|
+
import { Component, ErrorInfo } from "react";
|
|
2
2
|
import { ErrorBoundaryProps } from "./types.js";
|
|
3
3
|
type ErrorBoundaryState = {
|
|
4
4
|
didCatch: boolean;
|
|
5
5
|
error: any;
|
|
6
6
|
};
|
|
7
|
-
export declare class ErrorBoundary extends Component<
|
|
7
|
+
export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
8
8
|
constructor(props: ErrorBoundaryProps);
|
|
9
9
|
static getDerivedStateFromError(error: Error): {
|
|
10
10
|
didCatch: boolean;
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
import { Component, ComponentType, FunctionComponent, ReactElement, ReactNode } from "react";
|
|
1
|
+
import { Component, ComponentType, ErrorInfo, FunctionComponent, PropsWithChildren, ReactElement, ReactNode } from "react";
|
|
2
2
|
declare function FallbackRender(props: FallbackProps): ReactNode;
|
|
3
3
|
export type FallbackProps = {
|
|
4
4
|
error: any;
|
|
5
5
|
resetErrorBoundary: (...args: any[]) => void;
|
|
6
6
|
};
|
|
7
|
-
type ErrorBoundarySharedProps = {
|
|
8
|
-
onError?: (error: Error, info:
|
|
9
|
-
componentStack: string;
|
|
10
|
-
}) => void;
|
|
7
|
+
type ErrorBoundarySharedProps = PropsWithChildren<{
|
|
8
|
+
onError?: (error: Error, info: ErrorInfo) => void;
|
|
11
9
|
onReset?: (details: {
|
|
12
10
|
reason: "imperative-api";
|
|
13
11
|
args: any[];
|
|
@@ -17,7 +15,7 @@ type ErrorBoundarySharedProps = {
|
|
|
17
15
|
next: any[] | undefined;
|
|
18
16
|
}) => void;
|
|
19
17
|
resetKeys?: any[];
|
|
20
|
-
}
|
|
18
|
+
}>;
|
|
21
19
|
export type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
|
|
22
20
|
fallback?: never;
|
|
23
21
|
FallbackComponent: ComponentType<FallbackProps>;
|
|
@@ -90,7 +90,7 @@ class ErrorBoundary extends react.Component {
|
|
|
90
90
|
} else if (FallbackComponent) {
|
|
91
91
|
childToRender = react.createElement(FallbackComponent, props);
|
|
92
92
|
} else {
|
|
93
|
-
throw
|
|
93
|
+
throw error;
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
return react.createElement(ErrorBoundaryContext.Provider, {
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
|
+
|
|
6
|
+
var react = require('react');
|
|
7
|
+
|
|
8
|
+
const ErrorBoundaryContext = react.createContext(null);
|
|
9
|
+
|
|
10
|
+
const initialState = {
|
|
11
|
+
didCatch: false,
|
|
12
|
+
error: null
|
|
13
|
+
};
|
|
14
|
+
class ErrorBoundary extends react.Component {
|
|
15
|
+
constructor(props) {
|
|
16
|
+
super(props);
|
|
17
|
+
this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
|
|
18
|
+
this.state = initialState;
|
|
19
|
+
}
|
|
20
|
+
static getDerivedStateFromError(error) {
|
|
21
|
+
return {
|
|
22
|
+
didCatch: true,
|
|
23
|
+
error
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
resetErrorBoundary() {
|
|
27
|
+
const {
|
|
28
|
+
error
|
|
29
|
+
} = this.state;
|
|
30
|
+
if (error !== null) {
|
|
31
|
+
var _this$props$onReset, _this$props;
|
|
32
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
33
|
+
args[_key] = arguments[_key];
|
|
34
|
+
}
|
|
35
|
+
(_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
|
|
36
|
+
args,
|
|
37
|
+
reason: "imperative-api"
|
|
38
|
+
});
|
|
39
|
+
this.setState(initialState);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
componentDidCatch(error, info) {
|
|
43
|
+
var _this$props$onError, _this$props2;
|
|
44
|
+
(_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
|
|
45
|
+
}
|
|
46
|
+
componentDidUpdate(prevProps, prevState) {
|
|
47
|
+
const {
|
|
48
|
+
didCatch
|
|
49
|
+
} = this.state;
|
|
50
|
+
const {
|
|
51
|
+
resetKeys
|
|
52
|
+
} = this.props;
|
|
53
|
+
|
|
54
|
+
// There's an edge case where if the thing that triggered the error happens to *also* be in the resetKeys array,
|
|
55
|
+
// we'd end up resetting the error boundary immediately.
|
|
56
|
+
// This would likely trigger a second error to be thrown.
|
|
57
|
+
// So we make sure that we don't check the resetKeys on the first call of cDU after the error is set.
|
|
58
|
+
|
|
59
|
+
if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
|
|
60
|
+
var _this$props$onReset2, _this$props3;
|
|
61
|
+
(_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
|
|
62
|
+
next: resetKeys,
|
|
63
|
+
prev: prevProps.resetKeys,
|
|
64
|
+
reason: "keys"
|
|
65
|
+
});
|
|
66
|
+
this.setState(initialState);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
render() {
|
|
70
|
+
const {
|
|
71
|
+
children,
|
|
72
|
+
fallbackRender,
|
|
73
|
+
FallbackComponent,
|
|
74
|
+
fallback
|
|
75
|
+
} = this.props;
|
|
76
|
+
const {
|
|
77
|
+
didCatch,
|
|
78
|
+
error
|
|
79
|
+
} = this.state;
|
|
80
|
+
let childToRender = children;
|
|
81
|
+
if (didCatch) {
|
|
82
|
+
const props = {
|
|
83
|
+
error,
|
|
84
|
+
resetErrorBoundary: this.resetErrorBoundary
|
|
85
|
+
};
|
|
86
|
+
if (react.isValidElement(fallback)) {
|
|
87
|
+
childToRender = fallback;
|
|
88
|
+
} else if (typeof fallbackRender === "function") {
|
|
89
|
+
childToRender = fallbackRender(props);
|
|
90
|
+
} else if (FallbackComponent) {
|
|
91
|
+
childToRender = react.createElement(FallbackComponent, props);
|
|
92
|
+
} else {
|
|
93
|
+
{
|
|
94
|
+
console.error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
|
|
95
|
+
}
|
|
96
|
+
throw error;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
return react.createElement(ErrorBoundaryContext.Provider, {
|
|
100
|
+
value: {
|
|
101
|
+
didCatch,
|
|
102
|
+
error,
|
|
103
|
+
resetErrorBoundary: this.resetErrorBoundary
|
|
104
|
+
}
|
|
105
|
+
}, childToRender);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
function hasArrayChanged() {
|
|
109
|
+
let a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
110
|
+
let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
111
|
+
return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
function assertErrorBoundaryContext(value) {
|
|
115
|
+
if (value == null || typeof value.didCatch !== "boolean" || typeof value.resetErrorBoundary !== "function") {
|
|
116
|
+
throw new Error("ErrorBoundaryContext not found");
|
|
117
|
+
}
|
|
118
|
+
return true;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
function useErrorBoundary() {
|
|
122
|
+
const context = react.useContext(ErrorBoundaryContext);
|
|
123
|
+
assertErrorBoundaryContext(context);
|
|
124
|
+
const [state, setState] = react.useState({
|
|
125
|
+
error: null,
|
|
126
|
+
hasError: false
|
|
127
|
+
});
|
|
128
|
+
const memoized = react.useMemo(() => ({
|
|
129
|
+
resetBoundary: () => {
|
|
130
|
+
context === null || context === void 0 ? void 0 : context.resetErrorBoundary();
|
|
131
|
+
setState({
|
|
132
|
+
error: null,
|
|
133
|
+
hasError: false
|
|
134
|
+
});
|
|
135
|
+
},
|
|
136
|
+
showBoundary: error => setState({
|
|
137
|
+
error,
|
|
138
|
+
hasError: true
|
|
139
|
+
})
|
|
140
|
+
}), [context === null || context === void 0 ? void 0 : context.resetErrorBoundary]);
|
|
141
|
+
if (state.hasError) {
|
|
142
|
+
throw state.error;
|
|
143
|
+
}
|
|
144
|
+
return memoized;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
function withErrorBoundary(component, errorBoundaryProps) {
|
|
148
|
+
const Wrapped = react.forwardRef((props, ref) => react.createElement(ErrorBoundary, errorBoundaryProps, react.createElement(component, {
|
|
149
|
+
...props,
|
|
150
|
+
ref
|
|
151
|
+
})));
|
|
152
|
+
|
|
153
|
+
// Format for display in DevTools
|
|
154
|
+
const name = component.displayName || component.name || "Unknown";
|
|
155
|
+
Wrapped.displayName = "withErrorBoundary(".concat(name, ")");
|
|
156
|
+
return Wrapped;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
exports.ErrorBoundary = ErrorBoundary;
|
|
160
|
+
exports.ErrorBoundaryContext = ErrorBoundaryContext;
|
|
161
|
+
exports.useErrorBoundary = useErrorBoundary;
|
|
162
|
+
exports.withErrorBoundary = withErrorBoundary;
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { createContext, Component, isValidElement, createElement, useContext, useState, useMemo, forwardRef } from 'react';
|
|
3
|
+
|
|
4
|
+
const ErrorBoundaryContext = createContext(null);
|
|
5
|
+
|
|
6
|
+
const initialState = {
|
|
7
|
+
didCatch: false,
|
|
8
|
+
error: null
|
|
9
|
+
};
|
|
10
|
+
class ErrorBoundary extends Component {
|
|
11
|
+
constructor(props) {
|
|
12
|
+
super(props);
|
|
13
|
+
this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
|
|
14
|
+
this.state = initialState;
|
|
15
|
+
}
|
|
16
|
+
static getDerivedStateFromError(error) {
|
|
17
|
+
return {
|
|
18
|
+
didCatch: true,
|
|
19
|
+
error
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
resetErrorBoundary() {
|
|
23
|
+
const {
|
|
24
|
+
error
|
|
25
|
+
} = this.state;
|
|
26
|
+
if (error !== null) {
|
|
27
|
+
var _this$props$onReset, _this$props;
|
|
28
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
29
|
+
args[_key] = arguments[_key];
|
|
30
|
+
}
|
|
31
|
+
(_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
|
|
32
|
+
args,
|
|
33
|
+
reason: "imperative-api"
|
|
34
|
+
});
|
|
35
|
+
this.setState(initialState);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
componentDidCatch(error, info) {
|
|
39
|
+
var _this$props$onError, _this$props2;
|
|
40
|
+
(_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
|
|
41
|
+
}
|
|
42
|
+
componentDidUpdate(prevProps, prevState) {
|
|
43
|
+
const {
|
|
44
|
+
didCatch
|
|
45
|
+
} = this.state;
|
|
46
|
+
const {
|
|
47
|
+
resetKeys
|
|
48
|
+
} = this.props;
|
|
49
|
+
|
|
50
|
+
// There's an edge case where if the thing that triggered the error happens to *also* be in the resetKeys array,
|
|
51
|
+
// we'd end up resetting the error boundary immediately.
|
|
52
|
+
// This would likely trigger a second error to be thrown.
|
|
53
|
+
// So we make sure that we don't check the resetKeys on the first call of cDU after the error is set.
|
|
54
|
+
|
|
55
|
+
if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
|
|
56
|
+
var _this$props$onReset2, _this$props3;
|
|
57
|
+
(_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
|
|
58
|
+
next: resetKeys,
|
|
59
|
+
prev: prevProps.resetKeys,
|
|
60
|
+
reason: "keys"
|
|
61
|
+
});
|
|
62
|
+
this.setState(initialState);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
render() {
|
|
66
|
+
const {
|
|
67
|
+
children,
|
|
68
|
+
fallbackRender,
|
|
69
|
+
FallbackComponent,
|
|
70
|
+
fallback
|
|
71
|
+
} = this.props;
|
|
72
|
+
const {
|
|
73
|
+
didCatch,
|
|
74
|
+
error
|
|
75
|
+
} = this.state;
|
|
76
|
+
let childToRender = children;
|
|
77
|
+
if (didCatch) {
|
|
78
|
+
const props = {
|
|
79
|
+
error,
|
|
80
|
+
resetErrorBoundary: this.resetErrorBoundary
|
|
81
|
+
};
|
|
82
|
+
if (isValidElement(fallback)) {
|
|
83
|
+
childToRender = fallback;
|
|
84
|
+
} else if (typeof fallbackRender === "function") {
|
|
85
|
+
childToRender = fallbackRender(props);
|
|
86
|
+
} else if (FallbackComponent) {
|
|
87
|
+
childToRender = createElement(FallbackComponent, props);
|
|
88
|
+
} else {
|
|
89
|
+
{
|
|
90
|
+
console.error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
|
|
91
|
+
}
|
|
92
|
+
throw error;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
return createElement(ErrorBoundaryContext.Provider, {
|
|
96
|
+
value: {
|
|
97
|
+
didCatch,
|
|
98
|
+
error,
|
|
99
|
+
resetErrorBoundary: this.resetErrorBoundary
|
|
100
|
+
}
|
|
101
|
+
}, childToRender);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
function hasArrayChanged() {
|
|
105
|
+
let a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
106
|
+
let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
107
|
+
return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
function assertErrorBoundaryContext(value) {
|
|
111
|
+
if (value == null || typeof value.didCatch !== "boolean" || typeof value.resetErrorBoundary !== "function") {
|
|
112
|
+
throw new Error("ErrorBoundaryContext not found");
|
|
113
|
+
}
|
|
114
|
+
return true;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
function useErrorBoundary() {
|
|
118
|
+
const context = useContext(ErrorBoundaryContext);
|
|
119
|
+
assertErrorBoundaryContext(context);
|
|
120
|
+
const [state, setState] = useState({
|
|
121
|
+
error: null,
|
|
122
|
+
hasError: false
|
|
123
|
+
});
|
|
124
|
+
const memoized = useMemo(() => ({
|
|
125
|
+
resetBoundary: () => {
|
|
126
|
+
context === null || context === void 0 ? void 0 : context.resetErrorBoundary();
|
|
127
|
+
setState({
|
|
128
|
+
error: null,
|
|
129
|
+
hasError: false
|
|
130
|
+
});
|
|
131
|
+
},
|
|
132
|
+
showBoundary: error => setState({
|
|
133
|
+
error,
|
|
134
|
+
hasError: true
|
|
135
|
+
})
|
|
136
|
+
}), [context === null || context === void 0 ? void 0 : context.resetErrorBoundary]);
|
|
137
|
+
if (state.hasError) {
|
|
138
|
+
throw state.error;
|
|
139
|
+
}
|
|
140
|
+
return memoized;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
function withErrorBoundary(component, errorBoundaryProps) {
|
|
144
|
+
const Wrapped = forwardRef((props, ref) => createElement(ErrorBoundary, errorBoundaryProps, createElement(component, {
|
|
145
|
+
...props,
|
|
146
|
+
ref
|
|
147
|
+
})));
|
|
148
|
+
|
|
149
|
+
// Format for display in DevTools
|
|
150
|
+
const name = component.displayName || component.name || "Unknown";
|
|
151
|
+
Wrapped.displayName = "withErrorBoundary(".concat(name, ")");
|
|
152
|
+
return Wrapped;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
export { ErrorBoundary, ErrorBoundaryContext, useErrorBoundary, withErrorBoundary };
|
|
@@ -86,7 +86,7 @@ class ErrorBoundary extends Component {
|
|
|
86
86
|
} else if (FallbackComponent) {
|
|
87
87
|
childToRender = createElement(FallbackComponent, props);
|
|
88
88
|
} else {
|
|
89
|
-
throw
|
|
89
|
+
throw error;
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
return createElement(ErrorBoundaryContext.Provider, {
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-error-boundary",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.11",
|
|
4
4
|
"description": "Simple reusable React error boundary component",
|
|
5
5
|
"author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
7
|
+
"packageManager": "pnpm@8.6.10",
|
|
7
8
|
"repository": {
|
|
8
9
|
"type": "git",
|
|
9
10
|
"url": "https://github.com/bvaughn/react-error-boundary"
|
|
@@ -16,12 +17,23 @@
|
|
|
16
17
|
"import": "./dist/react-error-boundary.cjs.mjs",
|
|
17
18
|
"default": "./dist/react-error-boundary.cjs.js"
|
|
18
19
|
},
|
|
20
|
+
"development": {
|
|
21
|
+
"module": "./dist/react-error-boundary.development.esm.js",
|
|
22
|
+
"import": "./dist/react-error-boundary.development.cjs.mjs",
|
|
23
|
+
"default": "./dist/react-error-boundary.development.cjs.js"
|
|
24
|
+
},
|
|
19
25
|
"module": "./dist/react-error-boundary.esm.js",
|
|
20
26
|
"import": "./dist/react-error-boundary.cjs.mjs",
|
|
21
27
|
"default": "./dist/react-error-boundary.cjs.js"
|
|
22
28
|
},
|
|
23
29
|
"./package.json": "./package.json"
|
|
24
30
|
},
|
|
31
|
+
"imports": {
|
|
32
|
+
"#is-development": {
|
|
33
|
+
"development": "./src/env-conditions/development.ts",
|
|
34
|
+
"default": "./src/env-conditions/production.ts"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
25
37
|
"types": "dist/react-error-boundary.cjs.d.ts",
|
|
26
38
|
"files": [
|
|
27
39
|
"dist"
|
|
@@ -45,7 +57,7 @@
|
|
|
45
57
|
"devDependencies": {
|
|
46
58
|
"@babel/preset-env": "^7.22.5",
|
|
47
59
|
"@babel/preset-typescript": "^7.21.5",
|
|
48
|
-
"@preconstruct/cli": "^2.
|
|
60
|
+
"@preconstruct/cli": "^2.8.1",
|
|
49
61
|
"@types/jest": "^26.0.15",
|
|
50
62
|
"@types/react": "^18",
|
|
51
63
|
"@types/react-dom": "^18",
|
|
@@ -55,7 +67,7 @@
|
|
|
55
67
|
"react": "^18",
|
|
56
68
|
"react-dom": "^18",
|
|
57
69
|
"ts-jest": "^29.0.5",
|
|
58
|
-
"typescript": "^
|
|
70
|
+
"typescript": "^5.1.6"
|
|
59
71
|
},
|
|
60
72
|
"peerDependencies": {
|
|
61
73
|
"react": ">=16.13.1"
|