> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/ai-vibe-coding/en/integration/setting-up-sentry.md).

# Setting Up Sentry

In the app **Sentry**By integrating it, you can automatically detect and monitor errors that occur in JavaScript. This helps improve your app’s stability and provide a better experience for users.

{% hint style="info" %}
**Integrating Sentry in a WebView**

[Sentry official guide](https://docs.sentry.io/platforms/javascript/)Please refer to it for integration.
{% endhint %}

### 1. Initial Sentry setup

[Sentry official guide](https://docs.sentry.io/platforms/react-native)Please initialize Sentry in your app by referring to it.

In the App in Toss environment, the native error tracking feature cannot be used, so `enableNative` option `false`must be set to.

{% hint style="info" %}
**Native error tracking is not supported**

In the App in Toss environment, only JavaScript errors can be tracked.
{% endhint %}

```ts
import * as Sentry from '@sentry/react-native';

Sentry.init({
  // ...
  enableNative: false,
});
```

### 2. Install the Sentry plugin

In the project root directory, run the command that matches your package manager to install the Sentry plugin.

{% tabs %}
{% tab title="npm" %}

```sh
npm install @granite-js/plugin-sentry
```

{% endtab %}

{% tab title="pnpm" %}

```sh
pnpm install @granite-js/plugin-sentry
```

{% endtab %}

{% tab title="yarn" %}

```sh
yarn add @granite-js/plugin-sentry
```

{% endtab %}
{% endtabs %}

### 3. Configure the plugin

The installed `@granite-js/plugin-sentry`to `granite.config.ts` file’s `plugins` item. In the App in Toss environment, **`useClient` option must be `false`set to**.

{% hint style="info" %}
**Why `useClient` should I turn off the option?**

`useClient`to `false`If set to, Sentry source maps are not automatically uploaded when the app is built. In the App in Toss environment, you need to **upload the source maps manually**after build, so this option should be turned off.
{% endhint %}

```ts
import { defineConfig } from '@granite-js/react-native/config';
import { sentry } from '@granite-js/plugin-sentry'; // [!code highlight]
import { appsInToss } from '@apps-in-toss/framework/plugins';

export default defineConfig({
  // ...,
  plugins: [
    sentry({ useClient: false }), // [!code highlight]
    appsInToss({
      // ...
    }),
  ],
});
```

### 4. Launch the app

For how to launch the app, [mini app launch](https://appsintoss.gitbook.io/appsintoss-docs/guide/operation/deploy) refer to the documentation.

### 5. Upload source maps to Sentry

To accurately track errors in a released mini app, **upload the source maps generated after build to Sentry**.

When you run the command below, the source maps will be uploaded.

{% hint style="info" %}
**Input guide**

* `<API_KEY>`: The API key issued from the App in Toss console.
* `<APP_NAME>`: The service name registered in Sentry.
* `<DEPLOYMENT_ID>`: The deployment ID used when deploying the app.
  {% endhint %}

{% tabs %}
{% tab title="npm" %}

```sh
npx ait sentry upload-sourcemap \\
  --api-key <API_KEY> \\
  --app-name <APP_NAME> \\
  --deployment-id <DEPLOYMENT_ID>
```

{% endtab %}

{% tab title="pnpm" %}

```sh
pnpm ait sentry upload-sourcemap \\
  --api-key <API_KEY> \\
  --app-name <APP_NAME> \\
  --deployment-id <DEPLOYMENT_ID>
```

{% endtab %}

{% tab title="yarn" %}

```sh
yarn ait sentry upload-sourcemap \\
  --api-key <API_KEY> \\
  --app-name <APP_NAME> \\
  --deployment-id <DEPLOYMENT_ID>
```

{% endtab %}
{% endtabs %}

After running the command, you will be asked to enter the Sentry organization (Org), project (Project), and authentication token. Once you enter all the information, the source maps for that service will be uploaded to Sentry.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://developers-apps-in-toss.toss.im/ai-vibe-coding/en/integration/setting-up-sentry.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.