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 ReactDOM from 'react-dom';
|
||||||
|
|
||||||
import App from '../../components/App';
|
import App from '../../components/App';
|
||||||
|
import RavenBoundary from '../../components/RavenBoundary';
|
||||||
|
|
||||||
import '../../style.css';
|
import '../../style.css';
|
||||||
import { setupServiceWorker } from '../../service-worker';
|
import { setupServiceWorker } from '../../service-worker';
|
||||||
import { setupGA } from '../../analytics';
|
import { setupGA } from '../../analytics';
|
||||||
import { setupRaven } from '../../sentry';
|
import { Raven, setupRaven } from '../../sentry';
|
||||||
|
|
||||||
setupRaven();
|
setupRaven();
|
||||||
|
|
||||||
|
try {
|
||||||
setupGA();
|
setupGA();
|
||||||
if (process.env.NODE_ENV === 'production') {
|
if (process.env.NODE_ENV === 'production') {
|
||||||
setupServiceWorker();
|
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