From a166f8d283d5bde63b0123eca71c821cb905f215 Mon Sep 17 00:00:00 2001 From: Anne Ogborn Date: Thu, 21 Feb 2019 10:07:31 +0530 Subject: [PATCH 1/3] added subscriptions-transport-ws to list of dependencies needed for apollo --- .../graphql/manual/guides/integrations/apollo-subscriptions.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/graphql/manual/guides/integrations/apollo-subscriptions.rst b/docs/graphql/manual/guides/integrations/apollo-subscriptions.rst index bdd61da5f5c7a..1494bb74c927c 100644 --- a/docs/graphql/manual/guides/integrations/apollo-subscriptions.rst +++ b/docs/graphql/manual/guides/integrations/apollo-subscriptions.rst @@ -16,7 +16,7 @@ Install packages .. code-block:: bash - npm install --save apollo-client apollo-link-ws apollo-link-http apollo-link apollo-utilities apollo-cache-inmemory + npm install --save apollo-client apollo-link-ws apollo-link-http apollo-link apollo-utilities apollo-cache-inmemory subscriptions-transport-ws Once these packages are installed, import them as follows in the file where you have currently initialised your client (usually your ``App.js`` file). From fdb9f770ed8cae4677782414c3c9df16376f3915 Mon Sep 17 00:00:00 2001 From: Anne Ogborn Date: Wed, 27 Mar 2019 19:58:49 -0700 Subject: [PATCH 2/3] improve appearance of 500 page & provide more info (#272) This commit displays all currently available info re why error occured provides a link to home, and uses the general layout of the 404 page. We still need to improve what info is provided --- console/src/components/App/500-logo.png | Bin 0 -> 7781 bytes console/src/components/App/ErrorBoundary.js | 59 +++++++++++++++++--- console/src/components/App/ErrorPage.scss | 47 ++++++++++++++++ 3 files changed, 99 insertions(+), 7 deletions(-) create mode 100644 console/src/components/App/500-logo.png create mode 100644 console/src/components/App/ErrorPage.scss diff --git a/console/src/components/App/500-logo.png b/console/src/components/App/500-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..9d556f0d973e1b1652321360643bcc441c5985a3 GIT binary patch literal 7781 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 literal 0 HcmV?d00001 diff --git a/console/src/components/App/ErrorBoundary.js b/console/src/components/App/ErrorBoundary.js index f1afaa5dfbab8..aad6e8ea88d6e 100644 --- a/console/src/components/App/ErrorBoundary.js +++ b/console/src/components/App/ErrorBoundary.js @@ -1,23 +1,68 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { Link } from 'react-router'; +import Helmet from 'react-helmet'; + class ErrorBoundary extends React.Component { constructor(props) { super(props); - this.state = { hasError: false, info: null }; + this.state = { hasError: false, info: null, error: null }; } componentDidCatch(error, info) { - // Display fallback UI - this.setState({ hasError: true, info: info }); - // You can also log the error to an error reporting service - // logErrorToMyService(error, info); + this.setState({ hasError: true, info: info, error: error }); + // TODO logErrorToMyService(error, info); } render() { + const lostImage = require('./500-logo.png'); + const styles = require('./ErrorPage.scss'); + const cc = this.state.info ? this.state.info.componentStack.split(' in ') : []; + const carray = []; + let i; + if (cc) { + for (i = 0; i < cc.length; i++) { + const linestyle = { marginLeft: 8 * i }; + const acomponent = cc[i].trim(); + if (acomponent.length > 0) { + carray.push( +
  • {acomponent}
    • + ); + } + } + } if (this.state.hasError) { - // You can render any custom fallback UI - return
    Something went wrong
    ; + return ( +
    + +
    +
    +
    +

    Oh Fudge

    + Something broke. Head back Home. +
    +
    + +
    +
    + {this.state.error && this.state.error.toString()} +
    +
    +

    Component Stack:

    +
      + {carray} +
    +
    +
    +
    +
    + ); } return this.props.children; } diff --git a/console/src/components/App/ErrorPage.scss b/console/src/components/App/ErrorPage.scss new file mode 100644 index 0000000000000..55fd66862b731 --- /dev/null +++ b/console/src/components/App/ErrorPage.scss @@ -0,0 +1,47 @@ +.container { + padding: 0; +} + +.viewcontainer { + height: 100vh; + width: 100vw; + display: table; + + .centerContent{ + display: table-cell; + vertical-align: middle; + + .message { + padding: 50px 20%; + } + + .message h1 { + font-size: 54px; + font-weight: bold; + } + + .message p { + margin-left: 15px; + } + + .message p > a { + font-weight: bold; + } + } +} + +.header { + background: #eee; + + h2 { + margin: 0; + padding: 26px; + float: left; + line-height: 26px; + } + + .nav { + padding: 20px; + float: left; + } +} From 7e3fa621d4784e94064bcb9d8f9d2a5612586663 Mon Sep 17 00:00:00 2001 From: rikinsk Date: Wed, 3 Apr 2019 19:05:30 +0530 Subject: [PATCH 3/3] update error boundary --- console/src/components/App/App.js | 2 +- console/src/components/App/ErrorPage.scss | 2 +- .../{App => Error}/ErrorBoundary.js | 46 ++++++------------ .../ErrorPage.scss} | 2 +- .../components/{404 => Error}/PageNotFound.js | 13 +++-- .../404-logo.png => Error/error-logo.png} | Bin console/src/components/index.js | 2 +- 7 files changed, 28 insertions(+), 39 deletions(-) rename console/src/components/{App => Error}/ErrorBoundary.js (50%) rename console/src/components/{404/PageNotFound.scss => Error/ErrorPage.scss} (97%) rename console/src/components/{404 => Error}/PageNotFound.js (73%) rename console/src/components/{404/404-logo.png => Error/error-logo.png} (100%) diff --git a/console/src/components/App/App.js b/console/src/components/App/App.js index ca37d793ff8c9..f1c748a16850f 100644 --- a/console/src/components/App/App.js +++ b/console/src/components/App/App.js @@ -9,7 +9,7 @@ import './progress-bar.scss'; import { NOTIF_EXPANDED } from './Actions'; import AceEditor from 'react-ace'; import 'brace/mode/json'; -import ErrorBoundary from './ErrorBoundary'; +import ErrorBoundary from '../Error/ErrorBoundary'; import { telemetryNotificationShown } from '../../telemetry/Actions'; import { showTelemetryNotification } from '../../telemetry/Notifications'; diff --git a/console/src/components/App/ErrorPage.scss b/console/src/components/App/ErrorPage.scss index 55fd66862b731..bc49f6931b342 100644 --- a/console/src/components/App/ErrorPage.scss +++ b/console/src/components/App/ErrorPage.scss @@ -2,7 +2,7 @@ padding: 0; } -.viewcontainer { +.viewContainer { height: 100vh; width: 100vw; display: table; diff --git a/console/src/components/App/ErrorBoundary.js b/console/src/components/Error/ErrorBoundary.js similarity index 50% rename from console/src/components/App/ErrorBoundary.js rename to console/src/components/Error/ErrorBoundary.js index aad6e8ea88d6e..e4126916eac85 100644 --- a/console/src/components/App/ErrorBoundary.js +++ b/console/src/components/Error/ErrorBoundary.js @@ -16,54 +16,40 @@ class ErrorBoundary extends React.Component { } render() { - const lostImage = require('./500-logo.png'); + const errorImage = require('./error-logo.png'); const styles = require('./ErrorPage.scss'); - const cc = this.state.info ? this.state.info.componentStack.split(' in ') : []; - const carray = []; - let i; - if (cc) { - for (i = 0; i < cc.length; i++) { - const linestyle = { marginLeft: 8 * i }; - const acomponent = cc[i].trim(); - if (acomponent.length > 0) { - carray.push( -
  • {acomponent}
    • - ); - } - } - } + if (this.state.hasError) { return ( -
    - +
    +
    -

    Oh Fudge

    - Something broke. Head back Home. +

    Error

    +
    +
    + Something went wrong. Head back Home. +
    +
    +
    + You can report this issue on our Github or chat with us on Discord +
    -
    - {this.state.error && this.state.error.toString()} -
    -
    -

    Component Stack:

    -
      - {carray} -
    -
    ); } + return this.props.children; } } diff --git a/console/src/components/404/PageNotFound.scss b/console/src/components/Error/ErrorPage.scss similarity index 97% rename from console/src/components/404/PageNotFound.scss rename to console/src/components/Error/ErrorPage.scss index 55fd66862b731..bc49f6931b342 100644 --- a/console/src/components/404/PageNotFound.scss +++ b/console/src/components/Error/ErrorPage.scss @@ -2,7 +2,7 @@ padding: 0; } -.viewcontainer { +.viewContainer { height: 100vh; width: 100vw; display: table; diff --git a/console/src/components/404/PageNotFound.js b/console/src/components/Error/PageNotFound.js similarity index 73% rename from console/src/components/404/PageNotFound.js rename to console/src/components/Error/PageNotFound.js index 0aac2a6f5fe47..e6c936732036d 100644 --- a/console/src/components/404/PageNotFound.js +++ b/console/src/components/Error/PageNotFound.js @@ -7,21 +7,24 @@ import Helmet from 'react-helmet'; class PageNotFound extends Component { render() { - const lostImage = require('./404-logo.png'); - const styles = require('./PageNotFound.scss'); + const errorImage = require('./error-logo.png'); + const styles = require('./ErrorPage.scss'); return ( -
    +

    404

    - This page doesn't exist. Head back Home. +
    +
    + This page doesn't exist. Head back Home. +