Skip to content

Instantly share code, notes, and snippets.

@victorkurauchi
Created October 20, 2017 15:21
Show Gist options
  • Select an option

  • Save victorkurauchi/5d0f28496a74fc06b671be5ac14c85eb to your computer and use it in GitHub Desktop.

Select an option

Save victorkurauchi/5d0f28496a74fc06b671be5ac14c85eb to your computer and use it in GitHub Desktop.
Using error boundaries in react 0.16
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { logError } from '../../store/actions/error';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
}
componentDidCatch(error, errorInfo) {
// Catch errors in any components below and re-render with error message
this.setState({
error,
errorInfo
});
this.props.logError(errorInfo);
}
render() {
if (this.state.errorInfo) {
// Error path
return (
<div>
<span>Não foi possível obter as informações necessárias, em alguns instantes normalizaremos.</span>
{/*<details style={{ whiteSpace: 'pre-wrap' }}>
{this.state.error && this.state.error.toString()}
<br />
{this.state.errorInfo.componentStack}
</details>*/}
</div>
);
}
// Normally, just render children
return this.props.children;
}
}
const mapStateToProps = (state) => {
const { error } = state;
const { errorObject, status } = error;
return {
errorObject,
status
}
}
const mapDispatchToProps = (dispatch) => {
return {
logError: (errorObject) => {
dispatch(logError(errorObject))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ErrorBoundary);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment