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

# Ionic | Sentry for Cordova

##### Warning

We strongly recommended that you use Ionic with Capacitor. Check out our [Ionic with Sentry Capacitor documentation](https://docs.sentry.io/platforms/javascript/guides/capacitor.md).

To use Sentry with [Ionic](https://ionicframework.com/) you have to add *sentry-cordova* as a dependency to you package.json.

First run `npm i --save sentry-cordova` and make sure you already added the platforms you want to support with `ionic cordova platform add ios` and/or `ionic cordova platform add android`.

After that it’s important to run `cordova plugin add sentry-cordova` without the ionic wrapper.

##### Warning

Do not run `ionic cordova plugin add sentry-cordova`. The ionic cli wrapper sucks up all the input and sentry-wizard will not be able to setup your project.

When building your app with ionic for production make sure you have source maps enabled. You have to add this to your `package.json`:

```javascript
"config": {
    "ionic_generate_source_map": "true"
}
```

Enable source maps for Ionic v4:

```bash
ionic build --prod --source-map
```

Otherwise we are not able to upload source maps to Sentry.

##### Warning

If you want to skip the automatic release version and set the release completely for yourself. You have to add this env var to disable it e.g.: `SENTRY_SKIP_AUTO_RELEASE=true ionic cordova emulate ios --prod`

To setup Sentry in your codebase, add this to your `app.module.ts`:

```javascript
import * as Sentry from "sentry-cordova";

Sentry.init({ dsn: "___PUBLIC_DSN___" });
```

In order to also use the Ionic provided `IonicErrorHandler`, we need to add `SentryIonicErrorHandler`:

```javascript
import { IonicErrorHandler } from "ionic-angular";

import * as Sentry from "sentry-cordova";

export class SentryIonicErrorHandler extends IonicErrorHandler {
  handleError(error) {
    super.handleError(error);
    try {
      Sentry.captureException(error.originalError || error);
    } catch (e) {
      console.error(e);
    }
  }
}
```

Or `ErrorHandler` for Ionic v4:

```javascript
import { ErrorHandler } from "@angular/core";

import * as Sentry from "sentry-cordova";

export class SentryIonicErrorHandler extends ErrorHandler {
  handleError(error) {
    super.handleError(error);
    try {
      Sentry.captureException(error.originalError || error);
    } catch (e) {
      console.error(e);
    }
  }
}
```

Then change the `@NgModule{providers:[]}` in `app.module.ts` to:

```javascript
@NgModule({
    ...
    providers: [
        StatusBar,
        SplashScreen,
        // {provide: ErrorHandler, useClass: IonicErrorHandler} remove this, add next line (for Ionic 4 this line doesn't exist by default)
        {provide: ErrorHandler, useClass: SentryIonicErrorHandler}
    ]
})
```