@@ -0,0 +1,72 @@
1+import React, { useMemo } from 'react';
2+import newGithubIssueUrl from 'new-github-issue-url';
3+import { OutButton, RestartButton } from './Buttons';
4+
5+const buildTitle = error => `Error Report: ${error.message}`;
6+
7+const buildBody = error => `\n
8+<!-- Thanks for submitting this error! Can you help us identify the issue by providing additional context? -->
9+\n
10+## Context
11+\n
12+<!-- 1) What were you doing when you encountered this error? -->
13+\n
14+<!-- 2) Only if relevant (don't self-dox!), what point were you interacting with? -->
15+\n
16+## Error\n\n
17+\`\`\`
18+${error.stack}
19+\`\`\`
20+\n
21+`;
22+
23+/**
24+ * NOTE: we want to use as few normal components here as possible, since the
25+ * error might have originated from within those components, making this
26+ * whole error boundary useless.
27+ */
28+export default function GlobalErrorBoundary({ error }) {
29+ const url = useMemo(
30+ () =>
31+ newGithubIssueUrl({
32+ user: 'urbit',
33+ repo: 'bridge',
34+ labels: ['bug', 'error handling'],
35+ title: buildTitle(error),
36+ body: buildBody(error),
37+ }),
38+ [error]
39+ );
40+
41+ return (
42+ <div className="mw1 ph4">
43+ <h2 className="mt8">
44+ Bridge Error!{' '}
45+ <span role="img" aria-label="a bridge on fire">
46+ 🌉🔥
47+ </span>
48+ </h2>
49+ <p className="mt4 f5">
50+ We caught an error thrown by the Bridge application client-side code.
51+ <br />
52+ <b>Your points and assets are most likely safe.</b>
53+ </p>
54+ <p className="mt4">
55+ If you'd like to help us make Bridge better, you can submit the error
56+ and your description of events to our GitHub issue tracker.
57+ </p>
58+ <OutButton href={url} solid>
59+ Submit the Issue on GitHub
60+ </OutButton>
61+ <pre className="bg-gray1 mt4 p4 mono scroll-x">{error.stack}</pre>
62+ <p className="mt4">
63+ You can reload Bridge and retry the operation that caused an error. If
64+ the error persists, please submit a bug report and we'll work with you
65+ to resolve it!
66+ </p>
67+ <RestartButton onClick={() => document.location.reload()} solid success>
68+ Reload Bridge
69+ </RestartButton>
70+ </div>
71+ );
72+}