mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-04-06 15:30:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(blockTools): Add full error page.

Browse Source
This commit is contained in:
Gervwyk 2021-04-26 11:39:51 +02:00
parent 1edc7cb70f
commit 9baf5adba2
5 changed files with 433 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/blockTools/demo/index.js
View File

@ -42,11 +42,11 @@ const FallbackComp = ({ name, error }) => (
);
const Demo = () => (
<div id="page">
<h4>ErrorBoundary with renderError=true :</h4>
<ErrorBoundary renderError>
<h4>ErrorBoundary with fullPage=true :</h4>
<ErrorBoundary fullPage>
<ErrorComp />
</ErrorBoundary>
<h4>ErrorBoundary with renderError=false :</h4>
<h4>ErrorBoundary with fullPage=false :</h4>
<ErrorBoundary>
<ErrorComp />
</ErrorBoundary>

16
packages/blockTools/src/ErrorBoundary.js
View File

@ -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 (
<div>
{`Error: ${message || error.message}`}
{description && <br />}
{description}
</div>
<ErrorPage
code={error.number}
description={description || error.description}
message={message || error.message}
name={name || error.name}
/>
);
}
// Throw to console but fail silently to user?

166
packages/blockTools/src/ErrorBoundary.test.js
View File

@ -80,7 +80,7 @@ test('display error message on error generated by child', () => {
let comp;
act(() => {
comp = create(
<ErrorBoundary renderError>
<ErrorBoundary fullPage>
<ProblemChild />
</ErrorBoundary>
);
@ -88,14 +88,87 @@ test('display error message on error generated by child', () => {
act(() => {
comp.update(
<ErrorBoundary renderError>
<ErrorBoundary fullPage>
<ProblemChild />
</ErrorBoundary>
);
});
expect(comp.toJSON()).toMatchInlineSnapshot(`
<div>
Error: ErrorBoundary test error
<div
style={
Object {
"alignItems": "center",
"display": "flex",
"fontFamily": "system-ui",
"height": "100%",
"justifyContent": "center",
"margin": 0,
}
}
>
<div
style={
Object {
"flex": "0 1 auto",
"fontSize": "4.3em",
"fontWeight": "100",
"paddingRight": 30,
}
}
>
500
</div>
<div
style={
Object {
"borderLeft": "1px solid #aeaeae",
"flex": "0 1 auto",
"maxWidth": 400,
"paddingLeft": 30,
}
}
>
<div
style={
Object {
"fontSize": "1.3em",
"fontWeight": "300",
"paddingBottom": 10,
}
}
>
Error
</div>
<div
style={
Object {
"fontSize": "0.9em",
}
}
>
ErrorBoundary test error
</div>
<div
style={
Object {
"fontSize": "0.9em",
}
}
/>
<div
style={
Object {
"paddingTop": 20,
}
}
>
<a
href="/"
>
Return to home page
</a>
</div>
</div>
</div>
`);
});
@ -107,7 +180,7 @@ test('display error message and description on error generated by child', () =>
let comp;
act(() => {
comp = create(
<ErrorBoundary renderError description="error description">
<ErrorBoundary fullPage description="error description">
<ProblemChild />
</ErrorBoundary>
);
@ -115,16 +188,89 @@ test('display error message and description on error generated by child', () =>
act(() => {
comp.update(
<ErrorBoundary renderError description="error description">
<ErrorBoundary fullPage description="error description">
<ProblemChild />
</ErrorBoundary>
);
});
expect(comp.toJSON()).toMatchInlineSnapshot(`
<div>
Error: ErrorBoundary test error
<br />
error description
<div
style={
Object {
"alignItems": "center",
"display": "flex",
"fontFamily": "system-ui",
"height": "100%",
"justifyContent": "center",
"margin": 0,
}
}
>
<div
style={
Object {
"flex": "0 1 auto",
"fontSize": "4.3em",
"fontWeight": "100",
"paddingRight": 30,
}
}
>
500
</div>
<div
style={
Object {
"borderLeft": "1px solid #aeaeae",
"flex": "0 1 auto",
"maxWidth": 400,
"paddingLeft": 30,
}
}
>
<div
style={
Object {
"fontSize": "1.3em",
"fontWeight": "300",
"paddingBottom": 10,
}
}
>
Error
</div>
<div
style={
Object {
"fontSize": "0.9em",
}
}
>
ErrorBoundary test error
</div>
<div
style={
Object {
"fontSize": "0.9em",
}
}
>
error description
</div>
<div
style={
Object {
"paddingTop": 20,
}
}
>
<a
href="/"
>
Return to home page
</a>
</div>
</div>
</div>
`);
});

58
packages/blockTools/src/ErrorPage.js Normal file
View File

@ -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 }) => (
<div
style={{
height: '100%',
fontFamily: 'system-ui',
margin: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<div
style={{
flex: '0 1 auto',
fontSize: '4.3em',
fontWeight: '100',
paddingRight: 30,
}}
>
{code || 500}
</div>
<div
style={{
flex: '0 1 auto',
paddingLeft: 30,
maxWidth: 400,
borderLeft: '1px solid #aeaeae',
}}
>
<div style={{ fontSize: '1.3em', fontWeight: '300', paddingBottom: 10 }}>{name}</div>
<div style={{ fontSize: '0.9em' }}>{message}</div>
<div style={{ fontSize: '0.9em' }}>{description}</div>
<div style={{ paddingTop: 20 }}>
<a href="/">Return to home page</a>
</div>
</div>
</div>
);
export default ErrorPage;

207
packages/blockTools/src/ErrorPage.test.js Normal file
View File

@ -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(<ErrorPage />);
});
act(() => {
comp.update(<ErrorPage />);
});
expect(comp.toJSON()).toMatchInlineSnapshot(`
<div
style={
Object {
"alignItems": "center",
"display": "flex",
"fontFamily": "system-ui",
"height": "100%",
"justifyContent": "center",
"margin": 0,
}
}
>
<div
style={
Object {
"flex": "0 1 auto",
"fontSize": "4.3em",
"fontWeight": "100",
"paddingRight": 30,
}
}
>
500
</div>
<div
style={
Object {
"borderLeft": "1px solid #aeaeae",
"flex": "0 1 auto",
"maxWidth": 400,
"paddingLeft": 30,
}
}
>
<div
style={
Object {
"fontSize": "1.3em",
"fontWeight": "300",
"paddingBottom": 10,
}
}
/>
<div
style={
Object {
"fontSize": "0.9em",
}
}
/>
<div
style={
Object {
"fontSize": "0.9em",
}
}
/>
<div
style={
Object {
"paddingTop": 20,
}
}
>
<a
href="/"
>
Return to home page
</a>
</div>
</div>
</div>
`);
});
test('custom props', () => {
let comp;
act(() => {
comp = create(
<ErrorPage
code={301}
description={'Error description'}
message={'Error message'}
name={'Error name'}
/>
);
});
act(() => {
comp.update(
<ErrorPage
code={301}
description={'Error description'}
message={'Error message'}
name={'Error name'}
/>
);
});
expect(comp.toJSON()).toMatchInlineSnapshot(`
<div
style={
Object {
"alignItems": "center",
"display": "flex",
"fontFamily": "system-ui",
"height": "100%",
"justifyContent": "center",
"margin": 0,
}
}
>
<div
style={
Object {
"flex": "0 1 auto",
"fontSize": "4.3em",
"fontWeight": "100",
"paddingRight": 30,
}
}
>
301
</div>
<div
style={
Object {
"borderLeft": "1px solid #aeaeae",
"flex": "0 1 auto",
"maxWidth": 400,
"paddingLeft": 30,
}
}
>
<div
style={
Object {
"fontSize": "1.3em",
"fontWeight": "300",
"paddingBottom": 10,
}
}
>
Error name
</div>
<div
style={
Object {
"fontSize": "0.9em",
}
}
>
Error message
</div>
<div
style={
Object {
"fontSize": "0.9em",
}
}
>
Error description
</div>
<div
style={
Object {
"paddingTop": 20,
}
}
>
<a
href="/"
>
Return to home page
</a>
</div>
</div>
</div>
`);
});