Ionic
Learn how to use Sentry with Ionic.
Sentry Capacitor supports Ionic out of the box. The documentation below is similar to our Capacitor Getting Started documentation since the setup of Capacitor and Ionic are the same.
Copied
# npm
npm install @sentry/capacitor @sentry/angular --save
# yarn
yarn add @sentry/capacitor @sentry/angular
# pnpm
pnpm add @sentry/capacitor @sentry/angular
app.module.tsCopied
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
// ___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
],
})
Was this helpful?
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").
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").