From f0133a596794da19bb60164e9174244fbc2d03d5 Mon Sep 17 00:00:00 2001 From: Jonas Date: Tue, 30 Jul 2024 15:02:10 -0400 Subject: [PATCH] feat(onboarding) add profiling to onboarding docs (#75275) Add document header onboarding step and enable profiling onboarding for js projects --- .../utils/profilingOnboarding.tsx | 38 +++++++++++++++++++ .../gettingStartedDocs/javascript/angular.tsx | 17 ++++++--- .../gettingStartedDocs/javascript/ember.tsx | 13 ++++--- .../gettingStartedDocs/javascript/gatsby.tsx | 13 ++++--- .../javascript/javascript.tsx | 12 +++--- .../gettingStartedDocs/javascript/react.tsx | 12 +++--- .../gettingStartedDocs/javascript/solid.tsx | 12 +++--- .../gettingStartedDocs/javascript/svelte.tsx | 12 +++--- .../app/gettingStartedDocs/javascript/vue.tsx | 12 +++--- 9 files changed, 93 insertions(+), 48 deletions(-) create mode 100644 static/app/components/onboarding/gettingStartedDoc/utils/profilingOnboarding.tsx diff --git a/static/app/components/onboarding/gettingStartedDoc/utils/profilingOnboarding.tsx b/static/app/components/onboarding/gettingStartedDoc/utils/profilingOnboarding.tsx new file mode 100644 index 00000000000000..71302fe75b4b9f --- /dev/null +++ b/static/app/components/onboarding/gettingStartedDoc/utils/profilingOnboarding.tsx @@ -0,0 +1,38 @@ +import {Fragment} from 'react'; + +import { + type StepProps, + TabbedCodeSnippet, +} from 'sentry/components/onboarding/gettingStartedDoc/step'; +import {tct} from 'sentry/locale'; + +export function getProfilingDocumentHeaderConfigurationStep(): StepProps { + return { + title: 'Add Document-Policy: js-profiling header', + description: ( + +

+ {tct( + `For the JavaScript browser profiler to start, the document response header needs + to include a Document-Policy header key with the js-profiling value. How you do + this will depend on how your assets are served. + + If you're using a server like Express, you'll be able to use the response.set function to set the header value. + `, + {} + )} +

+ + + ), + }; +} diff --git a/static/app/gettingStartedDocs/javascript/angular.tsx b/static/app/gettingStartedDocs/javascript/angular.tsx index f8ebde7657d923..e47be74b550944 100644 --- a/static/app/gettingStartedDocs/javascript/angular.tsx +++ b/static/app/gettingStartedDocs/javascript/angular.tsx @@ -16,6 +16,7 @@ import { getFeedbackConfigureDescription, } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding'; import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; +import {getProfilingDocumentHeaderConfigurationStep} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding'; import { getReplayConfigOptions, getReplayConfigureDescription, @@ -46,6 +47,10 @@ const getNextStep = ( step => step.id !== ProductSolution.SESSION_REPLAY ); } + + if (params.isProfilingSelected) { + nextStepDocs = nextStepDocs.filter(step => step.id !== ProductSolution.PROFILING); + } return nextStepDocs; }; @@ -133,6 +138,9 @@ const onboarding: OnboardingConfig = { }, ], }, + ...(params.isProfilingSelected + ? [getProfilingDocumentHeaderConfigurationStep()] + : []), getUploadSourceMapsStep({ guideLink: 'https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/', ...params, @@ -187,6 +195,7 @@ function getSdkSetupSnippet(params: Params) { import * as Sentry from "@sentry/angular"; import { AppModule } from "./app/app.module"; +import { getProfilingDocumentHeaderConfigurationStep } from '../../components/onboarding/gettingStartedDoc/utils/profilingOnboarding'; Sentry.init({ dsn: "${params.dsn}", @@ -232,12 +241,8 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),` }${ params.isProfilingSelected ? ` - // Set profilesSampleRate to 1.0 to profile every transaction. - // Since profilesSampleRate is relative to tracesSampleRate, - // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate - // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would - // results in 25% of transactions being profiled (0.5*0.5=0.25) - profilesSampleRate: 1.0,` + // Profiling + profilesSampleRate: 1.0, // Profile 100% of the transactions. This value is relative to tracesSampleRate` : '' } });`; diff --git a/static/app/gettingStartedDocs/javascript/ember.tsx b/static/app/gettingStartedDocs/javascript/ember.tsx index 3a28118a981bd3..164b1d24efbb08 100644 --- a/static/app/gettingStartedDocs/javascript/ember.tsx +++ b/static/app/gettingStartedDocs/javascript/ember.tsx @@ -16,6 +16,7 @@ import { getFeedbackConfigureDescription, } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding'; import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; +import {getProfilingDocumentHeaderConfigurationStep} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding'; import { getReplayConfigOptions, getReplayConfigureDescription, @@ -31,6 +32,7 @@ import loadInitializers from "ember-load-initializers"; import config from "./config/environment"; import * as Sentry from "@sentry/ember"; +import { getProfilingDocumentHeaderConfigurationStep } from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding'; Sentry.init({ dsn: "${params.dsn}", @@ -71,12 +73,8 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),` }${ params.isProfilingSelected ? ` - // Set profilesSampleRate to 1.0 to profile every transaction. - // Since profilesSampleRate is relative to tracesSampleRate, - // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate - // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would - // results in 25% of transactions being profiled (0.5*0.5=0.25) - profilesSampleRate: 1.0,` + // Profiling + profilesSampleRate: 1.0, // Profile 100% of the transactions. This value is relative to tracesSampleRate` : '' } }); @@ -134,6 +132,9 @@ const onboarding: OnboardingConfig = { }, ], }, + ...(params.isProfilingSelected + ? [getProfilingDocumentHeaderConfigurationStep()] + : []), getUploadSourceMapsStep({ guideLink: 'https://docs.sentry.io/platforms/javascript/guides/ember/sourcemaps/', }), diff --git a/static/app/gettingStartedDocs/javascript/gatsby.tsx b/static/app/gettingStartedDocs/javascript/gatsby.tsx index deeef10cb2612e..dd2f5b67ecfab6 100644 --- a/static/app/gettingStartedDocs/javascript/gatsby.tsx +++ b/static/app/gettingStartedDocs/javascript/gatsby.tsx @@ -18,6 +18,7 @@ import { getFeedbackConfigureDescription, } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding'; import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; +import {getProfilingDocumentHeaderConfigurationStep} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding'; import { getReplayConfigOptions, getReplayConfigureDescription, @@ -28,6 +29,7 @@ type Params = DocsParams; const getSdkSetupSnippet = (params: Params) => ` import * as Sentry from "@sentry/gatsby"; +import { getProfilingDocumentHeaderConfigurationStep } from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding'; Sentry.init({ dsn: "${params.dsn}", @@ -73,12 +75,8 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),` }${ params.isProfilingSelected ? ` - // Set profilesSampleRate to 1.0 to profile every transaction. - // Since profilesSampleRate is relative to tracesSampleRate, - // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate - // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would - // results in 25% of transactions being profiled (0.5*0.5=0.25) - profilesSampleRate: 1.0,` + // Profiling + profilesSampleRate: 1.0, // Profile 100% of the transactions. This value is relative to tracesSampleRate` : '' } }); @@ -166,6 +164,9 @@ const onboarding: OnboardingConfig = { ], configure: (params: Params) => [ getConfigureStep(params), + ...(params.isProfilingSelected + ? [getProfilingDocumentHeaderConfigurationStep()] + : []), getUploadSourceMapsStep({ guideLink: 'https://docs.sentry.io/platforms/javascript/guides/gatsby/sourcemaps//', }), diff --git a/static/app/gettingStartedDocs/javascript/javascript.tsx b/static/app/gettingStartedDocs/javascript/javascript.tsx index 942091726223ce..cd086884344f1e 100644 --- a/static/app/gettingStartedDocs/javascript/javascript.tsx +++ b/static/app/gettingStartedDocs/javascript/javascript.tsx @@ -16,6 +16,7 @@ import { getFeedbackConfigureDescription, } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding'; import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; +import {getProfilingDocumentHeaderConfigurationStep} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding'; import { getReplayConfigOptions, getReplayConfigureDescription, @@ -72,12 +73,8 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),` }${ params.isProfilingSelected ? ` - // Set profilesSampleRate to 1.0 to profile every transaction. - // Since profilesSampleRate is relative to tracesSampleRate, - // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate - // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would - // results in 25% of transactions being profiled (0.5*0.5=0.25) - profilesSampleRate: 1.0,` + // Profiling + profilesSampleRate: 1.0, // Profile 100% of the transactions. This value is relative to tracesSampleRate` : '' } }); @@ -135,6 +132,9 @@ const onboarding: OnboardingConfig = { }, ], }, + ...(params.isProfilingSelected + ? [getProfilingDocumentHeaderConfigurationStep()] + : []), getUploadSourceMapsStep({ guideLink: 'https://docs.sentry.io/platforms/javascript/sourcemaps/', }), diff --git a/static/app/gettingStartedDocs/javascript/react.tsx b/static/app/gettingStartedDocs/javascript/react.tsx index e9f6124bd979c0..9913982fa9ed20 100644 --- a/static/app/gettingStartedDocs/javascript/react.tsx +++ b/static/app/gettingStartedDocs/javascript/react.tsx @@ -16,6 +16,7 @@ import { getFeedbackConfigureDescription, } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding'; import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; +import {getProfilingDocumentHeaderConfigurationStep} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding'; import { getReplayConfigOptions, getReplayConfigureDescription, @@ -65,12 +66,8 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),` }${ params.isProfilingSelected ? ` - // Set profilesSampleRate to 1.0 to profile every transaction. - // Since profilesSampleRate is relative to tracesSampleRate, - // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate - // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would - // results in 25% of transactions being profiled (0.5*0.5=0.25) - profilesSampleRate: 1.0,` + // Profiling + profilesSampleRate: 1.0, // Profile 100% of the transactions. This value is relative to tracesSampleRate` : '' }${ params.isReplaySelected @@ -144,6 +141,9 @@ const onboarding: OnboardingConfig = { }, ], }, + ...(params.isProfilingSelected + ? [getProfilingDocumentHeaderConfigurationStep()] + : []), getUploadSourceMapsStep({ guideLink: 'https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/', }), diff --git a/static/app/gettingStartedDocs/javascript/solid.tsx b/static/app/gettingStartedDocs/javascript/solid.tsx index ea477c886ae9e6..4e12eaba56054c 100644 --- a/static/app/gettingStartedDocs/javascript/solid.tsx +++ b/static/app/gettingStartedDocs/javascript/solid.tsx @@ -16,6 +16,7 @@ import { getFeedbackConfigureDescription, } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding'; import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; +import {getProfilingDocumentHeaderConfigurationStep} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding'; import { getReplayConfigOptions, getReplayConfigureDescription, @@ -73,12 +74,8 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),` }${ params.isProfilingSelected ? ` - // Set profilesSampleRate to 1.0 to profile every transaction. - // Since profilesSampleRate is relative to tracesSampleRate, - // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate - // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would - // results in 25% of transactions being profiled (0.5*0.5=0.25) - profilesSampleRate: 1.0,` + // Profiling + profilesSampleRate: 1.0, // Profile 100% of the transactions. This value is relative to tracesSampleRate` : '' } }); @@ -154,6 +151,9 @@ const onboarding: OnboardingConfig = { }, ], }, + ...(params.isProfilingSelected + ? [getProfilingDocumentHeaderConfigurationStep()] + : []), getUploadSourceMapsStep({ guideLink: 'https://docs.sentry.io/platforms/javascript/guides/solid/sourcemaps/', }), diff --git a/static/app/gettingStartedDocs/javascript/svelte.tsx b/static/app/gettingStartedDocs/javascript/svelte.tsx index b71bc66708ad7d..c73794ce975904 100644 --- a/static/app/gettingStartedDocs/javascript/svelte.tsx +++ b/static/app/gettingStartedDocs/javascript/svelte.tsx @@ -16,6 +16,7 @@ import { getFeedbackConfigureDescription, } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding'; import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; +import {getProfilingDocumentHeaderConfigurationStep} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding'; import { getReplayConfigOptions, getReplayConfigureDescription, @@ -74,12 +75,8 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),` }${ params.isProfilingSelected ? ` - // Set profilesSampleRate to 1.0 to profile every transaction. - // Since profilesSampleRate is relative to tracesSampleRate, - // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate - // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would - // results in 25% of transactions being profiled (0.5*0.5=0.25) - profilesSampleRate: 1.0,` + // Profiling + profilesSampleRate: 1.0, // Profile 100% of the transactions. This value is relative to tracesSampleRate` : '' } }); @@ -149,6 +146,9 @@ const onboarding: OnboardingConfig = { }, ], }, + ...(params.isProfilingSelected + ? [getProfilingDocumentHeaderConfigurationStep()] + : []), getUploadSourceMapsStep({ guideLink: 'https://docs.sentry.io/platforms/javascript/guides/svelte/sourcemaps/', }), diff --git a/static/app/gettingStartedDocs/javascript/vue.tsx b/static/app/gettingStartedDocs/javascript/vue.tsx index 31b401ff2f126f..0fdd0a6f9378e7 100644 --- a/static/app/gettingStartedDocs/javascript/vue.tsx +++ b/static/app/gettingStartedDocs/javascript/vue.tsx @@ -17,6 +17,7 @@ import { getFeedbackSDKSetupSnippet, } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding'; import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; +import {getProfilingDocumentHeaderConfigurationStep} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding'; import { getReplayConfigOptions, getReplayConfigureDescription, @@ -88,12 +89,8 @@ const getSentryInitLayout = (params: Params, siblingOption: string): string => { }${ params.isProfilingSelected ? ` - // Set profilesSampleRate to 1.0 to profile every transaction. - // Since profilesSampleRate is relative to tracesSampleRate, - // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate - // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would - // results in 25% of transactions being profiled (0.5*0.5=0.25) - profilesSampleRate: 1.0,` + // Profiling + profilesSampleRate: 1.0, // Profile 100% of the transactions. This value is relative to tracesSampleRate` : '' } });`; @@ -169,6 +166,9 @@ const onboarding: OnboardingConfig = { ), configurations: getSetupConfiguration(params), }, + ...(params.isProfilingSelected + ? [getProfilingDocumentHeaderConfigurationStep()] + : []), getUploadSourceMapsStep({ guideLink: 'https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/', ...params,