Ionic

Learn how to use Sentry with Ionic.

To use Sentry with Ionic 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.

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

Copied
"config": {
    "ionic_generate_source_map": "true"
}

Enable source maps for Ionic v4:

Copied
ionic build --prod --source-map

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

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

Copied
import * as Sentry from "sentry-cordova";

Sentry.init({ dsn: "https://examplePublicKey@o0.ingest.sentry.io/0" });

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

Copied
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:

Copied
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:

Copied
@NgModule({
    ...
    providers: [
        StatusBar,
        SplashScreen,
        // {provide: ErrorHandler, useClass: IonicErrorHandler} remove this, add next line (for Ionic 4 this line doen't exist by default)
        {provide: ErrorHandler, useClass: SentryIonicErrorHandler}
    ]
})
Previous
Cordova
Next
Configuration
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").