Sentry

Error Tracking Software

Create an account or organization in Sentry and a new project. Once you open the project, you will be able to see the following steps to configure Sentry in your current platform.

Install Sentry

In your root folder, just install RavenJS by running the following command:

npm i --save-dev raven-js

It is also possible to load it from their official CDN:

<script src="https://cdn.ravenjs.com/3.26.4/raven.min.js"
    crossorigin="anonymous"></script>

Configure Sentry

Next configure Raven.js to use your Sentry DSN:

Raven.config({sentry_endpoint}).install()

This should be placed in your main component that wraps the entire platform:

import * as Raven from "raven-js";
import React from "react";

Raven.config({sentry_endpoint}).install();

export const App = () => (
    <ErrorBoundary>
        <BrowserRouter>
            <Switch>
                <Route exact path={SOME_PATH} component={SomeComponent} />
            </Switch>
        </BrowserRouter>
    </ErrorBoundary>
);

Instead of adding directly the Sentry Endpoint, is better to add it in a .env file or even in a CI.

Additional settings can be found here.

Release Configuration

Sentry enables the user to filter by releases. In case you wanna send it it can be easily added with this line:

Raven.config({sentry_endpoint}, {
    release: {release}
}).install();

In case you are getting these variables from .env, you can get the app version from the package.json:

REACT_APP_VERSION=$npm_package_version

And then use it in your component like this:

Raven.config(process.env.REACT_APP_SENTRY_ENDPOINT as string, {
    release: process.env.REACT_APP_VERSION
}).install();

Emit Errors

The best approach to handle errors in React is using Error Boundaries. Just create a component to catch all the errors in your platform and send an event through Raven.

import * as Raven from "raven-js";
import React, { Component, ErrorInfo } from "react";
import { Props, State } from "./errorBoundary.type";

export class ErrorBoundary extends Component<Props, State> {
    readonly state: State = {
        hasError: false
    };

    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
        this.setState({ hasError: true });
        Raven.captureException(error, { extra: errorInfo });
    }

    render() {
        if (this.state.hasError) {
            return (
                Something went wrong
            );
        }
        return this.props.children;
    }
}

Now, just try to fake by adding throw new Error("Something wrong happened in your app") and see if this new error is reported in your project inside Sentry such as in the image below