diff --git a/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx b/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx index e39ba610b622bd..8c26cd6c766286 100644 --- a/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx +++ b/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx @@ -187,6 +187,7 @@ export const projectPlatformToDocsMap: Record = { 'javascript-sveltekit': 'sveltekit', 'javascript-astro': 'astro', 'javascript-tanstackstart-react': 'tanstackstart-react', + 'react-native': 'react-native', }; function isReactNativeSDK({sdkName}: Pick) { diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.spec.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.spec.tsx index d5dfa5b2768974..1d5b5196ded0b8 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.spec.tsx +++ b/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(); + render(); 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); }); }); diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx index e5a61003bbf324..56afe1fa0236be 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx +++ b/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 ( {t('Problem')} @@ -15,13 +19,7 @@ export function ProblemSection() { )}
- } - external - // TODO Abdullah Khan: Look into adding platform specific links to source map docs - href="https://docs.sentry.io/platforms/javascript/sourcemaps/" - > + } external href={sourcemapsDocsUrl}> {t('Why configure source maps?')}
diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails.tsx index 77ba0c6a9b547e..ab3bdbb44ccfac 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails.tsx +++ b/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 (
- + - +
diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.spec.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.spec.tsx index 2caa09f28d195b..5bd959b70b79d8 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.spec.tsx +++ b/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(, {organization}); + render( + , + {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(, {organization}); + render( + , + {organization} + ); expect(screen.getByRole('button', {name: /settings/i})).toHaveAttribute( 'href', @@ -34,11 +41,14 @@ describe('TroubleshootingSection', () => { }); it('renders the footer docs link', () => { - render(, {organization}); + render( + , + {organization} + ); expect(screen.getByRole('link', {name: /read all documentation/i})).toHaveAttribute( 'href', - 'https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/' + `${sourcemapsDocsUrl}troubleshooting_js/` ); }); }); diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx index 6b2c8ab8cda2f5..4223b639bc6599 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx +++ b/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 ( {t('Troubleshooting suggestions')} @@ -125,7 +134,7 @@ export function TroubleshootingSection({project}: TroubleshootingSectionProps) { {t('Not what you\u2019re looking for?')} - + {t('Read all documentation')}