feat(onboarding) add profiling to onboarding docs (#75273)

Add profiling to product solutions

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: (
+      <Fragment>
+        <p>
+          {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.
+          `,
+            {}
+          )}
+        </p>
+        <TabbedCodeSnippet
+          tabs={[
+            {
+              code: `response.set('Document-Policy', 'js-profiling')`,
+              language: 'javascript',
+              value: 'javascript',
+              label: 'Express',
+            },
+          ]}
+        />
+      </Fragment>
+    ),
+  };
+}

static/app/components/onboarding/productSelection.tsx

@@ -119,30 +119,37 @@ export const platformProductAvailability = {
   javascript: [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.SESSION_REPLAY],
   'javascript-react': [
     ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.PROFILING,
     ProductSolution.SESSION_REPLAY,
   ],
   'javascript-vue': [
     ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.PROFILING,
     ProductSolution.SESSION_REPLAY,
   ],
   'javascript-angular': [
     ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.PROFILING,
     ProductSolution.SESSION_REPLAY,
   ],
   'javascript-ember': [
     ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.PROFILING,
     ProductSolution.SESSION_REPLAY,
   ],
   'javascript-gatsby': [
     ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.PROFILING,
     ProductSolution.SESSION_REPLAY,
   ],
   'javascript-solid': [
     ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.PROFILING,
     ProductSolution.SESSION_REPLAY,
   ],
   'javascript-svelte': [
     ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.PROFILING,
     ProductSolution.SESSION_REPLAY,
   ],
   'javascript-astro': [

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`
       : ''
   }
   });`;

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/',
     }),

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//',
     }),

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/',
     }),

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/',
     }),

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/',
     }),

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/',
     }),

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<PlatformOptions> = {
       ),
       configurations: getSetupConfiguration(params),
     },
+    ...(params.isProfilingSelected
+      ? [getProfilingDocumentHeaderConfigurationStep()]
+      : []),
     getUploadSourceMapsStep({
       guideLink: 'https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/',
       ...params,