> 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 Sentry, you can automatically detect and monitor errors that occur in JavaScript. This helps improve app stability and provides users with a better experience.

{% hint style="info" %}
**Integrating Sentry in 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 refer to it to initialize Sentry in the app.

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

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

In the Apps 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 appropriate for 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` in the file `plugins` Add it to the item. In the Apps in Toss environment, **`useClient` the option must be `false`set to**must be.

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

`useClient`to `false`If set to this, sourcemaps will not be automatically uploaded to Sentry when the app is built. In the Apps in Toss environment, after building **manually upload the sourcemap**you must, so you need to turn off this option.
{% 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) please refer to the documentation.

### 5. Upload sourcemaps to Sentry

To accurately track errors in the launched mini app, the generated after build **upload the sourcemap to Sentry**must be.

If you run the command below, the sourcemap will be uploaded.

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

* `<API_KEY>`: This is the API key issued in the Apps in Toss console.
* `<APP_NAME>`: This is the service name registered in Sentry.
* `<DEPLOYMENT_ID>`: This is 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 prompted to enter Sentry's organization (Org), project (Project), and authentication token. Once you enter all the information, the service's sourcemap 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.