---
title: "Ionic"
description: "Learn how to use Sentry with Ionic."
url: https://docs.sentry.io/platforms/javascript/guides/capacitor/ionic/
---

# Ionic | Sentry for Capacitor

Sentry Capacitor supports [Ionic](https://ionicframework.com/) out of the box. The documentation below is similar to our [Capacitor Getting Started documentation](https://docs.sentry.io/platforms/javascript/guides/capacitor.md) since the setup of Capacitor and Ionic are the same.

**Angular**

```bash
# npm
npm install @sentry/capacitor @sentry/angular --save

# yarn
yarn add @sentry/capacitor @sentry/angular

# pnpm
pnpm add @sentry/capacitor @sentry/angular
```

**React**

```bash
# npm
npm install @sentry/capacitor @sentry/react --save

# yarn
yarn add @sentry/capacitor @sentry/react

# pnpm
pnpm add @sentry/capacitor @sentry/react
```

**Vue**

```bash
# npm
npm install @sentry/capacitor @sentry/vue --save

# yarn
yarn add @sentry/capacitor @sentry/vue

# pnpm
pnpm add @sentry/capacitor @sentry/vue
```

**Nuxt**

```bash
# npm
npm install @sentry/capacitor @sentry/nuxt --save

# yarn
yarn add @sentry/capacitor @sentry/nuxt

# pnpm
pnpm add @sentry/capacitor @sentry/nuxt
```

**Other**

```bash
# npm
npm install @sentry/capacitor @sentry/browser --save

# yarn
yarn add @sentry/capacitor @sentry/browser

# pnpm
pnpm add @sentry/capacitor @sentry/browser
```

**\[Angular 14+] app.module.ts**

```typescript
import * as Sentry from "@sentry/capacitor";
import * as SentryAngular from "@sentry/angular";

Sentry.init(
  {
    dsn: "___PUBLIC_DSN___",

    // Adds request headers and IP for users, for more info visit:
    // https://docs.sentry.io/platforms/javascript/guides/capacitor/configuration/options/#sendDefaultPii
    sendDefaultPii: true,

    // Set your release version, such as "getsentry@1.0.0"
    release: "my-project-name@<release-name>",
    // Set your dist version, such as "1"
    dist: "<dist>",
    // ___PRODUCT_OPTION_START___ logs
    // Logs requires @sentry/capacitor 2.0.0 or newer.
    enableLogs: true,
    // ___PRODUCT_OPTION_END___ logs
    integrations: [
      // ___PRODUCT_OPTION_START___ performance
      // Registers and configures the Tracing integration,
      // which automatically instruments your application to monitor its
      // performance, including custom Angular routing instrumentation
      Sentry.browserTracingIntegration(),
      // ___PRODUCT_OPTION_END___ performance
      // ___PRODUCT_OPTION_START___ session-replay
      // Registers the Replay integration,
      // which automatically captures Session Replays
      Sentry.replayIntegration(),
      // ___PRODUCT_OPTION_END___ session-replay
      // ___PRODUCT_OPTION_START___ user-feedback
      Sentry.feedbackIntegration({
        // Additional SDK configuration goes in here, for example:
        colorScheme: "system",
      }),
      // ___PRODUCT_OPTION_END___ user-feedback
    ],
    // ___PRODUCT_OPTION_START___ performance

    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for tracing.
    // We recommend adjusting this value in production
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
    tracesSampleRate: 1.0,

    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
    tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
    // ___PRODUCT_OPTION_END___ performance
    // ___PRODUCT_OPTION_START___ session-replay

    // Capture Replay for 10% of all sessions,
    // plus for 100% of sessions with an error
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    // ___PRODUCT_OPTION_END___ session-replay
  },
  // Forward the init method from @sentry/angular
  SentryAngular.init
);

@NgModule({
  providers: [
    {
      provide: ErrorHandler,
      // Attach the Sentry ErrorHandler
      useValue: SentryAngular.createErrorHandler(),
    },
    // ___PRODUCT_OPTION_START___ performance
    {
      provide: SentryAngular.TraceService,
      deps: [Router],
    },
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => {},
      deps: [SentryAngular.TraceService],
      multi: true,
    },
    // ___PRODUCT_OPTION_END___ performance
  ],
})
```

**\[Angular 12, 13] app.module.ts**

```typescript
// Requires @sentry/capacitor V0.
import * as Sentry from "@sentry/capacitor";
import * as SentryAngular from "@sentry/angular-ivy";

Sentry.init(
  {
    dsn: "___PUBLIC_DSN___",

    // Adds request headers and IP for users, for more info visit:
    // https://docs.sentry.io/platforms/javascript/guides/capacitor/configuration/options/#sendDefaultPii
    sendDefaultPii: true,

    // Set your release version, such as "getsentry@1.0.0"
    release: "my-project-name@<release-name>",
    // Set your dist version, such as "1"
    dist: "<dist>",
    // ___PRODUCT_OPTION_START___ logs
    // Logs requires Angular 14 or newer.
    // ___PRODUCT_OPTION_END___ logs
    integrations: [
      // ___PRODUCT_OPTION_START___ performance
      // Registers and configures the Tracing integration,
      // which automatically instruments your application to monitor its
      // performance, including custom Angular routing instrumentation
      new Sentry.BrowserTracing(),
      // ___PRODUCT_OPTION_END___ performance
      // ___PRODUCT_OPTION_START___ session-replay
      // Registers the Replay integration,
      // which automatically captures Session Replays
      new Sentry.Replay(),
      // ___PRODUCT_OPTION_END___ session-replay
      // ___PRODUCT_OPTION_START___ user-feedback
      Sentry.feedbackIntegration({
        // Additional SDK configuration goes in here, for example:
        colorScheme: "system",
      }),
      // ___PRODUCT_OPTION_END___ user-feedback
    ],

    // ___PRODUCT_OPTION_START___ performance
    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for tracing.
    // We recommend adjusting this value in production
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
    tracesSampleRate: 1.0,

    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
    tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
    // ___PRODUCT_OPTION_END___ performance
    // ___PRODUCT_OPTION_START___ session-replay

    // Capture Replay for 10% of all sessions,
    // plus for 100% of sessions with an error
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    // ___PRODUCT_OPTION_END___ session-replay
  },
  // Forward the init method from @sentry/angular
  SentryAngular.init
);

@NgModule({
  providers: [
    {
      provide: ErrorHandler,
      // Attach the Sentry ErrorHandler
      useValue: SentryAngular.createErrorHandler(),
    },
    {
      provide: SentryAngular.TraceService,
      deps: [Router],
    },
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => {},
      deps: [SentryAngular.TraceService],
      multi: true,
    },
  ],
})
```

**\[React] index.tsx**

```typescript
import * as Sentry from "@sentry/capacitor";
import * as SentryReact from "@sentry/react";

Sentry.init(
  {
    dsn: "___PUBLIC_DSN___",

    // Adds request headers and IP for users, for more info visit:
    // https://docs.sentry.io/platforms/javascript/guides/capacitor/configuration/options/#sendDefaultPii
    sendDefaultPii: true,

    // Set your release version, such as "getsentry@1.0.0"
    release: "my-project-name@<release-name>",
    // Set your dist version, such as "1"
    dist: "<dist>",
    // ___PRODUCT_OPTION_START___ logs
    // Logs requires @sentry/capacitor 2.0.0 or newer.
    enableLogs: true,
    // ___PRODUCT_OPTION_END___ logs
    integrations: [
      // ___PRODUCT_OPTION_START___ performance
      // Registers and configures the Tracing integration,
      // which automatically instruments your application to monitor its
      // performance, including custom Angular routing instrumentation
      Sentry.browserTracingIntegration(),
      // ___PRODUCT_OPTION_END___ performance
      // ___PRODUCT_OPTION_START___ session-replay
      // Registers the Replay integration,
      // which automatically captures Session Replays
      Sentry.replayIntegration(),
      // ___PRODUCT_OPTION_END___ session-replay
      // ___PRODUCT_OPTION_START___ user-feedback
      Sentry.feedbackIntegration({
        // Additional SDK configuration goes in here, for example:
        colorScheme: "system",
      }),
      // ___PRODUCT_OPTION_END___ user-feedback
    ],
    // ___PRODUCT_OPTION_START___ performance

    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for tracing.
    // We recommend adjusting this value in production
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
    tracesSampleRate: 1.0,

    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
    tracePropagationTargets: [
      "localhost",
      /^https:\/\/yourserver\.io\/api/,
    ],
    // ___PRODUCT_OPTION_END___ performance
    // ___PRODUCT_OPTION_START___ session-replay

    // Capture Replay for 10% of all sessions,
    // plus for 100% of sessions with an error
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    // ___PRODUCT_OPTION_END___ session-replay
  },
  // Forward the init method from @sentry/react
  SentryReact.init,
);
```

**\[Vue] main.ts**

```typescript
import * as Sentry from "@sentry/capacitor";
import * as SentryVue from "@sentry/vue";
import { createApp } from "vue";

const app = createApp(App);

Sentry.init(
  {
    dsn: "___PUBLIC_DSN___",

    // Vue specific settings.
    siblingOptions: {
      vueOptions: {
        app: app,
        attachErrorHandler: false,
        attachProps: true,
      },
    },

    // Adds request headers and IP for users, for more info visit:
    // https://docs.sentry.io/platforms/javascript/guides/capacitor/configuration/options/#sendDefaultPii
    sendDefaultPii: true,

    // Set your release version, such as "getsentry@1.0.0"
    release: "my-project-name@<release-name>",
    // Set your dist version, such as "1"
    dist: "<dist>",
    // ___PRODUCT_OPTION_START___ logs
    // Logs requires @sentry/capacitor 2.0.0 or newer.
    enableLogs: true,
    // ___PRODUCT_OPTION_END___ logs
    integrations: [
      // ___PRODUCT_OPTION_START___ performance
      // Registers and configures the Tracing integration,
      // which automatically instruments your application to monitor its
      // performance, including custom Angular routing instrumentation
      Sentry.browserTracingIntegration(),
      // ___PRODUCT_OPTION_END___ performance
      // ___PRODUCT_OPTION_START___ session-replay
      // Registers the Replay integration,
      // which automatically captures Session Replays
      Sentry.replayIntegration(),
      // ___PRODUCT_OPTION_END___ session-replay
      // ___PRODUCT_OPTION_START___ user-feedback
      Sentry.feedbackIntegration({
        // Additional SDK configuration goes in here, for example:
        colorScheme: "system",
      }),
      // ___PRODUCT_OPTION_END___ user-feedback
    ],
    // ___PRODUCT_OPTION_START___ performance

    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for tracing.
    // We recommend adjusting this value in production
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
    tracesSampleRate: 1.0,

    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
    tracePropagationTargets: [
      "localhost",
      /^https:\/\/yourserver\.io\/api/,
    ],
    // ___PRODUCT_OPTION_END___ performance
    // ___PRODUCT_OPTION_START___ session-replay

    // Capture Replay for 10% of all sessions,
    // plus for 100% of sessions with an error
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    // ___PRODUCT_OPTION_END___ session-replay
  },

  // Forward the init method from @sentry/vue
  SentryVue.init,
);
```

**\[Nuxt] sentry.client.config.ts**

```typescript
import * as Sentry from "@sentry/capacitor";
import * as SentryNuxt from "@sentry/nuxt";

Sentry.init(
  {
    dsn: "___PUBLIC_DSN___",
    // Adds request headers and IP for users, for more info visit:
    // https://docs.sentry.io/platforms/javascript/guides/capacitor/configuration/options/#sendDefaultPii
    sendDefaultPii: true,

    // Set your release version, such as "getsentry@1.0.0"
    release: "my-project-name@<release-name>",
    // Set your dist version, such as "1"
    dist: "<dist>",
    // ___PRODUCT_OPTION_START___ logs
    // Logs requires @sentry/capacitor 2.0.0 or newer.
    enableLogs: true,
    // ___PRODUCT_OPTION_END___ logs
    integrations: [
      // ___PRODUCT_OPTION_START___ performance
      // Registers and configures the Tracing integration,
      // which automatically instruments your application to monitor its
      // performance, including custom Angular routing instrumentation
      Sentry.browserTracingIntegration(),
      // ___PRODUCT_OPTION_END___ performance
      // ___PRODUCT_OPTION_START___ session-replay
      // Registers the Replay integration,
      // which automatically captures Session Replays
      Sentry.replayIntegration(),
      // ___PRODUCT_OPTION_END___ session-replay
      // ___PRODUCT_OPTION_START___ user-feedback
      Sentry.feedbackIntegration({
        // Additional SDK configuration goes in here, for example:
        colorScheme: "system",
      }),
      // ___PRODUCT_OPTION_END___ user-feedback
    ],
    // ___PRODUCT_OPTION_START___ performance

    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for tracing.
    // We recommend adjusting this value in production
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
    tracesSampleRate: 1.0,

    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
    tracePropagationTargets: [
      "localhost",
      /^https:\/\/yourserver\.io\/api/,
    ],
    // ___PRODUCT_OPTION_END___ performance
    // ___PRODUCT_OPTION_START___ session-replay

    // Capture Replay for 10% of all sessions,
    // plus for 100% of sessions with an error
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    // ___PRODUCT_OPTION_END___ session-replay
  },

  // Forward the init method from @sentry/nuxt
  SentryNuxt.init,
);
```

**\[Other] main.(ts|js)**

```javascript
import * as Sentry from "@sentry/capacitor";
// ___PRODUCT_OPTION_START___ user-feedback
import { feedbackIntegration } from "@sentry/browser";
// ___PRODUCT_OPTION_END___ user-feedback

Sentry.init({
  dsn: "___PUBLIC_DSN___",

  // Adds request headers and IP for users, for more info visit:
  // https://docs.sentry.io/platforms/javascript/guides/capacitor/configuration/options/#sendDefaultPii
  sendDefaultPii: true,

  // Set your release version, such as "getsentry@1.0.0"
  release: "my-project-name@<release-name>",
  // Set your dist version, such as "1"
  dist: "<dist>",
  // ___PRODUCT_OPTION_START___ logs
  // Logs requires @sentry/capacitor 2.0.0 or newer.
  enableLogs: true,
  // ___PRODUCT_OPTION_END___ logs
  integrations: [
    // ___PRODUCT_OPTION_START___ performance
    // Registers and configures the Tracing integration,
    // which automatically instruments your application to monitor its
    // performance, including custom Angular routing instrumentation
    Sentry.browserTracingIntegration(),
    // ___PRODUCT_OPTION_END___ performance
    // ___PRODUCT_OPTION_START___ session-replay
    // Registers the Replay integration,
    // which automatically captures Session Replays
    Sentry.replayIntegration(),
    // ___PRODUCT_OPTION_END___ session-replay
    // ___PRODUCT_OPTION_START___ user-feedback
    feedbackIntegration({
      // Additional SDK configuration goes in here, for example:
      colorScheme: "system",
    }),
    // ___PRODUCT_OPTION_END___ user-feedback
  ],
  // ___PRODUCT_OPTION_START___ performance

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  // We recommend adjusting this value in production
  // Learn more at
  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
  // ___PRODUCT_OPTION_END___ performance
  // ___PRODUCT_OPTION_START___ session-replay

  // Capture Replay for 10% of all sessions,
  // plus for 100% of sessions with an error
  // Learn more at
  // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  // ___PRODUCT_OPTION_END___ session-replay
});
```