From d373e5085a8d2851f65334898b1a4b8fbdb3adea Mon Sep 17 00:00:00 2001 From: LucasZF Date: Thu, 5 Sep 2024 22:58:46 -0300 Subject: [PATCH 1/3] change for angulary ivy --- .../getting-started-config/javascript.capacitor.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/platform-includes/getting-started-config/javascript.capacitor.mdx b/platform-includes/getting-started-config/javascript.capacitor.mdx index 39cd6dab04015..93fe9db790706 100644 --- a/platform-includes/getting-started-config/javascript.capacitor.mdx +++ b/platform-includes/getting-started-config/javascript.capacitor.mdx @@ -3,7 +3,7 @@ Then forward the `init` method from the sibling Sentry SDK for the framework you ```typescript {tabTitle: Angular} {filename: app.module.ts} {"onboardingOptions": {"performance": "13-16, 21-28, 46-55", "session-replay": "17-19, 29-33"}} import * as Sentry from "@sentry/capacitor"; -import * as SentryAngular from "@sentry/angular"; +import * as SentryAngular from "@sentry/angular-ivy"; Sentry.init( { @@ -20,7 +20,7 @@ Sentry.init( SentryAngular.browserTracingIntegration(), // Registers the Replay integration, // which automatically captures Session Replays - Sentry.replayIntegration(), + SentryAngular.replayIntegration(), ], // Set tracesSampleRate to 1.0 to capture 100% From e6c9210e795b2f282dc2af17f31f5aa19ee41201 Mon Sep 17 00:00:00 2001 From: lucas Date: Fri, 11 Oct 2024 14:39:39 -0300 Subject: [PATCH 2/3] expand samples to other frameworks and old angular --- .../javascript.capacitor.mdx | 154 ++++++++++++++++-- 1 file changed, 143 insertions(+), 11 deletions(-) diff --git a/platform-includes/getting-started-config/javascript.capacitor.mdx b/platform-includes/getting-started-config/javascript.capacitor.mdx index 93fe9db790706..89d8643d6b866 100644 --- a/platform-includes/getting-started-config/javascript.capacitor.mdx +++ b/platform-includes/getting-started-config/javascript.capacitor.mdx @@ -1,7 +1,68 @@ Then forward the `init` method from the sibling Sentry SDK for the framework you use, such as Angular in this example: -```typescript {tabTitle: Angular} {filename: app.module.ts} {"onboardingOptions": {"performance": "13-16, 21-28, 46-55", "session-replay": "17-19, 29-33"}} +```typescript {tabTitle: Angular 14 Or higher} {filename: app.module.ts} {"onboardingOptions": {"performance": "13-16, 21-28, 46-55", "session-replay": "17-19, 29-33"}} +import * as Sentry from "@sentry/capacitor"; +import * as SentryAngular from "@sentry/angular"; + +Sentry.init( + { + dsn: "___PUBLIC_DSN___", + + // Set your release version, such as "getsentry@1.0.0" + release: "my-project-name@", + // Set your dist version, such as "1" + dist: "", + integrations: [ + // Registers and configures the Tracing integration, + // which automatically instruments your application to monitor its + // performance, including custom Angular routing instrumentation + Sentry.browserTracingIntegration(), + // Registers the Replay integration, + // which automatically captures Session Replays + Sentry.replayIntegration(), + ], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for tracing. + // We recommend adjusting this value in production + tracesSampleRate: 1.0, + + // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + }, + // 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: Angular 12, 13} {filename: app.module.ts} {"onboardingOptions": {"performance": "14-17, 22-29, 47-56", "session-replay": "18-20, 30-34"}} +// Requires @sentry/capacitor V0. import * as Sentry from "@sentry/capacitor"; import * as SentryAngular from "@sentry/angular-ivy"; @@ -17,10 +78,10 @@ Sentry.init( // Registers and configures the Tracing integration, // which automatically instruments your application to monitor its // performance, including custom Angular routing instrumentation - SentryAngular.browserTracingIntegration(), + new Sentry.BrowserTracing(), // Registers the Replay integration, // which automatically captures Session Replays - SentryAngular.replayIntegration(), + new Sentry.Replay(), ], // Set tracesSampleRate to 1.0 to capture 100% @@ -61,17 +122,88 @@ Sentry.init( }) ``` -```javascript {tabTitle: Other Frameworks} +```typescript {tabTitle: React} {filename: index.tsx} {"onboardingOptions": {"performance": "13-16, 21-28, 46-55", "session-replay": "17-19, 29-33"}} +import * as Sentry from "@sentry/capacitor"; +import * as SentryReact from "@sentry/react"; + +Sentry.init( + { + dsn: "___PUBLIC_DSN___", + + // Set your release version, such as "getsentry@1.0.0" + release: "my-project-name@", + // Set your dist version, such as "1" + dist: "", + integrations: [ + // Registers and configures the Tracing integration, + // which automatically instruments your application to monitor its + // performance, including custom Angular routing instrumentation + Sentry.browserTracingIntegration(), + // Registers the Replay integration, + // which automatically captures Session Replays + Sentry.replayIntegration(), + ], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for tracing. + // We recommend adjusting this value in production + tracesSampleRate: 1.0, + + // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + }, + // Forward the init method from @sentry/angular + SentryReact.init +); +``` + +```typescript {tabTitle: Vue} {filename: main.ts} {"onboardingOptions": {"performance": "17-20, 25-32, 50-59", "session-replay": "21-23, 33-37 "}} import * as Sentry from "@sentry/capacitor"; +import * as SentryVue from "@sentry/vue"; +import { createApp } from 'vue' -Sentry.init({ - dsn: "___PUBLIC_DSN___", +const app = createApp(App) - // Set your release version, such as "getsentry@1.0.0" - release: "my-project-name@", - // Set your dist version, such as "1" - dist: "", -}); +Sentry.init( + { + app, + dsn: "___PUBLIC_DSN___", + + // Set your release version, such as "getsentry@1.0.0" + release: "my-project-name@", + // Set your dist version, such as "1" + dist: "", + integrations: [ + // Registers and configures the Tracing integration, + // which automatically instruments your application to monitor its + // performance, including custom Angular routing instrumentation + Sentry.browserTracingIntegration(), + // Registers the Replay integration, + // which automatically captures Session Replays + Sentry.replayIntegration(), + ], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for tracing. + // We recommend adjusting this value in production + tracesSampleRate: 1.0, + + // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + }, + // Forward the init method from @sentry/angular + SentryVue.init +); ``` You can also use the features available with the Sentry SDK for the framework you use, such as [Angular](/platforms/javascript/guides/angular/). From 0cb9e27fcb4c12ca93a4797a1369c297115d9937 Mon Sep 17 00:00:00 2001 From: Alex Krawiec Date: Thu, 31 Oct 2024 14:58:39 -0700 Subject: [PATCH 3/3] Update platform-includes/getting-started-config/javascript.capacitor.mdx Co-authored-by: Karl Heinz Struggl --- .../getting-started-config/javascript.capacitor.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform-includes/getting-started-config/javascript.capacitor.mdx b/platform-includes/getting-started-config/javascript.capacitor.mdx index 89d8643d6b866..f594253cc31ee 100644 --- a/platform-includes/getting-started-config/javascript.capacitor.mdx +++ b/platform-includes/getting-started-config/javascript.capacitor.mdx @@ -1,7 +1,7 @@ Then forward the `init` method from the sibling Sentry SDK for the framework you use, such as Angular in this example: -```typescript {tabTitle: Angular 14 Or higher} {filename: app.module.ts} {"onboardingOptions": {"performance": "13-16, 21-28, 46-55", "session-replay": "17-19, 29-33"}} +```typescript {tabTitle: Angular 14+} {filename: app.module.ts} {"onboardingOptions": {"performance": "13-16, 21-28, 46-55", "session-replay": "17-19, 29-33"}} import * as Sentry from "@sentry/capacitor"; import * as SentryAngular from "@sentry/angular";