From 9baf5adba218f93fa257d46cf0e3bbfa0ed6b85b Mon Sep 17 00:00:00 2001 From: Gervwyk Date: Mon, 26 Apr 2021 11:39:51 +0200 Subject: [PATCH] fix(blockTools): Add full error page. --- packages/blockTools/demo/index.js | 6 +- packages/blockTools/src/ErrorBoundary.js | 16 +- packages/blockTools/src/ErrorBoundary.test.js | 166 +++++++++++++- packages/blockTools/src/ErrorPage.js | 58 +++++ packages/blockTools/src/ErrorPage.test.js | 207 ++++++++++++++++++ 5 files changed, 433 insertions(+), 20 deletions(-) create mode 100644 packages/blockTools/src/ErrorPage.js create mode 100644 packages/blockTools/src/ErrorPage.test.js diff --git a/packages/blockTools/demo/index.js b/packages/blockTools/demo/index.js index a87106f02..09cb30489 100644 --- a/packages/blockTools/demo/index.js +++ b/packages/blockTools/demo/index.js @@ -42,11 +42,11 @@ const FallbackComp = ({ name, error }) => ( ); const Demo = () => (
-

ErrorBoundary with renderError=true :

- +

ErrorBoundary with fullPage=true :

+ -

ErrorBoundary with renderError=false :

+

ErrorBoundary with fullPage=false :

diff --git a/packages/blockTools/src/ErrorBoundary.js b/packages/blockTools/src/ErrorBoundary.js index 1de994cf1..5860f9b6f 100644 --- a/packages/blockTools/src/ErrorBoundary.js +++ b/packages/blockTools/src/ErrorBoundary.js @@ -15,6 +15,7 @@ */ import React, { Component } from 'react'; +import ErrorPage from './ErrorPage'; class ErrorBoundary extends Component { constructor(props) { @@ -30,19 +31,20 @@ class ErrorBoundary extends Component { } render() { - const { description, message, renderError, fallback, children } = this.props; + const { children, description, fallback, fullPage, message, name } = this.props; const { hasError, error } = this.state; if (hasError) { if (fallback) { return fallback(error); } - if (renderError) { + if (fullPage) { return ( -
- {`Error: ${message || error.message}`} - {description &&
} - {description} -
+ ); } // Throw to console but fail silently to user? diff --git a/packages/blockTools/src/ErrorBoundary.test.js b/packages/blockTools/src/ErrorBoundary.test.js index 46e7ff77d..77c87cfe4 100644 --- a/packages/blockTools/src/ErrorBoundary.test.js +++ b/packages/blockTools/src/ErrorBoundary.test.js @@ -80,7 +80,7 @@ test('display error message on error generated by child', () => { let comp; act(() => { comp = create( - + ); @@ -88,14 +88,87 @@ test('display error message on error generated by child', () => { act(() => { comp.update( - + ); }); expect(comp.toJSON()).toMatchInlineSnapshot(` -
- Error: ErrorBoundary test error +
+
+ 500 +
+
+
+ Error +
+
+ ErrorBoundary test error +
+
`); }); @@ -107,7 +180,7 @@ test('display error message and description on error generated by child', () => let comp; act(() => { comp = create( - + ); @@ -115,16 +188,89 @@ test('display error message and description on error generated by child', () => act(() => { comp.update( - + ); }); expect(comp.toJSON()).toMatchInlineSnapshot(` -
- Error: ErrorBoundary test error -
- error description +
+
+ 500 +
+
+
+ Error +
+
+ ErrorBoundary test error +
+
+ error description +
+ +
`); }); diff --git a/packages/blockTools/src/ErrorPage.js b/packages/blockTools/src/ErrorPage.js new file mode 100644 index 000000000..4a21c437e --- /dev/null +++ b/packages/blockTools/src/ErrorPage.js @@ -0,0 +1,58 @@ +/* + Copyright 2020-2021 Lowdefy, Inc + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + +import React from 'react'; + +const ErrorPage = ({ code, description, message, name }) => ( +
+
+ {code || 500} +
+
+
{name}
+
{message}
+
{description}
+ +
+
+); + +export default ErrorPage; diff --git a/packages/blockTools/src/ErrorPage.test.js b/packages/blockTools/src/ErrorPage.test.js new file mode 100644 index 000000000..c744e951b --- /dev/null +++ b/packages/blockTools/src/ErrorPage.test.js @@ -0,0 +1,207 @@ +/* + Copyright 2020-2021 Lowdefy, Inc + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + +import React from 'react'; +import { create, act } from 'react-test-renderer'; +import ErrorPage from './ErrorPage'; + +test('default', () => { + let comp; + act(() => { + comp = create(); + }); + act(() => { + comp.update(); + }); + expect(comp.toJSON()).toMatchInlineSnapshot(` +
+
+ 500 +
+
+
+ + `); +}); + +test('custom props', () => { + let comp; + act(() => { + comp = create( + + ); + }); + act(() => { + comp.update( + + ); + }); + expect(comp.toJSON()).toMatchInlineSnapshot(` +
+
+ 301 +
+
+
+ Error name +
+
+ Error message +
+
+ Error description +
+ +
+
+ `); +});