feat(onboarding) add profiling to onboarding docs

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,