Browse Source

ref(replays): add message about setting up trace propagation in onboarding sidebar (#62481)

This message only appears if the project has the JS framework tab
selected and it's a backend project.

<img width="465" alt="SCR-20240102-jwft"
src="https://github.com/getsentry/sentry/assets/56095982/d140e7af-b4d7-4054-8df6-324ecf3ec8d8">

The docs link goes to:
https://docs.sentry.io/product/session-replay/getting-started/#:~:text=Make%20sure%20you%27ve%20set%20up%20trace%20propagation%20in%20your%20backend%20projects.

Closes https://github.com/getsentry/sentry/issues/62082
Michelle Zhang 1 year ago
parent
commit
0c1678d2ed
1 changed files with 5 additions and 0 deletions
  1. 5 0
      static/app/components/replaysOnboarding/sidebar.tsx

+ 5 - 0
static/app/components/replaysOnboarding/sidebar.tsx

@@ -7,6 +7,7 @@ import HighlightTopRightPattern from 'sentry-images/pattern/highlight-top-right.
 import {Button} from 'sentry/components/button';
 import {CompactSelect} from 'sentry/components/compactSelect';
 import IdBadge from 'sentry/components/idBadge';
+import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import useOnboardingDocs from 'sentry/components/onboardingWizard/useOnboardingDocs';
 import {ReplayOnboardingLayout} from 'sentry/components/replaysOnboarding/replayOnboardingLayout';
@@ -336,6 +337,10 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
           `Adding Session Replay to your [platform] project is simple. Make sure you've got these basics down.`,
           {platform: currentPlatform?.name || currentProject.slug}
         )}
+        {showJsFrameworkInstructions ? <div>{tct(
+          `Also, ensure that you have set up trace propagation in your backend projects. To learn more, [link:read the docs].`,
+          {link: <ExternalLink href="https://docs.sentry.io/product/session-replay/getting-started/#:~:text=Make%20sure%20you%27ve%20set%20up%20trace%20propagation%20in%20your%20backend%20projects." />}
+        )}</div> : ''}
         {showJsFrameworkInstructions ? (
           <PlatformSelect>
             {t('Select your JS Framework: ')}