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

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

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

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

`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
  ],
})
```