add a global error handler with a slack hook

This commit is contained in:
Sean Yesmunt 2019-03-07 16:46:15 -05:00
parent c646816f0f
commit 584f923491
17 changed files with 198 additions and 147 deletions

View file

@ -1,5 +1,12 @@
{
"plugins": ["flowtype"],
"plugins": ["flowtype", "import"],
"settings": {
"import/resolver": {
"webpack": {
"config": "webpack.base.config.js"
}
}
},
"extends": [
"airbnb",
"plugin:import/electron",
@ -53,6 +60,8 @@
"react/prefer-stateless-function": 0,
"react/sort-comp": 0,
"jsx-a11y/media-has-caption": 0,
"no-underscore-dangle": 0
"no-underscore-dangle": 0,
"import/extensions": 0,
"react/default-props-match-prop-types": 0
}
}

View file

@ -124,13 +124,13 @@
"eslint": "^4.19.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-import-resolver-webpack": "^0.11.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.10.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.7.0",
"flow-bin": "^0.89.0",
"flow-bin": "^0.94.0",
"flow-typed": "^2.3.0",
"husky": "^0.14.3",
"json-loader": "^0.5.4",

View file

@ -0,0 +1,4 @@
import ErrorBoundary from './view';
// TODO: bring in device/user(?) info in the future
export default ErrorBoundary;

View file

@ -0,0 +1,68 @@
// @flow
import * as React from 'react';
import Yrbl from 'component/yrbl';
import Button from 'component/button';
const WEB_HOOK_URL =
'https://hooks.slack.com/services/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';
type Props = {
children: React.Node,
};
type State = {
hasError: boolean,
};
export default class ErrorBoundary extends React.Component<Props, State> {
constructor() {
super();
this.state = { hasError: false };
}
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error: { stack: string }) {
declare var app: { env: string };
if (app.env === 'production') {
fetch(WEB_HOOK_URL, {
method: 'POST',
body: JSON.stringify({
text: error.stack,
}),
});
}
}
render() {
if (!this.state.hasError) {
return (
<div className="load-screen">
<Yrbl
type="sad"
title={__('Aw shucks!')}
subtitle={
<div>
<p>
{__("There was an error. It's been reported and will be fixed")}. {__('Try')}{' '}
<Button
button="link"
className="load-screen__button"
label={__('refreshing the app')}
onClick={() => window.location.reload()}
/>{' '}
{__('to fix it')}.
</p>
</div>
}
/>
</div>
);
}
return this.props.children;
}
}

View file

@ -34,8 +34,10 @@ class LoadScreen extends React.PureComponent<Props> {
<h3>{__('Uh oh. Sean must have messed something up. Try refreshing to fix it.')}</h3>
<div className="load-screen__actions">
<Button
disabled
label="Refresh"
className="button--load-screen"
button="link"
className="load-screen__button"
onClick={() => window.location.reload()}
/>
</div>
@ -48,7 +50,8 @@ class LoadScreen extends React.PureComponent<Props> {
<p>
{__('Reach out to hello@lbry.io for help, or check out')}{' '}
<Button
className="button--load-screen"
button="link"
className="load-screen__button"
href="https://lbry.io/faq/startup-troubleshooting"
label="this link"
/>

View file

@ -40,7 +40,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
details: __('Starting up'),
message: __('Connecting'),
launchedModal: false,
error: false,
error: true,
launchWithIncompatibleDaemon: false,
isRunning: false,
};
@ -97,7 +97,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
});
}
updateStatusCallback(status: Status, accountList: any) {
updateStatusCallback(status: Status) {
const { notifyUnlockWallet, authenticate, modal } = this.props;
const { launchedModal } = this.state;
@ -127,7 +127,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
} else if (status.is_running) {
// If we cleared the error timout due to a wallet being locked, make sure to start it back up
if (!this.timeout) {
this.adjustErrorTimseout();
this.adjustErrorTimeout();
}
Lbry.resolve({ urls: 'lbry://one' }).then(() => {
@ -213,7 +213,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
return (
<React.Fragment>
<LoadScreen message={message} details={details} error={error} />
<LoadScreen message={message} details={details} error={error} />;
{/* Temp hack: don't show any modals on splash screen daemon is running;
daemon doesn't let you quit during startup, so the "Quit" buttons
in the modals won't work. */}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 181 KiB

After

Width:  |  Height:  |  Size: 278 KiB

View file

@ -32,7 +32,7 @@ export default class extends React.PureComponent<Props> {
{title && subtitle && (
<div className="card__content">
<h2 className="card__title">{title}</h2>
<p className="card__subtitle">{subtitle}</p>
<div className="card__subtitle">{subtitle}</div>
</div>
)}
</div>

View file

@ -1,4 +1,5 @@
/* eslint-disable no-console */
import ErrorBoundary from 'component/errorBoundary';
import App from 'component/app';
import SnackBar from 'component/snackBar';
import SplashScreen from 'component/splash';
@ -244,10 +245,10 @@ const init = () => {
ReactDOM.render(
<Provider store={store}>
<React.Fragment>
<ErrorBoundary>
<App />
<SnackBar />
</React.Fragment>
</ErrorBoundary>
</Provider>,
document.getElementById('app')
);
@ -256,14 +257,16 @@ const init = () => {
// @endif
}
if (window.sessionStorage.getItem('loaded') === 'y') {
if (false && window.sessionStorage.getItem('loaded') === 'y') {
onDaemonReady();
} else {
ReactDOM.render(
<Provider store={store}>
<SplashScreen
authenticate={() => app.store.dispatch(doAuthenticate(pjson.version))}
onReadyToLaunch={onDaemonReady}
onReadyToLaunch={() => {
// onDaemonReady
}}
/>
</Provider>,
document.getElementById('app')

View file

View file

@ -8,7 +8,6 @@ import { shell } from 'electron';
import { Lbry } from 'lbry-redux';
import Native from 'native';
import Button from 'component/button';
import BusyIndicator from 'component/common/busy-indicator';
import Page from 'component/page';
type DeamonSettings = {
@ -55,12 +54,16 @@ class HelpPage extends React.PureComponent<Props, State> {
}
componentDidMount() {
// @if TARGET='app'
Native.getAppVersionInfo().then(({ localVersion, upgradeAvailable }) => {
this.setState({
uiVersion: localVersion,
upgradeAvailable,
});
});
if (!this.props.accessToken) this.props.fetchAccessToken();
// @endif
Lbry.version().then(info => {
this.setState({
versionInfo: info,
@ -71,8 +74,6 @@ class HelpPage extends React.PureComponent<Props, State> {
lbryId: info.installation_id,
});
});
if (!this.props.accessToken) this.props.fetchAccessToken();
}
showAccessToken() {
@ -225,70 +226,66 @@ class HelpPage extends React.PureComponent<Props, State> {
</header>
<div className="card__content">
{this.state.uiVersion && ver ? (
<table className="table table--stretch">
<tbody>
<tr>
<td>{__('App')}</td>
<td>{this.state.uiVersion}</td>
</tr>
<tr>
<td>{__('Daemon (lbrynet)')}</td>
<td>{ver.lbrynet_version}</td>
</tr>
<tr>
<td>{__('Connected Email')}</td>
<td>
{user && user.primary_email ? (
<React.Fragment>
{user.primary_email}{' '}
<Button
button="link"
href={`https://lbry.io/list/edit/${accessToken}`}
label={__('Update mailing preferences')}
/>
</React.Fragment>
) : (
<React.Fragment>
<span className="empty">{__('none')} </span>
<Button button="link" onClick={() => doAuth()} label={__('set email')} />
</React.Fragment>
)}
</td>
</tr>
<tr>
<td>{__('Reward Eligible')}</td>
<td>{user && user.is_reward_approved ? __('Yes') : __('No')}</td>
</tr>
<tr>
<td>{__('Platform')}</td>
<td>{platform}</td>
</tr>
<tr>
<td>{__('Installation ID')}</td>
<td>{this.state.lbryId}</td>
</tr>
<tr>
<td>{__('Access Token')}</td>
<td>
{this.state.accessTokenHidden && (
<Button button="link" label={__('View')} onClick={this.showAccessToken} />
)}
{!this.state.accessTokenHidden && accessToken && (
<div>
<p>{accessToken}</p>
<div className="alert-text">
{__('This is equivalent to a password. Do not post or share this.')}
</div>
<table className="table table--stretch">
<tbody>
<tr>
<td>{__('App')}</td>
<td>{this.state.uiVersion}</td>
</tr>
<tr>
<td>{__('Daemon (lbrynet)')}</td>
<td>{ver ? ver.lbrynet_version : __('Loading')}</td>
</tr>
<tr>
<td>{__('Connected Email')}</td>
<td>
{user && user.primary_email ? (
<React.Fragment>
{user.primary_email}{' '}
<Button
button="link"
href={`https://lbry.io/list/edit/${accessToken}`}
label={__('Update mailing preferences')}
/>
</React.Fragment>
) : (
<React.Fragment>
<span className="empty">{__('none')} </span>
<Button button="link" onClick={() => doAuth()} label={__('set email')} />
</React.Fragment>
)}
</td>
</tr>
<tr>
<td>{__('Reward Eligible')}</td>
<td>{user && user.is_reward_approved ? __('Yes') : __('No')}</td>
</tr>
<tr>
<td>{__('Platform')}</td>
<td>{platform}</td>
</tr>
<tr>
<td>{__('Installation ID')}</td>
<td>{this.state.lbryId}</td>
</tr>
<tr>
<td>{__('Access Token')}</td>
<td>
{this.state.accessTokenHidden && (
<Button button="link" label={__('View')} onClick={this.showAccessToken} />
)}
{!this.state.accessTokenHidden && accessToken && (
<div>
<p>{accessToken}</p>
<div className="alert-text">
{__('This is equivalent to a password. Do not post or share this.')}
</div>
)}
</td>
</tr>
</tbody>
</table>
) : (
<BusyIndicator message={__('Looking up version info')} />
)}
</div>
)}
</td>
</tr>
</tbody>
</table>
</div>
</section>
</Page>

View file

@ -93,28 +93,6 @@
}
.button--link {
word-break: break-all;
&:not(:disabled) {
html[data-mode='dark'] & {
&:not(:hover) {
color: $lbry-teal-4;
}
&:hover {
color: $lbry-teal-3;
}
}
}
}
.button--load-screen {
border-bottom: 1px solid $lbry-white;
display: inline-block;
&:hover {
border-bottom: 1px solid $lbry-blue-1;
color: $lbry-blue-1;
}
}
.button--selected {

View file

@ -17,6 +17,27 @@
}
}
.load-screen__button {
color: $lbry-white;
// border-bottom: 1px solid $lbry-white;
&:hover {
// border-bottom: 1px solid $lbry-blue-1;
color: $lbry-blue-1;
}
}
.load-screen__button:not(:disabled) {
&:not(:hover) {
color: $lbry-white;
// border-bottom: 1px solid $lbry-white;
}
&:hover {
// border-bottom: 1px solid $lbry-blue-1;
color: $lbry-blue-1;
}
}
.load-screen__details {
font-weight: 600;
line-height: 1;

View file

@ -3,6 +3,7 @@
display: flex;
justify-content: center;
vertical-align: middle;
text-align: left;
margin-bottom: var(--spacing-vertical-large);
}

View file

@ -58,7 +58,7 @@ const mainConfig = {
const renderConfig = {
target: 'electron-renderer',
entry: {
ui: './src/ui/index.js',
ui: './src/ui/index.jsx',
},
output: {
filename: '[name].js',

View file

@ -10,7 +10,7 @@ const WEB_PLATFORM_ROOT = path.resolve(__dirname, 'src/platforms/web/');
const webConfig = {
target: 'web',
entry: {
ui: './src/ui/index.js',
ui: './src/ui/index.jsx',
},
output: {
filename: '[name].js',

View file

@ -3678,10 +3678,10 @@ eslint-import-resolver-node@^0.3.2:
debug "^2.6.9"
resolve "^1.5.0"
eslint-import-resolver-webpack@^0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.9.0.tgz#231ce1578ad5124da5799f029bd33d28137623e3"
integrity sha1-IxzhV4rVEk2leZ8Cm9M9KBN2I+M=
eslint-import-resolver-webpack@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.11.0.tgz#75d08ee06fc55eb24bd75147b7b4b6756886b12f"
integrity sha512-vX8rYSPdKtTLkK2FoU1ZRyEsl6wP1FB40ytjrEgMhzUkEkBLuZAkv1KNR+2Ml7lzMOObXI3yaEDiaQ/Yvoczhw==
dependencies:
array-find "^1.0.0"
debug "^2.6.8"
@ -3689,8 +3689,7 @@ eslint-import-resolver-webpack@^0.9.0:
find-root "^1.1.0"
has "^1.0.1"
interpret "^1.0.0"
is-absolute "^0.2.3"
lodash.get "^4.4.2"
lodash "^4.17.4"
node-libs-browser "^1.0.0 || ^2.0.0"
resolve "^1.4.0"
semver "^5.3.0"
@ -4332,10 +4331,10 @@ flatten@^1.0.2:
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
integrity sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=
flow-bin@^0.89.0:
version "0.89.0"
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.89.0.tgz#6bd29c2af7e0f429797f820662f33749105c32fa"
integrity sha512-DkO4PsXYrl53V6G5+t5HbRMC5ajYUQej2LEGPUZ+j9okTb41Sn5j9vfxsCpXMEAslYnQoysHhYu4GUZsQX/DrQ==
flow-bin@^0.94.0:
version "0.94.0"
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.94.0.tgz#b5d58fe7559705b73a18229f97edfc3ab6ffffcb"
integrity sha512-DYF7r9CJ/AksfmmB4+q+TyLMoeQPRnqtF1Pk7KY3zgfkB/nVuA3nXyzqgsIPIvnMSiFEXQcFK4z+iPxSLckZhQ==
flow-typed@^2.3.0:
version "2.5.1"
@ -5328,14 +5327,6 @@ is-absolute-url@^2.0.0:
resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
is-absolute@^0.2.3:
version "0.2.6"
resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.2.6.tgz#20de69f3db942ef2d87b9c2da36f172235b1b5eb"
integrity sha1-IN5p89uULvLYe5wto28XIjWxtes=
dependencies:
is-relative "^0.2.1"
is-windows "^0.2.0"
is-accessor-descriptor@^0.1.6:
version "0.1.6"
resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
@ -5618,13 +5609,6 @@ is-regexp@^1.0.0:
resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
is-relative@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.2.1.tgz#d27f4c7d516d175fb610db84bbeef23c3bc97aa5"
integrity sha1-0n9MfVFtF1+2ENuEu+7yPDvJeqU=
dependencies:
is-unc-path "^0.1.1"
is-resolvable@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
@ -5659,13 +5643,6 @@ is-typedarray@~1.0.0:
resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
is-unc-path@^0.1.1:
version "0.1.2"
resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-0.1.2.tgz#6ab053a72573c10250ff416a3814c35178af39b9"
integrity sha1-arBTpyVzwQJQ/0FqOBTDUXivObk=
dependencies:
unc-path-regex "^0.1.0"
is-utf8@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
@ -5676,11 +5653,6 @@ is-whitespace-character@^1.0.0:
resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz#ede53b4c6f6fb3874533751ec9280d01928d03ed"
integrity sha512-SzM+T5GKUCtLhlHFKt2SDAX2RFzfS6joT91F2/WSi9LxgFdsnhfPK/UIA+JhRR2xuyLdrCys2PiFDrtn1fU5hQ==
is-windows@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
integrity sha1-3hqm1j6indJIc3tp8f+LgALSEIw=
is-windows@^1.0.1, is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@ -10245,11 +10217,6 @@ unbzip2-stream@^1.0.9:
buffer "^5.2.1"
through "^2.3.8"
unc-path-regex@^0.1.0:
version "0.1.2"
resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=
underscore@>1.4.4:
version "1.9.1"
resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"