add a global error handler with a slack hook

.eslintrc.json

@@ -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
   }
 }

package.json

@@ -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",

src/ui/component/errorBoundary/index.js

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

src/ui/component/errorBoundary/view.jsx

@@ -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;
+  }
+}

src/ui/component/splash/internal/load-screen.jsx

@@ -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"
                   />

src/ui/component/splash/view.jsx

@@ -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. */}

src/ui/component/yrbl/index.jsx

@@ -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>

src/ui/index.jsx

@@ -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')

src/ui/page/help/view.jsx

@@ -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,7 +226,6 @@ class HelpPage extends React.PureComponent<Props, State> {
           </header>
 
           <div className="card__content">
-            {this.state.uiVersion && ver ? (
             <table className="table table--stretch">
               <tbody>
                 <tr>
@@ -234,7 +234,7 @@ class HelpPage extends React.PureComponent<Props, State> {
                 </tr>
                 <tr>
                   <td>{__('Daemon (lbrynet)')}</td>
-                    <td>{ver.lbrynet_version}</td>
+                  <td>{ver ? ver.lbrynet_version : __('Loading')}</td>
                 </tr>
                 <tr>
                   <td>{__('Connected Email')}</td>
@@ -286,9 +286,6 @@ class HelpPage extends React.PureComponent<Props, State> {
                 </tr>
               </tbody>
             </table>
-            ) : (
-              <BusyIndicator message={__('Looking up version info')} />
-            )}
           </div>
         </section>
       </Page>

src/ui/scss/component/_button.scss

@@ -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 {

src/ui/scss/component/_load-screen.scss

@@ -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;

src/ui/scss/component/_yrbl.scss

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

webpack.electron.config.js

@@ -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',

webpack.web.config.js

@@ -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',

yarn.lock

@@ -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:
+eslint-import-resolver-webpack@^0.11.0:
-  version "0.9.0"
+  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.9.0.tgz#231ce1578ad5124da5799f029bd33d28137623e3"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.11.0.tgz#75d08ee06fc55eb24bd75147b7b4b6756886b12f"
-  integrity sha1-IxzhV4rVEk2leZ8Cm9M9KBN2I+M=
+  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 "^4.17.4"
-    lodash.get "^4.4.2"
     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:
+flow-bin@^0.94.0:
-  version "0.89.0"
+  version "0.94.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.89.0.tgz#6bd29c2af7e0f429797f820662f33749105c32fa"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.94.0.tgz#b5d58fe7559705b73a18229f97edfc3ab6ffffcb"
-  integrity sha512-DkO4PsXYrl53V6G5+t5HbRMC5ajYUQej2LEGPUZ+j9okTb41Sn5j9vfxsCpXMEAslYnQoysHhYu4GUZsQX/DrQ==
+  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"