git.iko.soy/bridge
on master help sign in
Merge pull request #257 from urbit/feat/error-boundary
da154ddFang
package-lock.json+5
compare with master
unifiedsplit
@@ -12080,6 +12080,11 @@
12080 "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
12080 "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
12081 "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw=="
12081 "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw=="
12082 },
12082 },
12083+ "new-github-issue-url": {
12084+ "version": "0.2.1",
12085+ "resolved": "https://registry.npmjs.org/new-github-issue-url/-/new-github-issue-url-0.2.1.tgz",
12086+ "integrity": "sha512-md4cGoxuT4T4d/HDOXbrUHkTKrp/vp+m3aOA7XXVYwNsUNMK49g3SQicTSeV5GIz/5QVGAeYRAOlyp9OvlgsYA=="
12087+ },
12083 "next-tick": {
12088 "next-tick": {
12084 "version": "1.0.0",
12089 "version": "1.0.0",
12085 "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
12090 "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
package.json+1
@@ -38,6 +38,7 @@
38 "keythereum": "^1.0.4",
38 "keythereum": "^1.0.4",
39 "lodash": "^4.17.14",
39 "lodash": "^4.17.14",
40 "more-entropy": "^0.0.7",
40 "more-entropy": "^0.0.7",
41+ "new-github-issue-url": "^0.2.1",
41 "prop-types": "^15.6.2",
42 "prop-types": "^15.6.2",
42 "react": "^16.8.6",
43 "react": "^16.8.6",
43 "react-dom": "^16.8.6",
44 "react-dom": "^16.8.6",
src/Bridge.js+17−13
@@ -18,6 +18,8 @@ import useImpliedTicket from 'lib/useImpliedTicket';
18import useHasDisclaimed from 'lib/useHasDisclaimed';
18import useHasDisclaimed from 'lib/useHasDisclaimed';
19
19
20import 'style/index.scss';
20import 'style/index.scss';
21+import WithErrorBoundary from 'components/WithErrorBoundary';
22+import GlobalErrorBoundary from 'components/GlobalErrorBoundary';
21
23
22const INITIAL_NETWORK_TYPE = isDevelopment
24const INITIAL_NETWORK_TYPE = isDevelopment
23 ? NETWORK_TYPES.LOCAL
25 ? NETWORK_TYPES.LOCAL
@@ -65,19 +67,21 @@ function Bridge() {
65 const initialRoutes = useInitialRoutes();
67 const initialRoutes = useInitialRoutes();
66
68
67 return (
69 return (
68− <Provider
70+ <WithErrorBoundary render={error => <GlobalErrorBoundary error={error} />}>
71+ <Provider
69− views={ROUTES}
72+ views={ROUTES}
70− names={ROUTE_NAMES}
73+ names={ROUTE_NAMES}
71− initialRoutes={initialRoutes}
74+ initialRoutes={initialRoutes}
72− initialNetworkType={INITIAL_NETWORK_TYPE}
75+ initialNetworkType={INITIAL_NETWORK_TYPE}
73− initialWallet={INITIAL_WALLET}
76+ initialWallet={INITIAL_WALLET}
74− initialMnemonic={INITIAL_MNEMONIC}
77+ initialMnemonic={INITIAL_MNEMONIC}
75− initialPointCursor={INITIAL_POINT_CURSOR}>
78+ initialPointCursor={INITIAL_POINT_CURSOR}>
76− <Header />
79+ <Header />
77− <IndigoApp>
80+ <IndigoApp>
78− <Router />
81+ <Router />
79− </IndigoApp>
82+ </IndigoApp>
80− </Provider>
83+ </Provider>
84+ </WithErrorBoundary>
81 );
85 );
82}
86}
83
87
src/components/GlobalErrorBoundary.jsnew file+72
@@ -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+}
src/components/WithErrorBoundary.jsnew file+20
@@ -0,0 +1,20 @@
1+import React from 'react';
2+
3+export default class WithErrorBoundary extends React.Component {
4+ static getDerivedStateFromError(error) {
5+ return { error };
6+ }
7+ constructor(props) {
8+ super(props);
9+
10+ this.state = { error: null };
11+ }
12+
13+ render() {
14+ if (this.state.error) {
15+ return this.props.render(this.state.error);
16+ }
17+
18+ return this.props.children;
19+ }
20+}