Adding error boundary using Sentry.io
This commit is contained in:
parent
8b86ddc14c
commit
6ec546ace1
43
src/components/RavenBoundary.js
Normal file
43
src/components/RavenBoundary.js
Normal 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;
|
37
src/components/RavenError.js
Normal file
37
src/components/RavenError.js
Normal 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;
|
@ -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);
|
||||
}
|
||||
|
@ -9,4 +9,4 @@ const setupRaven = () => {
|
||||
});
|
||||
};
|
||||
|
||||
export { setupRaven };
|
||||
export { Raven, setupRaven };
|
||||
|
Loading…
Reference in New Issue
Block a user