git.iko.soy/bridge
on 2c54a13 help sign in
bridge/src/components/GlobalErrorBoundary.js
72 lines 2.2 kB history raw
1import React, { useMemo } from 'react';
2import newGithubIssueUrl from 'new-github-issue-url';
3import { OutButton, RestartButton } from './Buttons';
5const buildTitle = error => `Error Report: ${error.message}`;
7const 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`;
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 */
28export 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 );
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 );