123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474 |
- import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/crashReportCallout';
- import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/widgetCallout';
- import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
- import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
- import type {
- Docs,
- DocsParams,
- OnboardingConfig,
- PlatformOption,
- } from 'sentry/components/onboarding/gettingStartedDoc/types';
- import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
- import {
- getCrashReportJavaScriptInstallStep,
- getCrashReportModalConfigDescription,
- getCrashReportModalIntroduction,
- getFeedbackConfigOptions,
- getFeedbackConfigureDescription,
- } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
- import {
- getReplayConfigOptions,
- getReplayConfigureDescription,
- getReplayVerifyStep,
- } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
- import {t, tct} from 'sentry/locale';
- export enum SiblingOption {
- ANGULARV10 = 'angularV10',
- ANGULARV12 = 'angularV12',
- REACT = 'react',
- VUE3 = 'vue3',
- VUE2 = 'vue2',
- }
- type PlatformOptionKey = 'siblingOption';
- const platformOptions: Record<PlatformOptionKey, PlatformOption> = {
- siblingOption: {
- label: t('Sibling Package'),
- items: [
- {
- label: t('Angular 12+'),
- value: SiblingOption.ANGULARV12,
- },
- {
- label: t('Angular 10 & 11'),
- value: SiblingOption.ANGULARV10,
- },
- {
- label: t('React'),
- value: SiblingOption.REACT,
- },
- {
- label: t('Vue 3'),
- value: SiblingOption.VUE3,
- },
- {
- label: t('Vue 2'),
- value: SiblingOption.VUE2,
- },
- ],
- },
- };
- type PlatformOptions = typeof platformOptions;
- type Params = DocsParams<PlatformOptions>;
- function getIntegrations(params: Params, siblingOption: string) {
- const integrations: string[] = ['SentrySibling.browserTracingIntegration()'];
- if (params.isPerformanceSelected) {
- integrations.push(`
- new ${getSiblingImportName(siblingOption)}.BrowserTracing({
- // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
- tracePropagationTargets: ["localhost", /^https:\\/\\/yourserver\\.io\\/api/],
- ${
- params.isPerformanceSelected ? getPerformanceIntegration(siblingOption) : ''
- }})`);
- }
- if (params.isFeedbackSelected) {
- const feedbackIntegration: string[] = [
- `// Additional SDK configuration goes in here, for example:
- colorScheme: "system"`,
- ];
- const feedbackConfigOptions = getFeedbackConfigOptions(params.feedbackOptions);
- if (feedbackConfigOptions) {
- feedbackIntegration.push(feedbackConfigOptions);
- }
- integrations.push(
- `
- Sentry.feedbackIntegration({
- ${feedbackIntegration.join(',')}
- }),`
- );
- }
- if (params.isReplaySelected) {
- integrations.push(
- `
- new ${getSiblingImportName(siblingOption)}.Replay(${getReplayConfigOptions(
- params.replayOptions
- )}),`
- );
- }
- return integrations.join(',');
- }
- const getSentryInitLayout = (params: Params, siblingOption: string): string => {
- return `${
- siblingOption === SiblingOption.VUE2
- ? `Vue,`
- : siblingOption === SiblingOption.VUE3
- ? 'app,'
- : ''
- }dsn: "${params.dsn.public}",
- integrations: [
- ${getIntegrations(params, siblingOption)}
- ],
- ${
- params.isPerformanceSelected
- ? `
- // Tracing
- tracesSampleRate: 1.0, // Capture 100% of the transactions`
- : ''
- }${
- params.isReplaySelected
- ? `
- // Session Replay
- replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
- replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.`
- : ''
- }`;
- };
- const isAngular = (siblingOption: string): boolean =>
- siblingOption === SiblingOption.ANGULARV10 ||
- siblingOption === SiblingOption.ANGULARV12;
- const isVue = (siblingOption: string): boolean =>
- siblingOption === SiblingOption.VUE2 || siblingOption === SiblingOption.VUE3;
- function getPerformanceIntegration(siblingOption: string): string {
- return `${
- isVue(siblingOption)
- ? `routingInstrumentation: SentryVue.vueRouterInstrumentation(router),`
- : isAngular(siblingOption)
- ? `routingInstrumentation: SentryAngular.routingInstrumentation,`
- : ''
- }`;
- }
- const performanceAngularErrorHandler = `,
- {
- provide: SentryAngular.TraceService,
- deps: [Router],
- },
- {
- provide: APP_INITIALIZER,
- useFactory: () => () => {},
- deps: [SentryAngular.TraceService],
- multi: true,
- },`;
- const onboarding: OnboardingConfig<PlatformOptions> = {
- install: (params: Params) => [
- {
- type: StepType.INSTALL,
- description: (
- <p>
- {tct(
- `Install the Sentry Capacitor SDK as a dependency using [code:npm] or [code:yarn], alongside the Sentry [siblingName:] SDK:`,
- {
- code: <code />,
- siblingName: getSiblingName(params.platformOptions.siblingOption),
- }
- )}
- </p>
- ),
- configurations: [
- {
- language: 'bash',
- code: [
- {
- label: 'npm',
- value: 'npm',
- language: 'bash',
- code: `npm install --save @sentry/capacitor ${getNpmPackage(
- params.platformOptions.siblingOption
- )}@^7`,
- },
- {
- label: 'yarn',
- value: 'yarn',
- language: 'bash',
- code: `yarn add @sentry/capacitor ${getNpmPackage(
- params.platformOptions.siblingOption
- )}@^7 --exact`,
- },
- ],
- },
- {
- additionalInfo: (
- <p>
- {tct(
- `The version of the Sentry [siblingName:] SDK must match with the version referred by Sentry Capacitor. To check which version of the Sentry [siblingName:] SDK is installed, use the following command: [code:npm info @sentry/capacitor peerDependencies]`,
- {
- code: <code />,
- siblingName: getSiblingName(params.platformOptions.siblingOption),
- }
- )}
- </p>
- ),
- },
- ],
- },
- ],
- configure: params => [
- {
- type: StepType.CONFIGURE,
- configurations: getSetupConfiguration({params, showExtraStep: true}),
- },
- getUploadSourceMapsStep({
- guideLink:
- 'https://docs.sentry.io/platforms/javascript/guides/capacitor/sourcemaps/',
- ...params,
- }),
- ],
- verify: _ => [
- {
- type: StepType.VERIFY,
- description: t(
- "This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected."
- ),
- configurations: [
- {
- language: 'javascript',
- code: `myUndefinedFunction();`,
- },
- ],
- },
- ],
- nextSteps: () => [
- {
- id: 'capacitor-android-setup',
- name: t('Capacitor 2 Setup'),
- description: t(
- 'If you are using Capacitor 2 or older, follow this step to add required changes in order to initialize the Capacitor SDK on Android.'
- ),
- link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/?#capacitor-2---android-specifics',
- },
- ],
- };
- function getSiblingImportsSetupConfiguration(siblingOption: string): string {
- switch (siblingOption) {
- case SiblingOption.VUE3:
- return `import {createApp} from "vue";
- import {createRouter} from "vue-router";`;
- case SiblingOption.VUE2:
- return `import Vue from "vue";
- import Router from "vue-router";`;
- default:
- return '';
- }
- }
- function getVueConstSetup(siblingOption: string): string {
- switch (siblingOption) {
- case SiblingOption.VUE3:
- return `
- const app = createApp({
- // ...
- });
- const router = createRouter({
- // ...
- });
- `;
- case SiblingOption.VUE2:
- return `
- Vue.use(Router);
- const router = new Router({
- // ...
- });
- `;
- default:
- return '';
- }
- }
- function getSetupConfiguration({
- params,
- showExtraStep,
- showDescription,
- }: {
- params: Params;
- showExtraStep: boolean;
- showDescription?: boolean;
- }) {
- const siblingOption = params.platformOptions.siblingOption;
- const sentryInitLayout = getSentryInitLayout(params, siblingOption);
- const configuration = [
- {
- description: showDescription
- ? tct(
- `You should init the Sentry capacitor SDK in your [code:main.ts] file as soon as possible during application load up, before initializing Sentry [siblingName:]:`,
- {
- siblingName: getSiblingName(siblingOption),
- code: <code />,
- }
- )
- : null,
- language: 'javascript',
- code: `${getSiblingImportsSetupConfiguration(siblingOption)}
- import * as Sentry from '@sentry/capacitor';
- import * as ${getSiblingImportName(siblingOption)} from '${getNpmPackage(
- siblingOption
- )}';
- ${getVueConstSetup(siblingOption)}
- Sentry.init({
- ${sentryInitLayout}
- },
- // Forward the init method from ${getNpmPackage(params.platformOptions.siblingOption)}
- ${getSiblingImportName(siblingOption)}.init
- );`,
- },
- ];
- if (isAngular(siblingOption) && showExtraStep) {
- configuration.push({
- description: tct(
- "The Sentry Angular SDK exports a function to instantiate ErrorHandler provider that will automatically send JavaScript errors captured by the Angular's error handler.",
- {}
- ),
- language: 'javascript',
- code: `
- import { APP_INITIALIZER, ErrorHandler, NgModule } from "@angular/core";
- import { Router } from "@angular/router";
- import * as SentryAngular from "${getNpmPackage(siblingOption)}";
- @NgModule({
- // ...
- providers: [
- {
- provide: ErrorHandler,
- useValue: SentryAngular.createErrorHandler(),
- }${params.isPerformanceSelected ? performanceAngularErrorHandler : ' '}
- ],
- // ...
- })
- export class AppModule {}`,
- });
- }
- return configuration;
- }
- function getNpmPackage(siblingOption: string): string {
- const packages: Record<SiblingOption, string> = {
- [SiblingOption.ANGULARV10]: '@sentry/angular',
- [SiblingOption.ANGULARV12]: '@sentry/angular-ivy',
- [SiblingOption.REACT]: '@sentry/react',
- [SiblingOption.VUE3]: '@sentry/vue',
- [SiblingOption.VUE2]: '@sentry/vue',
- };
- return packages[siblingOption];
- }
- function getSiblingName(siblingOption: string): string {
- siblingOption;
- switch (siblingOption) {
- case SiblingOption.ANGULARV10:
- case SiblingOption.ANGULARV12:
- return 'Angular';
- case SiblingOption.REACT:
- return 'React';
- case SiblingOption.VUE2:
- case SiblingOption.VUE3:
- return 'Vue';
- default:
- return '';
- }
- }
- function getSiblingImportName(siblingOption: string): string {
- siblingOption;
- switch (siblingOption) {
- case SiblingOption.ANGULARV10:
- case SiblingOption.ANGULARV12:
- return 'SentryAngular';
- case SiblingOption.REACT:
- return 'SentryReact';
- case SiblingOption.VUE2:
- case SiblingOption.VUE3:
- return 'SentryVue';
- default:
- return '';
- }
- }
- const replayOnboarding: OnboardingConfig<PlatformOptions> = {
- install: params => onboarding.install(params),
- configure: params => [
- {
- type: StepType.CONFIGURE,
- description: getReplayConfigureDescription({
- link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/session-replay/',
- }),
- configurations: getSetupConfiguration({
- params,
- showExtraStep: false,
- showDescription: false,
- }),
- additionalInfo: <TracePropagationMessage />,
- },
- ],
- verify: getReplayVerifyStep(),
- nextSteps: () => [],
- };
- const feedbackOnboarding: OnboardingConfig<PlatformOptions> = {
- install: (params: Params) => onboarding.install(params),
- configure: (params: Params) => [
- {
- type: StepType.CONFIGURE,
- description: getFeedbackConfigureDescription({
- linkConfig:
- 'https://docs.sentry.io/platforms/javascript/guides/capacitor/user-feedback/configuration/',
- linkButton:
- 'https://docs.sentry.io/platforms/javascript/guides/capacitor/user-feedback/configuration/#bring-your-own-button',
- }),
- configurations: getSetupConfiguration({
- params,
- showExtraStep: false,
- showDescription: false,
- }),
- additionalInfo: crashReportCallout({
- link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/user-feedback/#crash-report-modal',
- }),
- },
- ],
- verify: () => [],
- nextSteps: () => [],
- };
- const crashReportOnboarding: OnboardingConfig<PlatformOptions> = {
- introduction: () => getCrashReportModalIntroduction(),
- install: (params: Params) => getCrashReportJavaScriptInstallStep(params),
- configure: () => [
- {
- type: StepType.CONFIGURE,
- description: getCrashReportModalConfigDescription({
- link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/user-feedback/configuration/#crash-report-modal',
- }),
- additionalInfo: widgetCallout({
- link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/user-feedback/#user-feedback-widget',
- }),
- },
- ],
- verify: () => [],
- nextSteps: () => [],
- };
- const docs: Docs<PlatformOptions> = {
- onboarding,
- platformOptions,
- feedbackOnboardingNpm: feedbackOnboarding,
- replayOnboarding,
- crashReportOnboarding,
- };
- export default docs;
|