feat(onboarding) add profiling onboarding (#75252)

Adds profiling to JS onboarding setup. I will followup with a separate
PR to add the document-policy header instructions

---------

Co-authored-by: Tony Xiao <txiao@sentry.io>

static/app/gettingStartedDocs/javascript/angular.spec.tsx

@@ -72,4 +72,17 @@ describe('javascript-angular onboarding docs', function () {
       screen.getByText(textWithMarkupMatcher(/replaysOnErrorSampleRate: 1\.0/))
     ).toBeInTheDocument();
   });
+
+  it('enables profiling by setting profiling sample rates', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [ProductSolution.ERROR_MONITORING, ProductSolution.PROFILING],
+    });
+
+    expect(
+      screen.getByText(textWithMarkupMatcher(/Sentry.browserProfilingIntegration\(\)/))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(textWithMarkupMatcher(/profilesSampleRate: 1\.0/))
+    ).toBeInTheDocument();
+  });
 });

static/app/gettingStartedDocs/javascript/angular.tsx

@@ -195,6 +195,11 @@ function getSdkSetupSnippet(params: Params) {
         ? `
           Sentry.browserTracingIntegration(),`
         : ''
+    }${
+      params.isProfilingSelected
+        ? `
+          Sentry.browserProfilingIntegration(),`
+        : ''
     }${
       params.isFeedbackSelected
         ? `
@@ -224,6 +229,16 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),`
         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.`
       : ''
+  }${
+    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,`
+      : ''
   }
   });`;
 }

static/app/gettingStartedDocs/javascript/ember.spec.tsx

@@ -70,4 +70,17 @@ describe('javascript-ember onboarding docs', function () {
       screen.getByText(textWithMarkupMatcher(/replaysOnErrorSampleRate: 1\.0/))
     ).toBeInTheDocument();
   });
+
+  it('enables profiling by setting profiling sample rates', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [ProductSolution.ERROR_MONITORING, ProductSolution.PROFILING],
+    });
+
+    expect(
+      screen.getByText(textWithMarkupMatcher(/Sentry.browserProfilingIntegration\(\)/))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(textWithMarkupMatcher(/profilesSampleRate: 1\.0/))
+    ).toBeInTheDocument();
+  });
 });

static/app/gettingStartedDocs/javascript/ember.tsx

@@ -39,6 +39,11 @@ Sentry.init({
       ? `
         Sentry.replayIntegration(${getReplayConfigOptions(params.replayOptions)}),`
       : ''
+  }${
+    params.isProfilingSelected
+      ? `
+          Sentry.browserProfilingIntegration(),`
+      : ''
   }${
     params.isFeedbackSelected
       ? `
@@ -63,6 +68,16 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),`
       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.`
     : ''
+}${
+  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,`
+    : ''
 }
 });
 

static/app/gettingStartedDocs/javascript/gatsby.spec.tsx

@@ -72,4 +72,17 @@ describe('javascript-gatsby onboarding docs', function () {
       screen.getByText(textWithMarkupMatcher(/replaysOnErrorSampleRate: 1\.0/))
     ).toBeInTheDocument();
   });
+
+  it('enables profiling by setting profiling sample rates', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [ProductSolution.ERROR_MONITORING, ProductSolution.PROFILING],
+    });
+
+    expect(
+      screen.getByText(textWithMarkupMatcher(/Sentry.browserProfilingIntegration\(\)/))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(textWithMarkupMatcher(/profilesSampleRate: 1\.0/))
+    ).toBeInTheDocument();
+  });
 });

static/app/gettingStartedDocs/javascript/gatsby.tsx

@@ -36,6 +36,11 @@ Sentry.init({
       ? `
         Sentry.browserTracingIntegration(),`
       : ''
+  }${
+    params.isProfilingSelected
+      ? `
+          Sentry.browserProfilingIntegration(),`
+      : ''
   }${
     params.isFeedbackSelected
       ? `
@@ -65,6 +70,16 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),`
       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.`
     : ''
+}${
+  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,`
+    : ''
 }
 });
 

static/app/gettingStartedDocs/javascript/javascript.spec.tsx

@@ -72,4 +72,17 @@ describe('javascript onboarding docs', function () {
       screen.getByText(textWithMarkupMatcher(/replaysOnErrorSampleRate: 1\.0/))
     ).toBeInTheDocument();
   });
+
+  it('enables profiling by setting profiling sample rates', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [ProductSolution.ERROR_MONITORING, ProductSolution.PROFILING],
+    });
+
+    expect(
+      screen.getByText(textWithMarkupMatcher(/Sentry.browserProfilingIntegration\(\)/))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(textWithMarkupMatcher(/profilesSampleRate: 1\.0/))
+    ).toBeInTheDocument();
+  });
 });

static/app/gettingStartedDocs/javascript/javascript.tsx

@@ -35,6 +35,11 @@ Sentry.init({
       ? `
         Sentry.browserTracingIntegration(),`
       : ''
+  }${
+    params.isProfilingSelected
+      ? `
+          Sentry.browserProfilingIntegration(),`
+      : ''
   }${
     params.isFeedbackSelected
       ? `
@@ -64,6 +69,16 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),`
       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.`
     : ''
+}${
+  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,`
+    : ''
 }
 });
 `;

static/app/gettingStartedDocs/javascript/react.spec.tsx

@@ -70,4 +70,17 @@ describe('javascript-react onboarding docs', function () {
       screen.getByText(textWithMarkupMatcher(/replaysOnErrorSampleRate: 1\.0/))
     ).toBeInTheDocument();
   });
+
+  it('enables profiling by setting profiling sample rates', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [ProductSolution.ERROR_MONITORING, ProductSolution.PROFILING],
+    });
+
+    expect(
+      screen.getByText(textWithMarkupMatcher(/Sentry.browserProfilingIntegration\(\)/))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(textWithMarkupMatcher(/profilesSampleRate: 1\.0/))
+    ).toBeInTheDocument();
+  });
 });

static/app/gettingStartedDocs/javascript/react.tsx

@@ -35,6 +35,11 @@ Sentry.init({
       ? `
         Sentry.browserTracingIntegration(),`
       : ''
+  }${
+    params.isProfilingSelected
+      ? `
+          Sentry.browserProfilingIntegration(),`
+      : ''
   }${
     params.isFeedbackSelected
       ? `
@@ -57,6 +62,16 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),`
       // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
       tracePropagationTargets: ["localhost", /^https:\\/\\/yourserver\\.io\\/api/],`
     : ''
+}${
+  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,`
+    : ''
 }${
   params.isReplaySelected
     ? `