-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
ErrorBoundary.tsx
75 lines (66 loc) · 2.36 KB
/
ErrorBoundary.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React, { Component, ErrorInfo, ReactNode } from "react"
import { ErrorDetails } from "./ErrorDetails"
interface Props {
children: ReactNode
catchErrors: "always" | "dev" | "prod" | "never"
}
interface State {
error: Error | null
errorInfo: ErrorInfo | null
}
/**
* This component handles whenever the user encounters a JS error in the
* app. It follows the "error boundary" pattern in React. We're using a
* class component because according to the documentation, only class
* components can be error boundaries.
* @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/concept/Error-Boundary/}
* @see [React Error Boundaries]{@link https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary}
* @param {Props} props - The props for the `ErrorBoundary` component.
* @returns {JSX.Element} The rendered `ErrorBoundary` component.
*/
export class ErrorBoundary extends Component<Props, State> {
state = { error: null, errorInfo: null }
// If an error in a child is encountered, this will run
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
// Only set errors if enabled
if (!this.isEnabled()) {
return
}
// Catch errors in any components below and re-render with error message
this.setState({
error,
errorInfo,
})
// You can also log error messages to an error reporting service here
// This is a great place to put BugSnag, Sentry, crashlytics, etc:
// reportCrash(error)
}
// Reset the error back to null
resetError = () => {
this.setState({ error: null, errorInfo: null })
}
// To avoid unnecessary re-renders
shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>): boolean {
return nextState.error !== this.state.error
}
// Only enable if we're catching errors in the right environment
isEnabled(): boolean {
return (
this.props.catchErrors === "always" ||
(this.props.catchErrors === "dev" && __DEV__) ||
(this.props.catchErrors === "prod" && !__DEV__)
)
}
// Render an error UI if there's an error; otherwise, render children
render() {
return this.isEnabled() && this.state.error ? (
<ErrorDetails
onReset={this.resetError}
error={this.state.error}
errorInfo={this.state.errorInfo}
/>
) : (
this.props.children
)
}
}