From 4d2498df67159468fab212a055e34c445acc02d5 Mon Sep 17 00:00:00 2001 From: Sarah Mischinger Date: Thu, 12 Feb 2026 14:34:03 +0100 Subject: [PATCH 1/6] rough draft --- .../javascript/guides/capacitor/index.mdx | 181 ++++++++++++++---- 1 file changed, 143 insertions(+), 38 deletions(-) diff --git a/docs/platforms/javascript/guides/capacitor/index.mdx b/docs/platforms/javascript/guides/capacitor/index.mdx index 5435a6d6f16d0..95d35e6f330c1 100644 --- a/docs/platforms/javascript/guides/capacitor/index.mdx +++ b/docs/platforms/javascript/guides/capacitor/index.mdx @@ -1,6 +1,6 @@ --- title: Capacitor -description: Sentry's Capacitor SDK enables automatic reporting of errors, exceptions, and messages. It includes native crash support on iOS and Android. +description: Learn how to set up Sentry in your Capacitor application, capture your first errors and traces, and view them in Sentry. sdk: sentry.javascript.capacitor categories: - javascript @@ -8,11 +8,19 @@ categories: - mobile --- -## Install + -Sentry captures data by using an SDK within your application's runtime. + + +This guide will show you setup instructions for Angular, React, Vue, and Nuxt. If you use any other JavaScript framework (or none at all) with Capacitor, follow the vanilla instructions outlined under "Other". + + + +## Step 1: Install -Install the Sentry Capacitor SDK alongside the corresponding Sentry SDK for the framework you're using: +### Install the Sentry SDK + +Run the command for your preferred package manager to add Sentry's Capacitor SDK and the SDK for the framework you're using to your application: ```bash {tabTitle:Angular} # npm @@ -69,36 +77,51 @@ yarn add @sentry/capacitor @sentry/browser pnpm add @sentry/capacitor @sentry/browser ``` -### Angular Version Compatibility + -Currently, the Sentry Capacitor SDK only supports Angular 14 and newer. +#### Angular -If you're using an older version of Angular, you also need to use an older version of the SDK. See the table below for compatibility guidance: +Currently, the Sentry Capacitor SDK only supports Angular 14 and newer. If you're using an older version of Angular, you also need to use an older version of the SDK. See this table for compatibility guidance: -| Angular version | Recommended Sentry SDK | -| --------------- | --------------------------------------------------- | -| 14 and newer | `@sentry/capacitor` `@sentry/angular` | -| 12 or 13 | `@sentry/capacitor^0` `@sentry/angular-ivy@^7` * | -| 10 or 11 | `@sentry/capacitor^0` `@sentry/angular@^7` * | +| Angular version | Recommended Sentry SDK | +| --------------- | ------------------------------------------------- | +| 14 and newer | `@sentry/capacitor` `@sentry/angular` | +| 12 or 13 | `@sentry/capacitor^0` `@sentry/angular-ivy@^7` \* | +| 10 or 11 | `@sentry/capacitor^0` `@sentry/angular@^7` \* | \* These versions of the SDK are no longer maintained or tested. Version 0 might still receive bug fixes, but we don't guarantee support. -### React and Vue Version Compatibility +### React and Vue -Both Frameworks are fully compatible with the current and beta versions of Sentry Capacitor. +Both frameworks are fully compatible with the current and beta versions of Sentry Capacitor. -## Configure +### Others (Svelte, Solid, etc.) -In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). +Use the "vanilla" setup with `@sentry/browser`. + + + +## Step 2: Configure + +Choose the features you want to configure, and this guide will show you how: -Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + - + -Configuration should happen as early as possible in your application's lifecycle. +### Initialize the Sentry SDK -Then forward the `init` method from the sibling Sentry SDK for the framework you use, such as Angular in this example: +Initialize Sentry as early as possible in your application's lifecycle. +If you're using Angular, React, Vue, or Nuxt, make sure to forward the `init` method from the framework's Sentry SDK, as you can see in these code snippets. If you're following the vanilla setup, you don't need to do this. ```typescript {tabTitle: Angular 14+} {filename: app.module.ts} import * as Sentry from "@sentry/capacitor"; @@ -107,11 +130,11 @@ 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@", // Set your dist version, such as "1" @@ -202,7 +225,7 @@ import * as SentryAngular from "@sentry/angular-ivy"; 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, @@ -287,7 +310,7 @@ import * as SentryReact from "@sentry/react"; 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, @@ -303,7 +326,7 @@ Sentry.init( beforeSendLog: (log) => { // Add custom filters to logs. return log; - } + }, }, // ___PRODUCT_OPTION_END___ logs integrations: [ @@ -355,15 +378,15 @@ Sentry.init( ```typescript {tabTitle: Vue} {filename: main.ts} import * as Sentry from "@sentry/capacitor"; import * as SentryVue from "@sentry/vue"; -import { createApp } from 'vue' +import { createApp } from "vue"; -const app = createApp(App) +const app = createApp(App); Sentry.init( { app, 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, @@ -379,7 +402,7 @@ Sentry.init( beforeSendLog: (log) => { // Add custom filters to logs. return log; - } + }, }, // ___PRODUCT_OPTION_END___ logs integrations: [ @@ -436,7 +459,7 @@ import * as SentryNuxt from "@sentry/nuxt"; 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, @@ -452,7 +475,7 @@ Sentry.init( beforeSendLog: (log) => { // Add custom filters to logs. return log; - } + }, }, // ___PRODUCT_OPTION_END___ logs integrations: [ @@ -502,9 +525,81 @@ Sentry.init( ); ``` -You can also use the features available with the Sentry SDK for the framework you use, such as [Angular](/platforms/javascript/guides/angular/). +```javascript {tabTitle: Other} {filename: entry-file.(ts|js)} +import * as Sentry from "@sentry/capacitor"; +// ___PRODUCT_OPTION_START___ user-feedback +import { feedbackIntegration } from "@sentry/browser"; +// ___PRODUCT_OPTION_END___ user-feedback + +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@", + // Set your dist version, such as "1" + dist: "", + // ___PRODUCT_OPTION_START___ logs + // Logs requires @sentry/capacitor 2.0.0 or newer. + _experiments: { + enableLogs: true, + beforeSendLog: (log) => { + // Add custom filters to logs. + return log; + }, + }, + // ___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 + 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 +}); +``` -### Source Maps +## Step 3: Add Readable Stack Traces With Source Maps (Optional) + + + + You will need to upload source maps to make sense of the events you receive in Sentry. @@ -530,19 +625,25 @@ find ./ios/App/App/public -type f -name '*.map' -delete # Optional, removes sour ``` -If you are building your project using `ionic capacitor build`, you must upload the source maps from the native app folder (e.g., android/app/build/assets) — not from the `outputPath` defined in your web project (like `www` or `dist`). + If you are building your project using `ionic capacitor build`, you must + upload the source maps from the native app folder (e.g., + android/app/build/assets) — not from the `outputPath` defined in your web + project (like `www` or `dist`). - Learn more about uploading [source maps](/platforms/javascript/guides/capacitor/sourcemaps/). -### Provide Native Debug Information (iOS) + + +## Step 4: Provide Native Debug Information for iOS (Optional) To make stack-trace information for native crashes on iOS easier to understand, you need to provide debug information to Sentry. Debug information is provided by [uploading dSYM files](/platforms/javascript/guides/capacitor/dsym). -## Verify +## Step 5: Verify + +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. +### Issues ```javascript import * as Sentry from "@sentry/capacitor"; @@ -563,3 +664,7 @@ Learn more about manually capturing an error or message in our To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). + +You can also use the features available with the Sentry SDK for the framework you use, such as [Angular](/platforms/javascript/guides/angular/). From e0cc54d08f792c196ac744afdc78c2ee4eb2e82d Mon Sep 17 00:00:00 2001 From: Sarah Mischinger Date: Tue, 17 Feb 2026 13:47:45 +0100 Subject: [PATCH 2/6] update Capacitor quick start guide --- .../javascript/guides/capacitor/index.mdx | 727 ++++-------------- includes/sentry-cli-sourcemaps.mdx | 48 ++ .../javascript.capacitor.mdx | 470 +++++++++++ .../javascript.capacitor.mdx | 54 ++ 4 files changed, 735 insertions(+), 564 deletions(-) create mode 100644 platform-includes/getting-started-config/javascript.capacitor.mdx create mode 100644 platform-includes/getting-started-install/javascript.capacitor.mdx diff --git a/docs/platforms/javascript/guides/capacitor/index.mdx b/docs/platforms/javascript/guides/capacitor/index.mdx index ca87120385b67..19cfc4631dbe9 100644 --- a/docs/platforms/javascript/guides/capacitor/index.mdx +++ b/docs/platforms/javascript/guides/capacitor/index.mdx @@ -22,60 +22,7 @@ This guide will show you setup instructions for Angular, React, Vue, and Nuxt. I Run the command for your preferred package manager to add Sentry's Capacitor SDK and the SDK for the framework you're using to your application: -```bash {tabTitle:Angular} -# npm -npm install @sentry/capacitor @sentry/angular --save - -# yarn -yarn add @sentry/capacitor @sentry/angular - -# pnpm -pnpm add @sentry/capacitor @sentry/angular -``` - -```bash {tabTitle:React} -# npm -npm install @sentry/capacitor @sentry/react --save - -# yarn -yarn add @sentry/capacitor @sentry/react - -# pnpm -pnpm add @sentry/capacitor @sentry/react -``` - -```bash {tabTitle:Vue} -# npm -npm install @sentry/capacitor @sentry/vue --save - -# yarn -yarn add @sentry/capacitor @sentry/vue - -# pnpm -pnpm add @sentry/capacitor @sentry/vue -``` - -```bash {tabTitle:Nuxt} -# npm -npm install @sentry/capacitor @sentry/nuxt --save - -# yarn -yarn add @sentry/capacitor @sentry/nuxt - -# pnpm -pnpm add @sentry/capacitor @sentry/nuxt -``` - -```bash {tabTitle:Other} -# npm -npm install @sentry/capacitor @sentry/browser --save - -# yarn -yarn add @sentry/capacitor @sentry/browser - -# pnpm -pnpm add @sentry/capacitor @sentry/browser -``` + @@ -95,10 +42,6 @@ Currently, the Sentry Capacitor SDK only supports Angular 14 and newer. If you'r Both frameworks are fully compatible with the current and beta versions of Sentry Capacitor. -### Others (Svelte, Solid, etc.) - -Use the "vanilla" setup with `@sentry/browser`. - ## Step 2: Configure @@ -123,549 +66,205 @@ Initialize Sentry as early as possible in your application's lifecycle. If you're using Angular, React, Vue, or Nuxt, make sure to forward the `init` method from the framework's Sentry SDK, as you can see in these code snippets. If you're following the vanilla setup, you don't need to do this. -```typescript {tabTitle: Angular 14+} {filename: app.module.ts} -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@", - // Set your dist version, such as "1" - dist: "", - // ___PRODUCT_OPTION_START___ logs - // Logs requires @sentry/capacitor 2.0.0 or newer. - _experiments: { - enableLogs: true, - beforeSendLog: (log) => { - // Add custom filters to logs. - return log; - } - }, - // ___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 - ], -}) -``` + -```typescript {tabTitle: Angular 12, 13} {filename: app.module.ts} -// Requires @sentry/capacitor V0. -import * as Sentry from "@sentry/capacitor"; -import * as SentryAngular from "@sentry/angular-ivy"; - -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@", - // Set your dist version, such as "1" - dist: "", - // ___PRODUCT_OPTION_START___ logs - // Logs requires Angular 14 or newer. - // ___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 - new Sentry.BrowserTracing(), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay - // Registers the Replay integration, - // which automatically captures Session Replays - new Sentry.Replay(), - // ___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(), - }, - { - provide: SentryAngular.TraceService, - deps: [Router], - }, - { - provide: APP_INITIALIZER, - useFactory: () => () => {}, - deps: [SentryAngular.TraceService], - multi: true, - }, - ], -}) -``` +## Step 3: Add Readable Stack Traces With Source Maps (Optional) -```typescript {tabTitle: React} {filename: index.tsx} -import * as Sentry from "@sentry/capacitor"; -import * as SentryReact from "@sentry/react"; - -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@", - // Set your dist version, such as "1" - dist: "", - // ___PRODUCT_OPTION_START___ logs - // Logs requires @sentry/capacitor 2.0.0 or newer. - enableLogs: true, - beforeSendLog: (log) => { - // Add custom filters to logs. - return log; - }, - // ___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/react - SentryReact.init -); -``` + -```typescript {tabTitle: Vue} {filename: main.ts} -import * as Sentry from "@sentry/capacitor"; -import * as SentryVue from "@sentry/vue"; -import { createApp } from "vue"; +## Step 4: Provide Native Debug Information for iOS (Optional) -const app = createApp(App); +You need to provide debug information to Sentry to make the stack-trace information for native crashes on iOS easier to understand. You can provide debug information by [uploading dSYM files](/platforms/javascript/guides/capacitor/dsym). -Sentry.init( - { - dsn: "___PUBLIC_DSN___", +## Step 5: Verify - // Vue specific settings. - siblingOptions: { - vueOptions: { - app: app, - attachErrorHandler: false, - attachProps: true, - }, - }, - - // 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@", - // Set your dist version, such as "1" - dist: "", - // ___PRODUCT_OPTION_START___ logs - // Logs requires @sentry/capacitor 2.0.0 or newer. - enableLogs: true, - beforeSendLog: (log) => { - // Add custom filters to logs. - return log; - }, - // ___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/vue - SentryVue.init -); +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. + +### Issues + +To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button and logic: + +```javascript {tabTitle: Angular 12, 13, 14+} +@Component({ + selector: "app-root", + template: ` + + ` +}) +class AppComponent { + // ... + throwError(): void { + throw new Error("Sentry Test Error"); + } +} ``` -```typescript {tabTitle: Nuxt} {filename: sentry.client.config.ts} -import * as Sentry from "@sentry/capacitor"; -import * as SentryNuxt from "@sentry/nuxt"; - -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@", - // Set your dist version, such as "1" - dist: "", - // ___PRODUCT_OPTION_START___ logs - // Logs requires @sentry/capacitor 2.0.0 or newer. - enableLogs: true, - beforeSendLog: (log) => { - // Add custom filters to logs. - return log; - }, - // ___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/nuxt - SentryNuxt.init -); +```javascript {tabTitle: React} + ``` -```javascript {tabTitle: Other} {filename: entry-file.(ts|js)} -import * as Sentry from "@sentry/capacitor"; -// ___PRODUCT_OPTION_START___ user-feedback -import { feedbackIntegration } from "@sentry/browser"; -// ___PRODUCT_OPTION_END___ user-feedback - -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@", - // Set your dist version, such as "1" - dist: "", - // ___PRODUCT_OPTION_START___ logs - // Logs requires @sentry/capacitor 2.0.0 or newer. - _experiments: { - enableLogs: true, - beforeSendLog: (log) => { - // Add custom filters to logs. - return log; - }, - }, - // ___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 - 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 -}); +```javascript {tabTitle: Vue} + + +export default { + // ... + methods: { + throwError() { + throw new Error('Sentry Error'); + } + } +}; ``` -## Step 3: Add Readable Stack Traces With Source Maps (Optional) +```html {tabTitle: Nuxt} + - + +``` - +```html {tabTitle: Other} + -You will need to upload source maps to make sense of the events you receive in Sentry. + +``` -If you are using Capacitor with Ionic-Angular, upload your outputPath folder (typically `www` or `dist`) on **every build** you release. The values for `` and `` must match the values passed into `Sentry.init` for events to be deminified correctly. + + Open the page in a browser and click the button to trigger a frontend error. + -```bash {tabTitle: Ionic Build & others} -sentry-cli sourcemaps inject --org ___ORG_SLUG___ --project ___PROJECT_SLUG___ ./www -sentry-cli sourcemaps upload --release --dist ./www -``` + -```bash {tabTitle: Ionic Capacitor Build} + -# Android -sentry-cli sourcemaps inject --org ___ORG_SLUG___ --project ___PROJECT_SLUG___ ./android/app/src/main/assets/public -sentry-cli sourcemaps upload --org ___ORG_SLUG___ --project ___PROJECT_SLUG___ --release --dist ./android/app/src/main/assets/public -find ./android/app/src/main/assets/public -type f -name '*.map' -delete # Optional, removes sourcemaps from the mobile app. +### Tracing -# iOS -sentry-cli sourcemaps inject --org ___ORG_SLUG___ --project ___PROJECT_SLUG___ ./ios/App/App/public -sentry-cli sourcemaps upload --org ___ORG_SLUG___ --project ___PROJECT_SLUG___ --release --dist ./ios/App/App/public, -find ./ios/App/App/public -type f -name '*.map' -delete # Optional, removes sourcemaps from the mobile app. +To test your tracing configuration, update the previous code snippet and wrap the error in a custom span: + +```javascript {tabTitle: Angular 12, 13, 14+} +import * as Sentry from "@sentry/capacitor"; +@Component({ + selector: "app-root", + template: ` + + ` +}) +class AppComponent { + // ... + throwError(): void { + Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, () => { + throw new Error("Sentry Test Error"); + }); + } +} ``` - - If you are building your project using `ionic capacitor build`, you must - upload the source maps from the native app folder (e.g., - android/app/build/assets) — not from the `outputPath` defined in your web - project (like `www` or `dist`). - +```javascript {tabTitle: React} +import * as Sentry from "@sentry/capacitor"; -Learn more about uploading [source maps](/platforms/javascript/guides/capacitor/sourcemaps/). +; +``` - +```javascript {tabTitle: Vue} +import * as Sentry from "@sentry/capacitor"; -## Step 4: Provide Native Debug Information for iOS (Optional) + + +export default { + // ... + methods: { + throwError() { + Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, async () => { + throw new Error("Sentry Error"); + }); + } + } +}; +``` -To make stack-trace information for native crashes on iOS easier to understand, you need to provide debug information to Sentry. Debug information is provided by [uploading dSYM files](/platforms/javascript/guides/capacitor/dsym). +```html {tabTitle: Nuxt} + + + +``` -## Step 5: Verify +```html {tabTitle: Other} + -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. + +``` -```javascript -import * as Sentry from "@sentry/capacitor"; +Open the page in a browser and click the button to trigger a frontend error and trace. -Sentry.captureException("Test Captured Exception"); -``` + -You can also throw an error anywhere in your application: +### View Captured Data in Sentry -```javascript -throw new Error(`Test Thrown Error`); -``` +Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + -Learn more about manually capturing an error or message in our Usage documentation. +## Next Steps - +At this point, you should have integrated Sentry into your Capacitor application and should already be sending data to your Sentry project. -To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. +Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are: -In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). +- Learn how to use Sentry with Ionic +- Continue to customize your configuration +- Learn how to manually capture errors +- Make use of framework-specific features, such as [Angular](/platforms/javascript/guides/angular/features/), [Vue](/platforms/javascript/guides/vue/features/), [React](/platforms/javascript/guides/react/features/), or [Nuxt](/platforms/javascript/guides/nuxt/features/) -You can also use the features available with the Sentry SDK for the framework you use, such as [Angular](/platforms/javascript/guides/angular/). + +- Find various topics in Troubleshooting +- [Get support](https://sentry.zendesk.com/hc/en-us/) + + diff --git a/includes/sentry-cli-sourcemaps.mdx b/includes/sentry-cli-sourcemaps.mdx index a89cafd6c8e36..d87f379054b94 100644 --- a/includes/sentry-cli-sourcemaps.mdx +++ b/includes/sentry-cli-sourcemaps.mdx @@ -24,10 +24,30 @@ Debug IDs are used to match the stack frame of an event with its corresponding m To inject Debug IDs, use the following command: + + +```bash {tabTitle: Ionic Build & others} +sentry-cli sourcemaps inject --org ./www +``` + +```bash {tabTitle: Ionic Capacitor Build} +# Android +sentry-cli sourcemaps inject --org ./android/app/src/main/assets/public + +# iOS +sentry-cli sourcemaps inject --org ./ios/App/App/public +``` + + + + + ```bash sentry-cli sourcemaps inject /path/to/directory ``` + + #### Verify Debug IDs Were Injected in Artifacts Minified source files should contain at the end a comment named `debugId` like: @@ -52,10 +72,38 @@ Source maps should contain a field named `debug_id` like: After you've injected Debug IDs into your artifacts, upload them using the following command. + + +```bash {tabTitle: Ionic Build & others} +sentry-cli sourcemaps upload --release --dist ./www +``` + +```bash {tabTitle: Ionic Capacitor Build} + +# Android +sentry-cli sourcemaps upload --release --dist ./android/app/src/main/assets/public +find ./android/app/src/main/assets/public -type f -name '*.map' -delete # Optional, removes sourcemaps from the mobile app. + +# iOS +sentry-cli sourcemaps upload --release --dist ./ios/App/App/public +find ./ios/App/App/public -type f -name '*.map' -delete # Optional, removes sourcemaps from the mobile app. + +``` + + +Run these commands for every production build. The `` and `` values must match the values you pass to `Sentry.init` for events to be deminified correctly. + + + + + + ```bash sentry-cli sourcemaps upload /path/to/directory ``` + + #### Verify That Artifact Bundles Were Uploaded Open up Sentry and navigate to **Project Settings > Source Maps**. If you choose “Artifact Bundles” in the tabbed navigation, you'll see all the artifact bundles that have been successfully uploaded to Sentry. diff --git a/platform-includes/getting-started-config/javascript.capacitor.mdx b/platform-includes/getting-started-config/javascript.capacitor.mdx new file mode 100644 index 0000000000000..57cbaa641c94c --- /dev/null +++ b/platform-includes/getting-started-config/javascript.capacitor.mdx @@ -0,0 +1,470 @@ +```typescript {tabTitle: Angular 14+} {filename: app.module.ts} +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@", + // Set your dist version, such as "1" + dist: "", + // ___PRODUCT_OPTION_START___ logs + // Logs requires @sentry/capacitor 2.0.0 or newer. + _experiments: { + enableLogs: true, + beforeSendLog: (log) => { + // Add custom filters to logs. + return log; + } + }, + // ___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 + ], +}) +``` + +```typescript {tabTitle: Angular 12, 13} {filename: app.module.ts} +// Requires @sentry/capacitor V0. +import * as Sentry from "@sentry/capacitor"; +import * as SentryAngular from "@sentry/angular-ivy"; + +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@", + // Set your dist version, such as "1" + dist: "", + // ___PRODUCT_OPTION_START___ logs + // Logs requires Angular 14 or newer. + // ___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 + new Sentry.BrowserTracing(), + // ___PRODUCT_OPTION_END___ performance + // ___PRODUCT_OPTION_START___ session-replay + // Registers the Replay integration, + // which automatically captures Session Replays + new Sentry.Replay(), + // ___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(), + }, + { + provide: SentryAngular.TraceService, + deps: [Router], + }, + { + provide: APP_INITIALIZER, + useFactory: () => () => {}, + deps: [SentryAngular.TraceService], + multi: true, + }, + ], +}) +``` + +```typescript {tabTitle: React} {filename: index.tsx} +import * as Sentry from "@sentry/capacitor"; +import * as SentryReact from "@sentry/react"; + +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@", + // Set your dist version, such as "1" + dist: "", + // ___PRODUCT_OPTION_START___ logs + // Logs requires @sentry/capacitor 2.0.0 or newer. + enableLogs: true, + beforeSendLog: (log) => { + // Add custom filters to logs. + return log; + }, + // ___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/react + SentryReact.init +); +``` + +```typescript {tabTitle: Vue} {filename: main.ts} +import * as Sentry from "@sentry/capacitor"; +import * as SentryVue from "@sentry/vue"; +import { createApp } from "vue"; + +const app = createApp(App); + +Sentry.init( + { + dsn: "___PUBLIC_DSN___", + + // Vue specific settings. + siblingOptions: { + vueOptions: { + app: app, + attachErrorHandler: false, + attachProps: true, + }, + }, + + // 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@", + // Set your dist version, such as "1" + dist: "", + // ___PRODUCT_OPTION_START___ logs + // Logs requires @sentry/capacitor 2.0.0 or newer. + enableLogs: true, + beforeSendLog: (log) => { + // Add custom filters to logs. + return log; + }, + // ___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/vue + SentryVue.init +); +``` + +```typescript {tabTitle: Nuxt} {filename: sentry.client.config.ts} +import * as Sentry from "@sentry/capacitor"; +import * as SentryNuxt from "@sentry/nuxt"; + +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@", + // Set your dist version, such as "1" + dist: "", + // ___PRODUCT_OPTION_START___ logs + // Logs requires @sentry/capacitor 2.0.0 or newer. + enableLogs: true, + beforeSendLog: (log) => { + // Add custom filters to logs. + return log; + }, + // ___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/nuxt + SentryNuxt.init +); +``` + +```javascript {tabTitle: Other} {filename: main.(ts|js)} +import * as Sentry from "@sentry/capacitor"; +// ___PRODUCT_OPTION_START___ user-feedback +import { feedbackIntegration } from "@sentry/browser"; +// ___PRODUCT_OPTION_END___ user-feedback + +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@", + // Set your dist version, such as "1" + dist: "", + // ___PRODUCT_OPTION_START___ logs + // Logs requires @sentry/capacitor 2.0.0 or newer. + enableLogs: true, + beforeSendLog: (log) => { + // Add custom filters to logs. + return log; + }, + // ___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 + 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 +}); +``` diff --git a/platform-includes/getting-started-install/javascript.capacitor.mdx b/platform-includes/getting-started-install/javascript.capacitor.mdx new file mode 100644 index 0000000000000..c28a49c26351d --- /dev/null +++ b/platform-includes/getting-started-install/javascript.capacitor.mdx @@ -0,0 +1,54 @@ +```bash {tabTitle:Angular} +# npm +npm install @sentry/capacitor @sentry/angular --save + +# yarn +yarn add @sentry/capacitor @sentry/angular + +# pnpm +pnpm add @sentry/capacitor @sentry/angular +``` + +```bash {tabTitle:React} +# npm +npm install @sentry/capacitor @sentry/react --save + +# yarn +yarn add @sentry/capacitor @sentry/react + +# pnpm +pnpm add @sentry/capacitor @sentry/react +``` + +```bash {tabTitle:Vue} +# npm +npm install @sentry/capacitor @sentry/vue --save + +# yarn +yarn add @sentry/capacitor @sentry/vue + +# pnpm +pnpm add @sentry/capacitor @sentry/vue +``` + +```bash {tabTitle:Nuxt} +# npm +npm install @sentry/capacitor @sentry/nuxt --save + +# yarn +yarn add @sentry/capacitor @sentry/nuxt + +# pnpm +pnpm add @sentry/capacitor @sentry/nuxt +``` + +```bash {tabTitle:Other} +# npm +npm install @sentry/capacitor @sentry/browser --save + +# yarn +yarn add @sentry/capacitor @sentry/browser + +# pnpm +pnpm add @sentry/capacitor @sentry/browser +``` From 8bdfe65aba6409b0cfc1a5983ea10e6e7b86d9e8 Mon Sep 17 00:00:00 2001 From: Sarah Mischinger Date: Tue, 17 Feb 2026 14:01:30 +0100 Subject: [PATCH 3/6] fix source maps cli snippets --- includes/sentry-cli-sourcemaps.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/includes/sentry-cli-sourcemaps.mdx b/includes/sentry-cli-sourcemaps.mdx index d87f379054b94..0fb25ecf7d26c 100644 --- a/includes/sentry-cli-sourcemaps.mdx +++ b/includes/sentry-cli-sourcemaps.mdx @@ -27,15 +27,15 @@ To inject Debug IDs, use the following command: ```bash {tabTitle: Ionic Build & others} -sentry-cli sourcemaps inject --org ./www +sentry-cli sourcemaps inject ./www ``` ```bash {tabTitle: Ionic Capacitor Build} # Android -sentry-cli sourcemaps inject --org ./android/app/src/main/assets/public +sentry-cli sourcemaps inject ./android/app/src/main/assets/public # iOS -sentry-cli sourcemaps inject --org ./ios/App/App/public +sentry-cli sourcemaps inject ./ios/App/App/public ``` @@ -81,7 +81,7 @@ sentry-cli sourcemaps upload --release --dist ./www ```bash {tabTitle: Ionic Capacitor Build} # Android -sentry-cli sourcemaps upload --release --dist ./android/app/src/main/assets/public +sentry-cli sourcemaps upload --release --dist ./android/app/src/main/assets/public find ./android/app/src/main/assets/public -type f -name '*.map' -delete # Optional, removes sourcemaps from the mobile app. # iOS From 521671729808844c607d7a44a6a3365d87f04d2a Mon Sep 17 00:00:00 2001 From: Sarah Mischinger Date: Tue, 17 Feb 2026 14:08:15 +0100 Subject: [PATCH 4/6] update Other Verify snippets --- .../javascript/guides/capacitor/index.mdx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/docs/platforms/javascript/guides/capacitor/index.mdx b/docs/platforms/javascript/guides/capacitor/index.mdx index 19cfc4631dbe9..b0d427a75ab5b 100644 --- a/docs/platforms/javascript/guides/capacitor/index.mdx +++ b/docs/platforms/javascript/guides/capacitor/index.mdx @@ -136,12 +136,14 @@ export default { ``` ```html {tabTitle: Other} - + - ``` @@ -226,19 +228,21 @@ export default { ``` ```html {tabTitle: Other} - + - ``` From c7375cf854a8558d6281289e502352bac4eb116f Mon Sep 17 00:00:00 2001 From: Sarah Mischinger Date: Thu, 19 Feb 2026 09:17:48 +0100 Subject: [PATCH 5/6] remove experiment logs from code snippet --- .../getting-started-config/javascript.capacitor.mdx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/platform-includes/getting-started-config/javascript.capacitor.mdx b/platform-includes/getting-started-config/javascript.capacitor.mdx index 57cbaa641c94c..04c053e29d9a9 100644 --- a/platform-includes/getting-started-config/javascript.capacitor.mdx +++ b/platform-includes/getting-started-config/javascript.capacitor.mdx @@ -16,12 +16,10 @@ Sentry.init( dist: "", // ___PRODUCT_OPTION_START___ logs // Logs requires @sentry/capacitor 2.0.0 or newer. - _experiments: { - enableLogs: true, - beforeSendLog: (log) => { - // Add custom filters to logs. - return log; - } + enableLogs: true, + beforeSendLog: (log) => { + // Add custom filters to logs. + return log; }, // ___PRODUCT_OPTION_END___ logs integrations: [ From c4311fc74de69246707075a8c10804b6ff938a12 Mon Sep 17 00:00:00 2001 From: Sarah Mischinger Date: Thu, 19 Feb 2026 09:35:25 +0100 Subject: [PATCH 6/6] remove beforesendlogs from config snippets --- .../javascript.capacitor.mdx | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/platform-includes/getting-started-config/javascript.capacitor.mdx b/platform-includes/getting-started-config/javascript.capacitor.mdx index 04c053e29d9a9..9885a27feb043 100644 --- a/platform-includes/getting-started-config/javascript.capacitor.mdx +++ b/platform-includes/getting-started-config/javascript.capacitor.mdx @@ -17,10 +17,6 @@ Sentry.init( // ___PRODUCT_OPTION_START___ logs // Logs requires @sentry/capacitor 2.0.0 or newer. enableLogs: true, - beforeSendLog: (log) => { - // Add custom filters to logs. - return log; - }, // ___PRODUCT_OPTION_END___ logs integrations: [ // ___PRODUCT_OPTION_START___ performance @@ -195,10 +191,6 @@ Sentry.init( // ___PRODUCT_OPTION_START___ logs // Logs requires @sentry/capacitor 2.0.0 or newer. enableLogs: true, - beforeSendLog: (log) => { - // Add custom filters to logs. - return log; - }, // ___PRODUCT_OPTION_END___ logs integrations: [ // ___PRODUCT_OPTION_START___ performance @@ -277,10 +269,6 @@ Sentry.init( // ___PRODUCT_OPTION_START___ logs // Logs requires @sentry/capacitor 2.0.0 or newer. enableLogs: true, - beforeSendLog: (log) => { - // Add custom filters to logs. - return log; - }, // ___PRODUCT_OPTION_END___ logs integrations: [ // ___PRODUCT_OPTION_START___ performance @@ -347,10 +335,6 @@ Sentry.init( // ___PRODUCT_OPTION_START___ logs // Logs requires @sentry/capacitor 2.0.0 or newer. enableLogs: true, - beforeSendLog: (log) => { - // Add custom filters to logs. - return log; - }, // ___PRODUCT_OPTION_END___ logs integrations: [ // ___PRODUCT_OPTION_START___ performance @@ -419,10 +403,6 @@ Sentry.init({ // ___PRODUCT_OPTION_START___ logs // Logs requires @sentry/capacitor 2.0.0 or newer. enableLogs: true, - beforeSendLog: (log) => { - // Add custom filters to logs. - return log; - }, // ___PRODUCT_OPTION_END___ logs integrations: [ // ___PRODUCT_OPTION_START___ performance