feat(source-map-config-issues): Making source map doc links platform …

static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx

@@ -187,6 +187,7 @@ export const projectPlatformToDocsMap: Record<string, string> = {
   'javascript-sveltekit': 'sveltekit',
   'javascript-astro': 'astro',
   'javascript-tanstackstart-react': 'tanstackstart-react',
+  'react-native': 'react-native',
 };
 
 function isReactNativeSDK({sdkName}: Pick<FrameSourceMapDebuggerData, 'sdkName'>) {

static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.spec.tsx

@@ -3,8 +3,10 @@ import {render, screen} from 'sentry-test/reactTestingLibrary';
 import {ProblemSection} from './problemSection';
 
 describe('ProblemSection', () => {
+  const sourcemapsDocsUrl = 'https://docs.sentry.io/platforms/javascript/sourcemaps/';
+
   it('renders title, description, and docs link', () => {
-    render(<ProblemSection />);
+    render(<ProblemSection sourcemapsDocsUrl={sourcemapsDocsUrl} />);
 
     expect(screen.getByText('Problem')).toBeInTheDocument();
     expect(
@@ -14,6 +16,6 @@ describe('ProblemSection', () => {
     ).toBeInTheDocument();
     expect(
       screen.getByRole('button', {name: 'Why configure source maps?'})
-    ).toHaveAttribute('href', 'https://docs.sentry.io/platforms/javascript/sourcemaps/');
+    ).toHaveAttribute('href', sourcemapsDocsUrl);
   });
 });

static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx

@@ -5,7 +5,11 @@ import {Heading, Text} from '@sentry/scraps/text';
 import {IconInfo} from 'sentry/icons';
 import {t} from 'sentry/locale';
 
-export function ProblemSection() {
+interface ProblemSectionProps {
+  sourcemapsDocsUrl: string;
+}
+
+export function ProblemSection({sourcemapsDocsUrl}: ProblemSectionProps) {
   return (
     <Stack gap="lg" padding="lg">
       <Heading as="h3">{t('Problem')}</Heading>
@@ -15,13 +19,7 @@ export function ProblemSection() {
         )}
       </Text>
       <div>
-        <LinkButton
-          size="sm"
-          icon={<IconInfo />}
-          external
-          // TODO Abdullah Khan: Look into adding platform specific links to source map docs
-          href="https://docs.sentry.io/platforms/javascript/sourcemaps/"
-        >
+        <LinkButton size="sm" icon={<IconInfo />} external href={sourcemapsDocsUrl}>
           {t('Why configure source maps?')}
         </LinkButton>
       </div>

static/app/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails.tsx

@@ -1,4 +1,8 @@
 import {useSourceMapDebugQuery} from 'sentry/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData';
+import {
+  getSourceMapsDocLinks,
+  projectPlatformToDocsMap,
+} from 'sentry/components/events/interfaces/sourceMapsDebuggerModal';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
@@ -22,13 +26,17 @@ export function SourceMapIssueDetails({event, project}: SourceMapIssueDetailsPro
     event.sdk?.name ?? null
   );
 
+  const docsSegment =
+    (project.platform && projectPlatformToDocsMap[project.platform]) ?? 'javascript';
+  const docLinks = getSourceMapsDocLinks(docsSegment);
+
   return (
     <div>
-      <ProblemSection />
+      <ProblemSection sourcemapsDocsUrl={docLinks.sourcemaps} />
       <SectionDivider orientation="horizontal" />
       <DiagnosisSection sourceMapQuery={sourceMapQuery} />
       <SectionDivider orientation="horizontal" />
-      <TroubleshootingSection project={project} />
+      <TroubleshootingSection sourcemapsDocsUrl={docLinks.sourcemaps} project={project} />
       <SectionDivider orientation="horizontal" />
       <ImpactSection project={project} />
     </div>

static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.spec.tsx

@@ -8,9 +8,13 @@ import {TroubleshootingSection} from './troubleshootingSection';
 describe('TroubleshootingSection', () => {
   const organization = OrganizationFixture();
   const project = ProjectFixture({slug: 'my-project'});
+  const sourcemapsDocsUrl = 'https://docs.sentry.io/platforms/javascript/sourcemaps/';
 
   it('renders all troubleshooting step titles', () => {
-    render(<TroubleshootingSection project={project} />, {organization});
+    render(
+      <TroubleshootingSection project={project} sourcemapsDocsUrl={sourcemapsDocsUrl} />,
+      {organization}
+    );
 
     expect(screen.getByText('Verify Artifacts Are Uploaded')).toBeInTheDocument();
     expect(
@@ -25,7 +29,10 @@ describe('TroubleshootingSection', () => {
   });
 
   it('settings link points to the correct project source maps URL', () => {
-    render(<TroubleshootingSection project={project} />, {organization});
+    render(
+      <TroubleshootingSection project={project} sourcemapsDocsUrl={sourcemapsDocsUrl} />,
+      {organization}
+    );
 
     expect(screen.getByRole('button', {name: /settings/i})).toHaveAttribute(
       'href',
@@ -34,11 +41,14 @@ describe('TroubleshootingSection', () => {
   });
 
   it('renders the footer docs link', () => {
-    render(<TroubleshootingSection project={project} />, {organization});
+    render(
+      <TroubleshootingSection project={project} sourcemapsDocsUrl={sourcemapsDocsUrl} />,
+      {organization}
+    );
 
     expect(screen.getByRole('link', {name: /read all documentation/i})).toHaveAttribute(
       'href',
-      'https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/'
+      `${sourcemapsDocsUrl}troubleshooting_js/`
     );
   });
 });

static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx

@@ -12,12 +12,21 @@ import {useOrganization} from 'sentry/utils/useOrganization';
 
 interface TroubleshootingSectionProps {
   project: Project;
+  sourcemapsDocsUrl: string;
 }
 
-export function TroubleshootingSection({project}: TroubleshootingSectionProps) {
+export function TroubleshootingSection({
+  sourcemapsDocsUrl,
+  project,
+}: TroubleshootingSectionProps) {
   const organization = useOrganization();
   const settingsUrl = `/settings/${organization.slug}/projects/${project.slug}/source-maps/`;
 
+  const troubleShootingDocUrl =
+    project.platform === 'react-native'
+      ? `${sourcemapsDocsUrl}troubleshooting/`
+      : `${sourcemapsDocsUrl}troubleshooting_js/`;
+
   return (
     <Stack gap="md" padding="lg">
       <Heading as="h3">{t('Troubleshooting suggestions')}</Heading>
@@ -125,7 +134,7 @@ export function TroubleshootingSection({project}: TroubleshootingSectionProps) {
         </Disclosure>
         <Flex paddingTop="sm" align="center" gap="sm">
           <Text variant="muted">{t('Not what you\u2019re looking for?')}</Text>
-          <ExternalLink href="https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/">
+          <ExternalLink href={troubleShootingDocUrl}>
             <Flex align="center" gap="xs">
               <IconDocs size="xs" />
               {t('Read all documentation')}