Merge pull request klembot#1132 from klembot/improve-global-error-bou…

…ndary

Improve global error boundary

src/components/global-error-boundary/__tests__/global-error-boundary.test.tsx

@@ -21,7 +21,7 @@ describe('<GlobalErrorBoundary>', () => {
 			</GlobalErrorBoundary>
 		);
 		expect(
-			screen.getByText('An error occurred', {exact: false})
+			screen.getByText('An unrecoverable error has occurred', {exact: false})
 		).toBeInTheDocument();
 	});
 });

src/components/global-error-boundary/global-error-boundary.css

@@ -0,0 +1,28 @@
+.global-error-boundary {
+	align-items: center;
+	justify-content: center;
+	display: grid;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: black;
+	color: white;
+}
+
+.global-error-boundary .fuuu {
+	font-size: 200%;
+	margin-bottom: 0;
+}
+
+.global-error-boundary a {
+	color: blue;
+}
+
+.global-error-boundary pre {
+	border: 1px solid white;
+	max-height: 20em;
+	overflow: scroll;
+	padding: 10px;
+}

src/components/global-error-boundary/global-error-boundary.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-// TODO make this user-friendly
+import './global-error-boundary.css';
 
 export interface GlobalErrorBoundaryState {
 	error: Error | null;
@@ -22,8 +21,33 @@ export class GlobalErrorBoundary extends React.Component<
 	}
 
 	public render() {
+		// Non-localized because our localization might be broken.
+
 		if (this.state.error) {
-			return <p>An error occurred: {this.state.error.message}</p>;
+			return (
+				<div className="global-error-boundary">
+					<div>
+						<p className="fuuu" aria-hidden>
+							💔
+						</p>
+						<p>An unrecoverable error has occurred.</p>
+						<p>Please try restarting Twine or reloading the page.</p>
+						<p>
+							If you see this message repeatedly, please{' '}
+							<a
+								href="https://twinery.org/2bugs"
+								rel="noreferrer"
+								target="_blank"
+							>
+								report a bug
+							</a>
+							.
+						</p>
+						<p>Details:</p>
+						<pre>{this.state.error.stack}</pre>
+					</div>
+				</div>
+			);
 		}
 
 		return this.props.children;