> For the complete documentation index, see [llms.txt](https://kaaerreeene.gitbook.io/front-end-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kaaerreeene.gitbook.io/front-end-guide/sentry.md).

# Sentry

Create an account or organization in [Sentry](https://sentry.io/) 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.

![](/files/-LJtWfwq-ZB9cqMeUB1n)

## Install Sentry

In your root folder, just install [RavenJS](https://docs.sentry.io/clients/javascript/) 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](https://docs.sentry.io/clients/javascript/config/).

### 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](https://reactjs.org/docs/error-boundaries.html). 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

![](/files/-LJtYrqu06SAgpmR9T0x)