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