# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kaaerreeene.gitbook.io/front-end-guide/sentry.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.