Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(app): implement a global error boundary component #285

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+179 −48
Open

feat(app): implement a global error boundary component #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/assets/img/error_boundary_ui.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 11 additions & 8 deletions src/components/App/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom';
import ConnectedSignIn from '../SignIn/SignIn';
import Router from '../Router/Router';
import ChrisStore from '../../store/ChrisStore';
import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
import './App.css';

// import the patternfly CSS globally
Expand All @@ -18,14 +19,16 @@ import '../../../node_modules/@patternfly/patternfly/patternfly-no-reset.css';

const App = () => (
<ChrisStore.Container>
<div className="App">
<BrowserRouter>
<Switch>
<Route path="/signin" component={ConnectedSignIn} />
<Route path="/" component={Router} />
</Switch>
</BrowserRouter>
</div>
<ErrorBoundary>
<div className="App">
<BrowserRouter>
<Switch>
<Route path="/signin" component={ConnectedSignIn} />
<Route path="/" component={Router} />
</Switch>
</BrowserRouter>
</div>
</ErrorBoundary>
</ChrisStore.Container>
);

Expand Down
56 changes: 56 additions & 0 deletions src/components/ErrorBoundary/ErrorBoundary.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
.container {
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.illustration-container {
position: 'relative';
background: rgba(134, 101, 197, 0.2);
width: 100%;
height: 100%;
margin-top: 24px;
padding: 0px 3%;
display: flex;
flex-direction: column;
align-items: center;
}

.illustration {
position: relative;
top: -15%;
width: 50vh;
}

.error-message-container {
height: 100vh;
padding: 0px 2%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.error-message-container h1 {
font-size: 4em;
font-weight: bolder;
color: rgba(0, 0, 0, 0.7);
}

.error-message-container h2 {
text-align: center;
font-size: 2em;
margin-bottom: 12px;
font-weight: bold;
color: rgba(0, 0, 0, 0.55);
margin-top: 12px;
}

.error-message-container p {
text-align: center;
color: rgba(0, 0, 0, 0.55);
margin-bottom: 2rem;
}
69 changes: 69 additions & 0 deletions src/components/ErrorBoundary/ErrorBoundary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import React from 'react';
import ErrorNotification from '../Notification';
import Button from '../Button';
import Illustration from '../../assets/img/error_boundary_ui.svg';
import './ErrorBoundary.css';

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null, errorInfo: null };
}

static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}

componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
//notifySlack(error, errorInfo)
this.setState({ error, errorInfo });
}

showNotifications = (error) => {
this.setState((prev) => ({
errors: [...prev.errors, error],
}));
};

reload = () => {
window.location.href = '/';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pedantic: don't assume web app is served from /, i.e. this will not work if deployed on a subpath (by setting PUBLIC_URL or homepage).

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I will do it then

};

render() {
if (this.state.hasError) {
return (
<>
<ErrorNotification
key={`notif-boundary`}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does our eslint config allow for unnecessary string template? If so, I should change that.

title="Error"
message={this.state.error?.message || 'Something happened!'}
position="top-right"
variant="danger"
closeable
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is Notification component to use here? If an uncaught exception happens in a child component, I don't think a closable notification would be suitable, we would probably want the entire view to be replaced by an error screen (stop the user from interacting with the program when its state becomes undefined/erroneous)

onClose={() => {}}
/>
<div className="container">
<div className="error-message-container">
<h1>400</h1>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily a 400 error, could be a client-side error.

<h2>{this.state.error?.message}</h2>
<p>We are having an issue, please click on the button bellow to reload the page !</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please proofread.

Idea: we should provide a link to https://github.com/FNNDSC/ChRIS_store_ui/issues


<Button id="reload-error-btn" variant="primary" onClick={() => this.reload()}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently, the reload function doesn't necessarily reload the page but navigates us back to /. Do you think it would be better to try reloading the page, or navigating "home"? In the latter case, we should instead say here "please click on the button below to go home" (or maybe go back)?

Copy link
Author

@roy98 roy98 May 6, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently, the reload function doesn't necessarily reload the page but navigates us back to /. Do you think it would be better to try reloading the page, or navigating "home"? In the latter case, we should instead say here "please click on the button below to go home" (or maybe go back)?

It would be better to navigate "home". I got your comments

<span>Retry</span>
</Button>
</div>
<div className="illustration-container">
<img src={Illustration} alt="Error illustration" className="illustration" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where did this illustration come from? Just want to make sure reuse is permitted.

Or perhaps (in a future issue) we should loop back with @mairin and consider using "brainy" the mascot here (similar to the 404 error page).

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The illustration come from undraw

</div>
</div>
</>
);
}

return this.props.children;
}
}

export default ErrorBoundary;
40 changes: 22 additions & 18 deletions src/components/Plugins/components/PluginItem/PluginItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
Badge, Card, CardBody, Split, SplitItem,
} from '@patternfly/react-core';
import { Badge, Card, CardBody, Split, SplitItem } from '@patternfly/react-core';
import { StarIcon } from '@patternfly/react-icons';
import { Link } from 'react-router-dom';
import RelativeDate from '../../../RelativeDate/RelativeDate';
Expand All @@ -11,7 +9,15 @@ import './PluginItem.css';
const PluginItem = ({
// Need to do this because the property "creation_date" comes from CUBE
// eslint-disable-next-line camelcase
name, authors, title, creation_date, modification_date, category, isFavorite, isLoggedIn, onStarClicked,
name,
authors,
title,
creation_date,
modification_date,
category,
isFavorite,
isLoggedIn,
onStarClicked,
}) => {
function renderStarButton() {
let className = 'plugin-star';
Expand All @@ -29,15 +35,16 @@ const PluginItem = ({
<div>
<div className="row no-flex">
<Split>
<SplitItem isFilled><p style={{ fontSize: '0.9em', fontWeight: 'bold' }}>{name}</p></SplitItem>
<SplitItem><Badge isRead>{category}</Badge></SplitItem>
<SplitItem isFilled>
<p style={{ fontSize: '0.9em', fontWeight: 'bold' }}>{name}</p>
</SplitItem>
<SplitItem>
<Badge isRead>{category}</Badge>
</SplitItem>
</Split>
<div className="plugin-item-name">
<Link
href={`/plugin/${name}`}
to={`/plugin/${name}`}
>
{ title }
<Link href={`/plugin/${name}`} to={`/plugin/${name}`}>
{title}
</Link>
{renderStarButton()}
</div>
Expand All @@ -46,15 +53,12 @@ const PluginItem = ({
to={`/author/${authors}`}
className="plugin-item-author"
>
{ authors.join(', ') }
{authors.join(', ')}
</Link>
<p style={{ color: 'gray', fontWeight: '600', fontSize: 'small' }}>
{
RelativeDate.isValid(modification_date) ?
`Updated ${new RelativeDate(modification_date).format()}`
:
`Created ${new RelativeDate(creation_date).format()}`
}
{RelativeDate.isValid(modification_date)
? `Updated ${new RelativeDate(modification_date).format()}`
: `Created ${new RelativeDate(creation_date).format()}`}
</p>
</div>
</div>
Expand Down
42 changes: 20 additions & 22 deletions src/components/Plugins/components/PluginsCategories/PluginsCategories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,36 +7,34 @@ const PluginsCategories = ({ categories, selected, onSelect }) => (
<div className="plugins-categories">
<div className="plugins-categories-header">Categories</div>
<div role="menu">
{
categories.map(({ name, length }) => (
<div
key={name}
role="menuitem"
tabIndex="-1"
className={`plugins-category ${name === selected ? 'selected' : ''}`}
onClick={() => onSelect(name)}
onKeyPress={() => {}}
>
<div className="plugins-category-name">{name}</div>
<div className="plugins-category-length">{length}</div>
</div>
))
}
{categories.map(({ name, length }) => (
<div
key={name}
role="menuitem"
tabIndex="-1"
className={`plugins-category ${name === selected ? 'selected' : ''}`}
onClick={() => onSelect(name)}
onKeyPress={() => {}}
>
<div className="plugins-category-name">{name}</div>
<div className="plugins-category-length">{length}</div>
</div>
))}

<div role="menuitem" tabIndex="-1" onClick={() => onSelect(null)} onKeyPress={() => {}}>
<div style={{ color: '#aaa', cursor: 'pointer' }}>
Clear
</div>
<div style={{ color: '#aaa', cursor: 'pointer' }}>Clear</div>
</div>
</div>
</div>
);

PluginsCategories.propTypes = {
categories: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
length: PropTypes.number.isRequired,
})).isRequired,
categories: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string.isRequired,
length: PropTypes.number.isRequired,
})
).isRequired,
selected: PropTypes.string,
onSelect: PropTypes.func,
};
Expand Down