From 584f9234915b44dcc258c0abf7bde2f230eca148 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 7 Mar 2019 16:46:15 -0500 Subject: [PATCH] add a global error handler with a slack hook --- .eslintrc.json | 13 +- package.json | 4 +- src/ui/component/errorBoundary/index.js | 4 + src/ui/component/errorBoundary/view.jsx | 68 +++++++++ .../component/splash/internal/load-screen.jsx | 7 +- src/ui/component/splash/view.jsx | 8 +- src/ui/component/yrbl/gerbil-sad.png | Bin 185591 -> 284580 bytes src/ui/component/yrbl/index.jsx | 2 +- src/ui/{index.js => index.jsx} | 11 +- src/ui/lbryio.js | 0 src/ui/page/help/view.jsx | 129 +++++++++--------- src/ui/scss/component/_button.scss | 22 --- src/ui/scss/component/_load-screen.scss | 21 +++ src/ui/scss/component/_yrbl.scss | 1 + webpack.electron.config.js | 2 +- webpack.web.config.js | 2 +- yarn.lock | 51 ++----- 17 files changed, 198 insertions(+), 147 deletions(-) create mode 100644 src/ui/component/errorBoundary/view.jsx rename src/ui/{index.js => index.jsx} (96%) delete mode 100644 src/ui/lbryio.js diff --git a/.eslintrc.json b/.eslintrc.json index f4c871a6e..23add3fff 100644 --- a/.eslintrc.json +++ b/.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 } } diff --git a/package.json b/package.json index a7ab8b667..73bb18207 100644 --- a/package.json +++ b/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", diff --git a/src/ui/component/errorBoundary/index.js b/src/ui/component/errorBoundary/index.js index e69de29bb..40c167c33 100644 --- a/src/ui/component/errorBoundary/index.js +++ b/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; diff --git a/src/ui/component/errorBoundary/view.jsx b/src/ui/component/errorBoundary/view.jsx new file mode 100644 index 000000000..4c254ac7e --- /dev/null +++ b/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 { + 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 ( +
+ +

+ {__("There was an error. It's been reported and will be fixed")}. {__('Try')}{' '} +

+ } + /> + + ); + } + + return this.props.children; + } +} diff --git a/src/ui/component/splash/internal/load-screen.jsx b/src/ui/component/splash/internal/load-screen.jsx index 25d1e25cc..a0d977be7 100644 --- a/src/ui/component/splash/internal/load-screen.jsx +++ b/src/ui/component/splash/internal/load-screen.jsx @@ -34,8 +34,10 @@ class LoadScreen extends React.PureComponent {

{__('Uh oh. Sean must have messed something up. Try refreshing to fix it.')}

@@ -48,7 +50,8 @@ class LoadScreen extends React.PureComponent {

{__('Reach out to hello@lbry.io for help, or check out')}{' '}