Skip to content

Instantly share code, notes, and snippets.

@betiol
Last active August 10, 2018 19:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save betiol/04b5f9c0e10ac9ba10d4a67128bc888a to your computer and use it in GitHub Desktop.
Save betiol/04b5f9c0e10ac9ba10d4a67128bc888a to your computer and use it in GitHub Desktop.
Error Boundary
/* @flow */
import React from 'react';
import styled from 'styled-components';
import { Card, Icon } from 'antd';
import PropTypes from 'prop-types';
type Props = {
children: any,
viewName: string
};
type State = {
hasError: boolean
};
const Error = styled.div`
padding-horizontal: 6%;
margin-top: 28px;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
`;
const ErrorMessage = styled.span`
font-size: 16px;
font-weight: 300;
color: #848484;
margin-left: 3px;
font-size: 20px;
font-weight: 400;
`;
export default class ErrorBoundary extends React.Component<Props, State> {
state = {
hasError: false,
error: null,
errorInfo: null
};
componentDidCatch(error: any, errorInfo: any) {
this.setState({ hasError: true, error, errorInfo });
console.log(JSON.stringify(error, null, 2));
console.log(errorInfo.componentStack);
}
render() {
if (this.state.hasError) {
return (
<Card>
<Error>
<Icon style={{ color: 'red', fontSize: 100 }} type="close-circle-o" />
<ErrorMessage>
Ooops! Parece que algo deu errado na sua requisição - Log View: {this.props.viewName}
<details style={{ whiteSpace: 'pre-wrap' }}>
{this.state.error && this.state.error.toString()}
<br />
{this.state.errorInfo.componentStack}
</details>
</ErrorMessage>
</Error>
</Card>
);
}
return this.props.children;
}
}
ErrorBoundary.propTypes = {
viewName: PropTypes.string.isRequired
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment