|
| 1 | +import React from "react"; |
| 2 | +import { useRouteError } from "../hooks"; |
| 3 | +import type { Location } from "../router/history"; |
| 4 | +import { isRouteErrorResponse } from "../router/utils"; |
| 5 | +import { ENABLE_DEV_WARNINGS } from "../context"; |
| 6 | + |
| 7 | +type RSCRouterGlobalErrorBoundaryProps = React.PropsWithChildren<{ |
| 8 | + location: Location; |
| 9 | +}>; |
| 10 | + |
| 11 | +type RSCRouterGlobalErrorBoundaryState = { |
| 12 | + error: null | Error; |
| 13 | + location: Location; |
| 14 | +}; |
| 15 | + |
| 16 | +export class RSCRouterGlobalErrorBoundary extends React.Component< |
| 17 | + RSCRouterGlobalErrorBoundaryProps, |
| 18 | + RSCRouterGlobalErrorBoundaryState |
| 19 | +> { |
| 20 | + constructor(props: RSCRouterGlobalErrorBoundaryProps) { |
| 21 | + super(props); |
| 22 | + this.state = { error: null, location: props.location }; |
| 23 | + } |
| 24 | + |
| 25 | + static getDerivedStateFromError(error: Error) { |
| 26 | + return { error }; |
| 27 | + } |
| 28 | + |
| 29 | + static getDerivedStateFromProps( |
| 30 | + props: RSCRouterGlobalErrorBoundaryProps, |
| 31 | + state: RSCRouterGlobalErrorBoundaryState |
| 32 | + ) { |
| 33 | + // When we get into an error state, the user will likely click "back" to the |
| 34 | + // previous page that didn't have an error. Because this wraps the entire |
| 35 | + // application (even the HTML!) that will have no effect--the error page |
| 36 | + // continues to display. This gives us a mechanism to recover from the error |
| 37 | + // when the location changes. |
| 38 | + // |
| 39 | + // Whether we're in an error state or not, we update the location in state |
| 40 | + // so that when we are in an error state, it gets reset when a new location |
| 41 | + // comes in and the user recovers from the error. |
| 42 | + if (state.location !== props.location) { |
| 43 | + return { error: null, location: props.location }; |
| 44 | + } |
| 45 | + |
| 46 | + // If we're not changing locations, preserve the location but still surface |
| 47 | + // any new errors that may come through. We retain the existing error, we do |
| 48 | + // this because the error provided from the app state may be cleared without |
| 49 | + // the location changing. |
| 50 | + return { error: state.error, location: state.location }; |
| 51 | + } |
| 52 | + |
| 53 | + render() { |
| 54 | + if (this.state.error) { |
| 55 | + return ( |
| 56 | + <RSCDefaultRootErrorBoundaryImpl |
| 57 | + error={this.state.error} |
| 58 | + renderAppShell={true} |
| 59 | + /> |
| 60 | + ); |
| 61 | + } else { |
| 62 | + return this.props.children; |
| 63 | + } |
| 64 | + } |
| 65 | +} |
| 66 | + |
| 67 | +function ErrorWrapper({ |
| 68 | + renderAppShell, |
| 69 | + title, |
| 70 | + children, |
| 71 | +}: { |
| 72 | + renderAppShell: boolean; |
| 73 | + title: string; |
| 74 | + children: React.ReactNode; |
| 75 | +}) { |
| 76 | + if (!renderAppShell) { |
| 77 | + return children; |
| 78 | + } |
| 79 | + |
| 80 | + return ( |
| 81 | + <html lang="en"> |
| 82 | + <head> |
| 83 | + <meta charSet="utf-8" /> |
| 84 | + <meta |
| 85 | + name="viewport" |
| 86 | + content="width=device-width,initial-scale=1,viewport-fit=cover" |
| 87 | + /> |
| 88 | + <title>{title}</title> |
| 89 | + </head> |
| 90 | + <body> |
| 91 | + <main style={{ fontFamily: "system-ui, sans-serif", padding: "2rem" }}> |
| 92 | + {children} |
| 93 | + </main> |
| 94 | + </body> |
| 95 | + </html> |
| 96 | + ); |
| 97 | +} |
| 98 | + |
| 99 | +function RSCDefaultRootErrorBoundaryImpl({ |
| 100 | + error, |
| 101 | + renderAppShell, |
| 102 | +}: { |
| 103 | + error: unknown; |
| 104 | + renderAppShell: boolean; |
| 105 | +}) { |
| 106 | + console.error(error); |
| 107 | + |
| 108 | + let heyDeveloper = ( |
| 109 | + <script |
| 110 | + dangerouslySetInnerHTML={{ |
| 111 | + __html: ` |
| 112 | + console.log( |
| 113 | + "💿 Hey developer 👋. You can provide a way better UX than this when your app throws errors. Check out https://reactrouter.com/how-to/error-boundary for more information." |
| 114 | + ); |
| 115 | + `, |
| 116 | + }} |
| 117 | + /> |
| 118 | + ); |
| 119 | + |
| 120 | + if (isRouteErrorResponse(error)) { |
| 121 | + return ( |
| 122 | + <ErrorWrapper |
| 123 | + renderAppShell={renderAppShell} |
| 124 | + title="Unhandled Thrown Response!" |
| 125 | + > |
| 126 | + <h1 style={{ fontSize: "24px" }}> |
| 127 | + {error.status} {error.statusText} |
| 128 | + </h1> |
| 129 | + {ENABLE_DEV_WARNINGS ? heyDeveloper : null} |
| 130 | + </ErrorWrapper> |
| 131 | + ); |
| 132 | + } |
| 133 | + |
| 134 | + let errorInstance: Error; |
| 135 | + if (error instanceof Error) { |
| 136 | + errorInstance = error; |
| 137 | + } else { |
| 138 | + let errorString = |
| 139 | + error == null |
| 140 | + ? "Unknown Error" |
| 141 | + : typeof error === "object" && "toString" in error |
| 142 | + ? error.toString() |
| 143 | + : JSON.stringify(error); |
| 144 | + errorInstance = new Error(errorString); |
| 145 | + } |
| 146 | + |
| 147 | + return ( |
| 148 | + <ErrorWrapper renderAppShell={renderAppShell} title="Application Error!"> |
| 149 | + <h1 style={{ fontSize: "24px" }}>Application Error</h1> |
| 150 | + <pre |
| 151 | + style={{ |
| 152 | + padding: "2rem", |
| 153 | + background: "hsla(10, 50%, 50%, 0.1)", |
| 154 | + color: "red", |
| 155 | + overflow: "auto", |
| 156 | + }} |
| 157 | + > |
| 158 | + {errorInstance.stack} |
| 159 | + </pre> |
| 160 | + {heyDeveloper} |
| 161 | + </ErrorWrapper> |
| 162 | + ); |
| 163 | +} |
| 164 | + |
| 165 | +export function RSCDefaultRootErrorBoundary({ |
| 166 | + hasRootLayout, |
| 167 | +}: { |
| 168 | + hasRootLayout: boolean; |
| 169 | +}) { |
| 170 | + let error = useRouteError(); |
| 171 | + |
| 172 | + if (hasRootLayout === undefined) { |
| 173 | + throw new Error("Missing 'hasRootLayout' prop"); |
| 174 | + } |
| 175 | + return ( |
| 176 | + <RSCDefaultRootErrorBoundaryImpl |
| 177 | + renderAppShell={!hasRootLayout} |
| 178 | + error={error} |
| 179 | + /> |
| 180 | + ); |
| 181 | +} |
0 commit comments