Adding error boundary using Sentry.io

This commit is contained in:
Jeff Avallone 2018-02-11 11:18:27 -05:00
parent 8b86ddc14c
commit 6ec546ace1
4 changed files with 98 additions and 7 deletions

View File

@ -0,0 +1,43 @@
import React from 'react';
import PropTypes from 'prop-types';
import RavenError from './RavenError';
class RavenBoundary extends React.Component {
constructor() {
super();
this.state = {
error: null
};
}
componentDidCatch(error, errorInfo) {
this.setState({ error, errorInfo });
}
render() {
const { error, errorInfo } = this.state;
const { children } = this.props;
if (error) {
const errorProps = {
heading: 'An error has occurred.',
details: { extra: errorInfo },
error
};
return <RavenError { ...errorProps }/>;
} else {
return children;
}
}
}
RavenBoundary.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
};
export default RavenBoundary;

View File

@ -0,0 +1,37 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Raven } from '../sentry';
import Message from './Message';
import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
class RavenError extends React.Component {
componentDidMount() {
const { error, details } = this.props;
Raven.captureException(error, details);
}
reportError = event => {
event.preventDefault();
if (Raven.lastEventId()) {
Raven.showReportDialog();
}
}
render() {
const { heading } = this.props;
return <Message icon={ AlertIcon } heading={ heading }>
<p>This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.</p>
</Message>;
}
}
RavenError.propTypes = {
error: PropTypes.object.isRequired,
details: PropTypes.object.isRequired,
heading: PropTypes.string.isRequired
};
export default RavenError;

View File

@ -2,16 +2,27 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from '../../components/App';
import RavenBoundary from '../../components/RavenBoundary';
import '../../style.css';
import { setupServiceWorker } from '../../service-worker';
import { setupGA } from '../../analytics';
import { setupRaven } from '../../sentry';
import { Raven, setupRaven } from '../../sentry';
setupRaven();
try {
setupGA();
if (process.env.NODE_ENV === 'production') {
setupServiceWorker();
}
ReactDOM.render(<App/>, document.getElementById('root'));
ReactDOM.render(
<RavenBoundary>
<App/>
</RavenBoundary>,
document.getElementById('root'));
}
catch (e) {
Raven.captureException(e);
}

View File

@ -9,4 +9,4 @@ const setupRaven = () => {
});
};
export { setupRaven };
export { Raven, setupRaven };