Setting Up Sentry

In the app SentryBy 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.

Integrating Sentry in WebView

Sentry official guidePlease refer to it for integration.

1. Initial Sentry setup

Sentry official guidePlease 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 falsemust be set to.

Native error tracking is not supported

In the Apps in Toss environment, only JavaScript errors can be tracked.

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.

npm

npm install @granite-js/plugin-sentry

pnpm

pnpm install @granite-js/plugin-sentry

yarn

yarn add @granite-js/plugin-sentry

3. Configure the plugin

The installed @granite-js/plugin-sentryto granite.config.ts in the file plugins Add it to the item. In the Apps in Toss environment, useClient the option must be falseset tomust be.

Why useClient should the option be turned off?

useClientto falseIf 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 sourcemapyou must, so you need to turn off this option.

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 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 Sentrymust be.

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

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.

npm

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

pnpm

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

yarn

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

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.