CordovaIonic
Warning
We strongly recommended that you use Ionic with Capacitor. Check out our Ionic with Sentry Capacitor documentation.
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.
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:
"config": {
"ionic_generate_source_map": "true"
}
Enable source maps for Ionic v4:
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:
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:
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:
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:
@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}
]
})
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").
