Skip to content

Commit 3d63a12

Browse files
lucas-zimermancoolguyzonekahest
authored
Fix(Capacitor): Expand configure setup to other frameworks (#11255)
* change for angulary ivy * expand samples to other frameworks and old angular * Update platform-includes/getting-started-config/javascript.capacitor.mdx Co-authored-by: Karl Heinz Struggl <[email protected]> --------- Co-authored-by: Alex Krawiec <[email protected]> Co-authored-by: Karl Heinz Struggl <[email protected]>
1 parent a40a687 commit 3d63a12

File tree

1 file changed

+142
-10
lines changed

1 file changed

+142
-10
lines changed

‎platform-includes/getting-started-config/javascript.capacitor.mdx‎

Lines changed: 142 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
Then forward the `init` method from the sibling Sentry SDK for the framework you use, such as Angular in this example:
22

33

4-
```typescript {tabTitle: Angular} {filename: app.module.ts} {"onboardingOptions": {"performance": "13-16, 21-28, 46-55", "session-replay": "17-19, 29-33"}}
4+
```typescript {tabTitle: Angular 14+} {filename: app.module.ts} {"onboardingOptions": {"performance": "13-16, 21-28, 46-55", "session-replay": "17-19, 29-33"}}
55
import * as Sentry from "@sentry/capacitor";
66
import * as SentryAngular from "@sentry/angular";
77

@@ -17,7 +17,7 @@ Sentry.init(
1717
// Registers and configures the Tracing integration,
1818
// which automatically instruments your application to monitor its
1919
// performance, including custom Angular routing instrumentation
20-
SentryAngular.browserTracingIntegration(),
20+
Sentry.browserTracingIntegration(),
2121
// Registers the Replay integration,
2222
// which automatically captures Session Replays
2323
Sentry.replayIntegration(),
@@ -61,17 +61,149 @@ Sentry.init(
6161
})
6262
```
6363

64-
```javascript {tabTitle: Other Frameworks}
64+
```typescript {tabTitle: Angular 12, 13} {filename: app.module.ts} {"onboardingOptions": {"performance": "14-17, 22-29, 47-56", "session-replay": "18-20, 30-34"}}
65+
// Requires @sentry/capacitor V0.
6566
import * as Sentry from "@sentry/capacitor";
67+
import * as SentryAngular from "@sentry/angular-ivy";
6668

67-
Sentry.init({
68-
dsn: "___PUBLIC_DSN___",
69+
Sentry.init(
70+
{
71+
dsn: "___PUBLIC_DSN___",
72+
73+
// Set your release version, such as "[email protected]"
74+
release: "my-project-name@<release-name>",
75+
// Set your dist version, such as "1"
76+
dist: "<dist>",
77+
integrations: [
78+
// Registers and configures the Tracing integration,
79+
// which automatically instruments your application to monitor its
80+
// performance, including custom Angular routing instrumentation
81+
new Sentry.BrowserTracing(),
82+
// Registers the Replay integration,
83+
// which automatically captures Session Replays
84+
new Sentry.Replay(),
85+
],
86+
87+
// Set tracesSampleRate to 1.0 to capture 100%
88+
// of transactions for tracing.
89+
// We recommend adjusting this value in production
90+
tracesSampleRate: 1.0,
91+
92+
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
93+
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
94+
95+
// Capture Replay for 10% of all sessions,
96+
// plus for 100% of sessions with an error
97+
replaysSessionSampleRate: 0.1,
98+
replaysOnErrorSampleRate: 1.0,
99+
},
100+
// Forward the init method from @sentry/angular
101+
SentryAngular.init
102+
);
103+
104+
@NgModule({
105+
providers: [
106+
{
107+
provide: ErrorHandler,
108+
// Attach the Sentry ErrorHandler
109+
useValue: SentryAngular.createErrorHandler(),
110+
},
111+
{
112+
provide: SentryAngular.TraceService,
113+
deps: [Router],
114+
},
115+
{
116+
provide: APP_INITIALIZER,
117+
useFactory: () => () => {},
118+
deps: [SentryAngular.TraceService],
119+
multi: true,
120+
},
121+
],
122+
})
123+
```
124+
125+
```typescript {tabTitle: React} {filename: index.tsx} {"onboardingOptions": {"performance": "13-16, 21-28, 46-55", "session-replay": "17-19, 29-33"}}
126+
import * as Sentry from "@sentry/capacitor";
127+
import * as SentryReact from "@sentry/react";
128+
129+
Sentry.init(
130+
{
131+
dsn: "___PUBLIC_DSN___",
132+
133+
// Set your release version, such as "[email protected]"
134+
release: "my-project-name@<release-name>",
135+
// Set your dist version, such as "1"
136+
dist: "<dist>",
137+
integrations: [
138+
// Registers and configures the Tracing integration,
139+
// which automatically instruments your application to monitor its
140+
// performance, including custom Angular routing instrumentation
141+
Sentry.browserTracingIntegration(),
142+
// Registers the Replay integration,
143+
// which automatically captures Session Replays
144+
Sentry.replayIntegration(),
145+
],
146+
147+
// Set tracesSampleRate to 1.0 to capture 100%
148+
// of transactions for tracing.
149+
// We recommend adjusting this value in production
150+
tracesSampleRate: 1.0,
151+
152+
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
153+
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
154+
155+
// Capture Replay for 10% of all sessions,
156+
// plus for 100% of sessions with an error
157+
replaysSessionSampleRate: 0.1,
158+
replaysOnErrorSampleRate: 1.0,
159+
},
160+
// Forward the init method from @sentry/angular
161+
SentryReact.init
162+
);
163+
```
164+
165+
```typescript {tabTitle: Vue} {filename: main.ts} {"onboardingOptions": {"performance": "17-20, 25-32, 50-59", "session-replay": "21-23, 33-37 "}}
166+
import * as Sentry from "@sentry/capacitor";
167+
import * as SentryVue from "@sentry/vue";
168+
import { createApp } from 'vue'
169+
170+
const app = createApp(App)
171+
172+
Sentry.init(
173+
{
174+
app,
175+
dsn: "___PUBLIC_DSN___",
176+
177+
// Set your release version, such as "[email protected]"
178+
release: "my-project-name@<release-name>",
179+
// Set your dist version, such as "1"
180+
dist: "<dist>",
181+
integrations: [
182+
// Registers and configures the Tracing integration,
183+
// which automatically instruments your application to monitor its
184+
// performance, including custom Angular routing instrumentation
185+
Sentry.browserTracingIntegration(),
186+
// Registers the Replay integration,
187+
// which automatically captures Session Replays
188+
Sentry.replayIntegration(),
189+
],
69190

70-
// Set your release version, such as "[email protected]"
71-
release: "my-project-name@<release-name>",
72-
// Set your dist version, such as "1"
73-
dist: "<dist>",
74-
});
191+
// Set tracesSampleRate to 1.0 to capture 100%
192+
// of transactions for tracing.
193+
// We recommend adjusting this value in production
194+
tracesSampleRate: 1.0,
195+
196+
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
197+
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
198+
199+
// Capture Replay for 10% of all sessions,
200+
// plus for 100% of sessions with an error
201+
replaysSessionSampleRate: 0.1,
202+
replaysOnErrorSampleRate: 1.0,
203+
},
204+
// Forward the init method from @sentry/angular
205+
SentryVue.init
206+
);
75207
```
76208

77209
You can also use the features available with the Sentry SDK for the framework you use, such as [Angular](/platforms/javascript/guides/angular/).

0 commit comments

Comments
 (0)