- + {issueTypeConfig.header.eventNavigation.enabled && ( + + )} diff --git a/static/app/views/issueDetails/streamline/groupDetailsLayout.tsx b/static/app/views/issueDetails/streamline/groupDetailsLayout.tsx index 778505081bfa7e..6569f0ffd00443 100644 --- a/static/app/views/issueDetails/streamline/groupDetailsLayout.tsx +++ b/static/app/views/issueDetails/streamline/groupDetailsLayout.tsx @@ -84,13 +84,14 @@ export function GroupDetailsLayout({ {tourProps => (
- {groupReprocessingStatus !== ReprocessingStatus.REPROCESSING && ( - - - {/* Since the event details header is disabled, display the sidebar toggle here */} - {!hasFilterBar && } - - )} + {groupReprocessingStatus !== ReprocessingStatus.REPROCESSING && + issueTypeConfig.header.eventNavigation.enabled && ( + + + {/* Since the event details header is disabled, display the sidebar toggle here */} + {!hasFilterBar && } + + )} {children}
From 764d2b31b6a31b93abc40c5ada7e390b73ccbeea Mon Sep 17 00:00:00 2001 From: Abdullah Khan Date: Tue, 7 Apr 2026 18:14:13 +0600 Subject: [PATCH 2/9] feat(source-map-config-issues): Iterating --- .../sourceMapIssues/diagnosisSection.tsx | 9 +- .../sourceMapIssues/problemSection.tsx | 27 +-- .../sourceMapIssues/sourceMapIssueDetails.tsx | 9 +- .../troubleshootingSection.tsx | 183 +++++++++++------- 4 files changed, 133 insertions(+), 95 deletions(-) diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx index 1e2d4af162a6cc..830b26fc84d8d6 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx @@ -13,8 +13,6 @@ import {LoadingError} from 'sentry/components/loadingError'; import {LoadingIndicator} from 'sentry/components/loadingIndicator'; import {IconOpen} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; -import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; function getDiagnosisMessage(data: SourceMapDebugBlueThunderResponse): ReactNode | null { const release = data.release ? ( @@ -179,8 +177,11 @@ export function DiagnosisSection({sourceMapQuery}: DiagnosisSectionProps) { } return ( - + + + {t('Diagnosis')} + {renderContent()} - + ); } diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx index 4c8b43dcfb71d8..f9d9089a4ccd45 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx @@ -2,29 +2,30 @@ import {LinkButton} from '@sentry/scraps/button'; import {Stack} from '@sentry/scraps/layout'; import {Text} from '@sentry/scraps/text'; -import {IconQuestion} from 'sentry/icons'; +import {IconInfo} from 'sentry/icons'; import {t} from 'sentry/locale'; -import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; export function ProblemSection() { return ( - - - - {t( - "Your source maps aren't configured correctly, so stack traces will show minified code instead of your original source. Fix this to see the exact file, line, and function causing the error." - )} - + + + {t('Problem')} + + + {t( + "Your source maps aren't configured correctly, so stack traces will show minified code instead of your original source. Fix this to see the exact file, line, and function causing the error." + )} + +
} + icon={} external href="https://docs.sentry.io/platforms/javascript/sourcemaps/" > {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 862b80e11c2692..65e976c7fcda21 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails.tsx @@ -1,9 +1,8 @@ -import {Stack} from '@sentry/scraps/layout'; - import {useSourceMapDebugQuery} from 'sentry/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData'; import type {Event} from 'sentry/types/event'; import type {Group} from 'sentry/types/group'; import type {Project} from 'sentry/types/project'; +import {SectionDivider} from 'sentry/views/issueDetails/streamline/foldSection'; import {DiagnosisSection} from './diagnosisSection'; import {ProblemSection} from './problemSection'; @@ -22,10 +21,12 @@ export function SourceMapIssueDetails({event, project}: SourceMapIssueDetailsPro ); return ( - +
+ + - +
); } diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx index f6160cbe698ae9..db283aa47252ba 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx @@ -1,58 +1,16 @@ import styled from '@emotion/styled'; import {LinkButton} from '@sentry/scraps/button'; +import {InlineCode} from '@sentry/scraps/code'; import {Disclosure} from '@sentry/scraps/disclosure'; import {Flex, Stack} from '@sentry/scraps/layout'; import {Text} from '@sentry/scraps/text'; import {ExternalLink} from 'sentry/components/links/externalLink'; -import {IconSettings} from 'sentry/icons'; -import {t} from 'sentry/locale'; +import {IconDocs, IconSettings} from 'sentry/icons'; +import {t, tct} from 'sentry/locale'; import type {Project} from 'sentry/types/project'; import {useOrganization} from 'sentry/utils/useOrganization'; -import {SectionKey} from 'sentry/views/issueDetails/streamline/context'; -import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection'; - -interface TroubleshootingItem { - description: string; - docUrl: string; - title: string; -} - -const TROUBLESHOOTING_ITEMS: TroubleshootingItem[] = [ - { - title: t('Verify Artifacts Are Uploaded'), - description: t( - 'For Sentry to de-minify your stack traces you must provide both the minified files (for example, app.min.js) and the corresponding source maps.' - ), - docUrl: - 'https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/#verify-artifacts-are-uploaded', - }, - { - title: t("Verify That You're Building Source Maps"), - description: t( - 'Ensure your bundler (Webpack, Rollup, Vite, etc.) is configured to emit source maps. For production builds, check that the sourceMaps option is enabled.' - ), - docUrl: - 'https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/#verify-that-youre-building-source-maps', - }, - { - title: t("Verify That You're Running a Production Build"), - description: t( - 'Source maps are typically only generated for production builds. Ensure you are testing against a production or production-like environment, not a dev server output.' - ), - docUrl: - 'https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/#verify-that-youre-running-a-production-build', - }, - { - title: t('Verify Your Source Files Contain Debug ID Injection Snippets'), - description: t( - 'If you are using the Sentry bundler plugin, each source file should contain a debug ID snippet injected at build time. Verify the plugin is running and the snippet appears in your built output.' - ), - docUrl: - 'https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/#verify-your-source-files-contain-debug-id-injection-snippets', - }, -]; interface TroubleshootingSectionProps { project: Project; @@ -63,45 +21,122 @@ export function TroubleshootingSection({project}: TroubleshootingSectionProps) { const settingsUrl = `/settings/${organization.slug}/projects/${project.slug}/source-maps/`; return ( - + + + {t('Troubleshooting suggestions')} + - {TROUBLESHOOTING_ITEMS.map((item, index) => ( - - {item.title} - - - {item.description} - {index === 0 ? ( -
- } - to={settingsUrl} - > - {t('Settings')} - -
- ) : ( - {t('Read the docs')} + + {t('Verify Artifacts Are Uploaded')} + + + + {t( + 'For Sentry to de-minify your stack traces you must provide both the minified files (for example, app.min.js) and the corresponding source maps.' )} - - - - ))} + +
+ } + to={settingsUrl} + > + {t('Settings')} + +
+ + + + + + {t("Verify That You're Building Source Maps")} + + + + {tct( + 'Bundlers and tools (like [tsc]) that generate code, often require you to manually set specific options to generate source maps.', + {tsc: tsc} + )} +
+
+ {tct( + 'If you followed one of our tool-specific guides, verify you configured your tool to emit source maps and that the source maps contain your original source code in the [sourcesContent] field.', + {sourcesContent: sourcesContent} + )} + + + + + + {t("Verify That You're Running a Production Build")} + + + + {t( + 'When running JavaScript build tools (like webpack, Vite, ...) in development-mode/watch-mode, the generated code is sometimes incompatible with our source map uploading processes.' + )} +
+
+ {t( + 'We recommend, especially when testing locally, to run a production build to verify your source maps uploading setup.' + )} + + + + + + {t('Verify Your Source Files Contain Debug ID Injection Snippets')} + + + + {tct( + 'In the JavaScript files you uploaded to Sentry, search for code that roughly looks like [snippet]. This code snippet might look different depending on how you process your code.', + { + snippet: ( + {'e._sentryDebugIds=e._sentryDebugIds||{}'} + ), + } + )} +
+
+ {t( + 'If this code exists in a bundle, that bundle will be able to be matched to a source file. Every bundle you deploy in your app needs to have this snippet in order to be correctly source mapped.' + )} +
+
+ {tct( + "If your source code does not contain this snippet and you're using a Sentry plugin for your bundler, please check that you are using the latest version and please verify that the plugin is correctly processing your files. Set the [debug] option to [true] to print useful debugging information.", + { + debug: debug, + true: true, + } + )} +
+
+ {tct( + "If you're using the Sentry CLI, verify that you're running the [inject] command before you upload to Sentry and before you deploy your files.", + {inject: inject} + )} + + + + {t('Not what you\u2019re looking for?')} - {t('Read all documentation')} + + + {t('Read all documentation')} + - + ); } const FooterRow = styled(Flex)` padding-top: ${p => p.theme.space.sm}; + align-items: center; + gap: ${p => p.theme.space.sm}; `; From 8b5e24a9741e1cf4192438e6720c0a1f67d9d50a Mon Sep 17 00:00:00 2001 From: Abdullah Khan Date: Tue, 7 Apr 2026 18:18:25 +0600 Subject: [PATCH 3/9] feat(source-map-config-issues): Iterating --- .../sourceMapIssues/troubleshootingSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx index db283aa47252ba..40291206a921a0 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx @@ -32,7 +32,7 @@ export function TroubleshootingSection({project}: TroubleshootingSectionProps) { {t( - 'For Sentry to de-minify your stack traces you must provide both the minified files (for example, app.min.js) and the corresponding source maps.' + 'For Sentry to de-minify your stack traces you must provide both the minified files (for example, app.min.js) and the corresponding source maps. You can find them at:' )}
From b43a101728ecd72c3f0873834c68d6a12f4373b3 Mon Sep 17 00:00:00 2001 From: Abdullah Khan Date: Tue, 7 Apr 2026 18:32:07 +0600 Subject: [PATCH 4/9] feat(source-map-config-issues): Iterating --- .../interfaces/crashContent/exception/content.tsx | 10 ++++++---- .../exception/useSourceMapDebuggerData.tsx | 6 +++--- .../issueStackTrace/issueSourceMapsDebuggerAction.tsx | 4 +--- .../sourceMapIssues/diagnosisSection.tsx | 2 +- .../sourceMapIssues/problemSection.tsx | 1 + .../sourceMapIssues/sourceMapIssueDetails.tsx | 3 ++- static/app/views/issueDetails/streamline/context.tsx | 4 ---- 7 files changed, 14 insertions(+), 16 deletions(-) diff --git a/static/app/components/events/interfaces/crashContent/exception/content.tsx b/static/app/components/events/interfaces/crashContent/exception/content.tsx index 0345b95cdffaaf..eb02abef31f906 100644 --- a/static/app/components/events/interfaces/crashContent/exception/content.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/content.tsx @@ -165,7 +165,7 @@ function InnerContent({ hasChainedExceptions: boolean; hiddenExceptions: ExceptionRenderStateMap; isSampleError: boolean; - sourceMapDebuggerData: SourceMapDebugBlueThunderResponse | undefined; + sourceMapDebuggerData: SourceMapDebugBlueThunderResponse; toggleRelatedExceptions: (exceptionId: number) => void; values: ExceptionValue[]; project?: Project; @@ -266,9 +266,11 @@ export function Content({ }: Props) { const {projects} = useProjects({slugs: [projectSlug]}); - const {data: sourceMapDebuggerData} = useSourceMapDebugQuery(projectSlug, event.id, { - sdkName: event.sdk?.name ?? null, - }); + const {data: sourceMapDebuggerData} = useSourceMapDebugQuery( + projectSlug, + event.id, + event.sdk?.name ?? null + ); const {hiddenExceptions, toggleRelatedExceptions, expandException} = useHiddenExceptions(values); diff --git a/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx b/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx index f3aad97dbd1d0e..c96177a6f471a3 100644 --- a/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx @@ -52,11 +52,11 @@ export interface SourceMapDebugBlueThunderResponse { export function useSourceMapDebugQuery( projectSlug: string, eventId: string, - options?: {sdkName?: string | null} + sdkName: string | null = null ) { const organization = useOrganization({allowNull: true}); - const isSdkThatShouldShowSourceMapsDebugger = options?.sdkName - ? options.sdkName.startsWith('sentry.javascript.') + const isSdkThatShouldShowSourceMapsDebugger = sdkName + ? sdkName.startsWith('sentry.javascript.') : true; return useApiQuery( [ diff --git a/static/app/components/stackTrace/issueStackTrace/issueSourceMapsDebuggerAction.tsx b/static/app/components/stackTrace/issueStackTrace/issueSourceMapsDebuggerAction.tsx index 91728e87def6de..8cb5ef097e5931 100644 --- a/static/app/components/stackTrace/issueStackTrace/issueSourceMapsDebuggerAction.tsx +++ b/static/app/components/stackTrace/issueStackTrace/issueSourceMapsDebuggerAction.tsx @@ -27,9 +27,7 @@ export function IssueSourceMapsDebuggerAction() { const {data: sourceMapDebuggerData} = useSourceMapDebugQuery( project?.slug ?? '', event.id, - { - sdkName: event.sdk?.name ?? null, - } + event.sdk?.name ?? null ); const debuggerFrame = exceptionIndex === undefined diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx index 830b26fc84d8d6..9ac440403a7010 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx @@ -156,7 +156,7 @@ export function DiagnosisSection({sourceMapQuery}: DiagnosisSectionProps) { if (isPending) { return ; } - if (isError || !data) { + if (isError) { return ( } external + // TODO Abdullah Khan: Look into adding platform specific links to source map docs href="https://docs.sentry.io/platforms/javascript/sourcemaps/" > {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 65e976c7fcda21..ea0afaacf9afa7 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails.tsx @@ -17,7 +17,8 @@ interface SourceMapIssueDetailsProps { export function SourceMapIssueDetails({event, project}: SourceMapIssueDetailsProps) { const sourceMapQuery = useSourceMapDebugQuery( project.slug, - event.occurrence?.evidenceData?.sampleEventId + event.occurrence?.evidenceData?.sampleEventId, + event.sdk?.name ?? null ); return ( diff --git a/static/app/views/issueDetails/streamline/context.tsx b/static/app/views/issueDetails/streamline/context.tsx index b8e9b088a98b78..371a2f08335195 100644 --- a/static/app/views/issueDetails/streamline/context.tsx +++ b/static/app/views/issueDetails/streamline/context.tsx @@ -103,10 +103,6 @@ export const enum SectionKey { PROFILE_PREVIEW = 'profile-preview', STACKTRACE_FLAMEGRAPH = 'stacktrace-flamegraph', - - CONFIGURATION_PROBLEM = 'configuration-problem', - CONFIGURATION_DIAGNOSIS = 'configuration-diagnosis', - CONFIGURATION_TROUBLESHOOTING = 'configuration-troubleshooting', } /** From cacc0dad948ed64b062e76cb0b564a678b2d8d82 Mon Sep 17 00:00:00 2001 From: Abdullah Khan Date: Wed, 8 Apr 2026 13:31:51 +0600 Subject: [PATCH 5/9] feat(source-map-issues): Addressing pr suggestions --- .../interfaces/crashContent/exception/content.tsx | 2 +- .../exception/useSourceMapDebuggerData.tsx | 11 +++++++---- .../sourceMapIssues/troubleshootingSection.tsx | 12 ++---------- 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/static/app/components/events/interfaces/crashContent/exception/content.tsx b/static/app/components/events/interfaces/crashContent/exception/content.tsx index eb02abef31f906..9fc877c7d1496d 100644 --- a/static/app/components/events/interfaces/crashContent/exception/content.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/content.tsx @@ -165,7 +165,7 @@ function InnerContent({ hasChainedExceptions: boolean; hiddenExceptions: ExceptionRenderStateMap; isSampleError: boolean; - sourceMapDebuggerData: SourceMapDebugBlueThunderResponse; + sourceMapDebuggerData: SourceMapDebugBlueThunderResponse | undefined; toggleRelatedExceptions: (exceptionId: number) => void; values: ExceptionValue[]; project?: Project; diff --git a/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx b/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx index c96177a6f471a3..b732b41fd55304 100644 --- a/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx @@ -55,9 +55,8 @@ export function useSourceMapDebugQuery( sdkName: string | null = null ) { const organization = useOrganization({allowNull: true}); - const isSdkThatShouldShowSourceMapsDebugger = sdkName - ? sdkName.startsWith('sentry.javascript.') - : true; + const isSdkThatShouldShowSourceMapsDebugger = + sdkName?.startsWith('sentry.javascript.') ?? false; return useApiQuery( [ getApiUrl( @@ -72,7 +71,11 @@ export function useSourceMapDebugQuery( ), ], { - enabled: isSdkThatShouldShowSourceMapsDebugger && organization !== null, + enabled: + isSdkThatShouldShowSourceMapsDebugger && + !!organization && + !!projectSlug && + !!eventId, staleTime: Infinity, retry: false, refetchOnWindowFocus: false, diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx index 40291206a921a0..85989132f28ea5 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx @@ -1,5 +1,3 @@ -import styled from '@emotion/styled'; - import {LinkButton} from '@sentry/scraps/button'; import {InlineCode} from '@sentry/scraps/code'; import {Disclosure} from '@sentry/scraps/disclosure'; @@ -121,7 +119,7 @@ export function TroubleshootingSection({project}: TroubleshootingSectionProps) { - + {t('Not what you\u2019re looking for?')} @@ -129,14 +127,8 @@ export function TroubleshootingSection({project}: TroubleshootingSectionProps) { {t('Read all documentation')} - + ); } - -const FooterRow = styled(Flex)` - padding-top: ${p => p.theme.space.sm}; - align-items: center; - gap: ${p => p.theme.space.sm}; -`; From b8fd2179fde7d4d7387aa73f6ed67cb5d208be6c Mon Sep 17 00:00:00 2001 From: Abdullah Khan Date: Wed, 8 Apr 2026 22:44:02 +0600 Subject: [PATCH 6/9] feat(source-map-issues): Addressing pr suggestions --- .../configurationIssues/sourceMapIssues/diagnosisSection.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx index 9ac440403a7010..42e02d35e41129 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx @@ -150,10 +150,10 @@ interface DiagnosisSectionProps { } export function DiagnosisSection({sourceMapQuery}: DiagnosisSectionProps) { - const {data, isPending, isError} = sourceMapQuery; + const {data, isLoading, isError} = sourceMapQuery; function renderContent(): ReactNode { - if (isPending) { + if (isLoading) { return ; } if (isError) { From 311092af989c89db2945150520c73504520260de Mon Sep 17 00:00:00 2001 From: Abdullah Khan Date: Wed, 8 Apr 2026 23:00:27 +0600 Subject: [PATCH 7/9] feat(source-map-issues): Addressing pr suggestions --- .../sourceMapIssues/diagnosisSection.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx index 42e02d35e41129..1216e6c3d45e66 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx @@ -14,7 +14,13 @@ import {LoadingIndicator} from 'sentry/components/loadingIndicator'; import {IconOpen} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; -function getDiagnosisMessage(data: SourceMapDebugBlueThunderResponse): ReactNode | null { +function getDiagnosisMessage( + data: SourceMapDebugBlueThunderResponse | undefined +): ReactNode | null { + if (!data) { + return null; + } + const release = data.release ? ( {data.release} ) : null; From 0955fabb69abc63b0790f2f5d6657d2ca7d75c3c Mon Sep 17 00:00:00 2001 From: Abdullah Khan Date: Thu, 9 Apr 2026 17:16:50 +0600 Subject: [PATCH 8/9] feat(source-map-issues): Addressing pr suggestions --- .../exception/useSourceMapDebuggerData.tsx | 10 +- static/app/utils/issueTypeConfig/types.tsx | 8 +- .../sourceMapIssues/diagnosisSection.tsx | 59 ++++----- .../sourceMapIssues/problemSection.tsx | 8 +- .../troubleshootingSection.tsx | 116 +++++++++--------- 5 files changed, 101 insertions(+), 100 deletions(-) diff --git a/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx b/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx index b732b41fd55304..a3912babd0a5a9 100644 --- a/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx @@ -2,7 +2,8 @@ import type {FrameSourceMapDebuggerData} from 'sentry/components/events/interfac import type {Event} from 'sentry/types/event'; import type {PlatformKey} from 'sentry/types/project'; import {getApiUrl} from 'sentry/utils/api/getApiUrl'; -import {useApiQuery} from 'sentry/utils/queryClient'; +import {useApiQuery, type UseApiQueryResult} from 'sentry/utils/queryClient'; +import type {RequestError} from 'sentry/utils/requestError/requestError'; import {useOrganization} from 'sentry/utils/useOrganization'; interface SourceMapDebugBlueThunderResponseFrame { @@ -49,11 +50,16 @@ export interface SourceMapDebugBlueThunderResponse { min_debug_id_sdk_version?: string | null; } +export type SourceMapDebugQueryResult = UseApiQueryResult< + SourceMapDebugBlueThunderResponse, + RequestError +>; + export function useSourceMapDebugQuery( projectSlug: string, eventId: string, sdkName: string | null = null -) { +): SourceMapDebugQueryResult { const organization = useOrganization({allowNull: true}); const isSdkThatShouldShowSourceMapsDebugger = sdkName?.startsWith('sentry.javascript.') ?? false; diff --git a/static/app/utils/issueTypeConfig/types.tsx b/static/app/utils/issueTypeConfig/types.tsx index 65c56c4df807d6..5c4d73a8ef2bb9 100644 --- a/static/app/utils/issueTypeConfig/types.tsx +++ b/static/app/utils/issueTypeConfig/types.tsx @@ -74,12 +74,14 @@ export type IssueTypeConfig = { * Configuration for the issue-level information header */ header: { - // Controls the "X in this issue" event navigation row (First/Latest/Recommended) + /** + * Controls the "X in this issue" event navigation row + */ eventNavigation: DisabledWithReasonConfig; filterBar: DisabledWithReasonConfig & { - // Display the environment filter in an inactive, locked state + /** Display the environment filter in an inactive, locked state */ fixedEnvironment?: boolean; - // The search bar can be hidden if the issue type does not support event filtering + /** The search bar can be hidden if the issue type does not support event filtering */ searchBar?: DisabledWithReasonConfig; }; graph: DisabledWithReasonConfig & { diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx index 1216e6c3d45e66..e939d3fc2dbf99 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx @@ -3,24 +3,18 @@ import type {ReactNode} from 'react'; import {LinkButton} from '@sentry/scraps/button'; import {InlineCode} from '@sentry/scraps/code'; import {Stack} from '@sentry/scraps/layout'; -import {Text} from '@sentry/scraps/text'; +import {Heading, Text} from '@sentry/scraps/text'; import type { SourceMapDebugBlueThunderResponse, - useSourceMapDebugQuery, + SourceMapDebugQueryResult, } from 'sentry/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData'; import {LoadingError} from 'sentry/components/loadingError'; import {LoadingIndicator} from 'sentry/components/loadingIndicator'; import {IconOpen} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; -function getDiagnosisMessage( - data: SourceMapDebugBlueThunderResponse | undefined -): ReactNode | null { - if (!data) { - return null; - } - +function getDiagnosisMessage(data: SourceMapDebugBlueThunderResponse): ReactNode | null { const release = data.release ? ( {data.release} ) : null; @@ -127,7 +121,7 @@ function getDiagnosisMessage( if (!data.project_has_some_artifact_bundle && !data.release_has_some_artifact) { return ( - + {release ? tct( @@ -136,23 +130,31 @@ function getDiagnosisMessage( ) : t('No source map artifacts have been uploaded for this project.')} - } - external - href="https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/" - > - {t('Upload Instructions')} - +
+ } + external + href="https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/" + > + {t('Upload Instructions')} + +
); } - return null; + return ( + + {t( + 'Source maps appear to be configured but Sentry could not pinpoint the exact issue.' + )} + + ); } interface DiagnosisSectionProps { - sourceMapQuery: ReturnType; + sourceMapQuery: SourceMapDebugQueryResult; } export function DiagnosisSection({sourceMapQuery}: DiagnosisSectionProps) { @@ -170,23 +172,12 @@ export function DiagnosisSection({sourceMapQuery}: DiagnosisSectionProps) { ); } - const message = getDiagnosisMessage(data); - return ( - message ?? ( - - {t( - 'Source maps appear to be configured but Sentry could not pinpoint the exact issue.' - )} - - ) - ); + return getDiagnosisMessage(data); } return ( - - - {t('Diagnosis')} - + + {t('Diagnosis')} {renderContent()} ); diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx index 9e4cde1f973788..e5a61003bbf324 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx @@ -1,16 +1,14 @@ import {LinkButton} from '@sentry/scraps/button'; import {Stack} from '@sentry/scraps/layout'; -import {Text} from '@sentry/scraps/text'; +import {Heading, Text} from '@sentry/scraps/text'; import {IconInfo} from 'sentry/icons'; import {t} from 'sentry/locale'; export function ProblemSection() { return ( - - - {t('Problem')} - + + {t('Problem')} {t( "Your source maps aren't configured correctly, so stack traces will show minified code instead of your original source. Fix this to see the exact file, line, and function causing the error." diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx index 85989132f28ea5..6b2c8ab8cda2f5 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx @@ -2,7 +2,7 @@ import {LinkButton} from '@sentry/scraps/button'; import {InlineCode} from '@sentry/scraps/code'; import {Disclosure} from '@sentry/scraps/disclosure'; import {Flex, Stack} from '@sentry/scraps/layout'; -import {Text} from '@sentry/scraps/text'; +import {Heading, Prose, Text} from '@sentry/scraps/text'; import {ExternalLink} from 'sentry/components/links/externalLink'; import {IconDocs, IconSettings} from 'sentry/icons'; @@ -20,9 +20,7 @@ export function TroubleshootingSection({project}: TroubleshootingSectionProps) { return ( - - {t('Troubleshooting suggestions')} - + {t('Troubleshooting suggestions')} {t('Verify Artifacts Are Uploaded')} @@ -51,18 +49,20 @@ export function TroubleshootingSection({project}: TroubleshootingSectionProps) { {t("Verify That You're Building Source Maps")} - - {tct( - 'Bundlers and tools (like [tsc]) that generate code, often require you to manually set specific options to generate source maps.', - {tsc: tsc} - )} -
-
- {tct( - 'If you followed one of our tool-specific guides, verify you configured your tool to emit source maps and that the source maps contain your original source code in the [sourcesContent] field.', - {sourcesContent: sourcesContent} - )} - + +

+ {tct( + 'Bundlers and tools (like [tsc]) that generate code, often require you to manually set specific options to generate source maps.', + {tsc: tsc} + )} +

+

+ {tct( + 'If you followed one of our tool-specific guides, verify you configured your tool to emit source maps and that the source maps contain your original source code in the [sourcesContent] field.', + {sourcesContent: sourcesContent} + )} +

+ @@ -70,16 +70,18 @@ export function TroubleshootingSection({project}: TroubleshootingSectionProps) { {t("Verify That You're Running a Production Build")} - - {t( - 'When running JavaScript build tools (like webpack, Vite, ...) in development-mode/watch-mode, the generated code is sometimes incompatible with our source map uploading processes.' - )} -
-
- {t( - 'We recommend, especially when testing locally, to run a production build to verify your source maps uploading setup.' - )} - + +

+ {t( + 'When running JavaScript build tools (like webpack, Vite, ...) in development-mode/watch-mode, the generated code is sometimes incompatible with our source map uploading processes.' + )} +

+

+ {t( + 'We recommend, especially when testing locally, to run a production build to verify your source maps uploading setup.' + )} +

+ @@ -87,36 +89,38 @@ export function TroubleshootingSection({project}: TroubleshootingSectionProps) { {t('Verify Your Source Files Contain Debug ID Injection Snippets')} - - {tct( - 'In the JavaScript files you uploaded to Sentry, search for code that roughly looks like [snippet]. This code snippet might look different depending on how you process your code.', - { - snippet: ( - {'e._sentryDebugIds=e._sentryDebugIds||{}'} - ), - } - )} -
-
- {t( - 'If this code exists in a bundle, that bundle will be able to be matched to a source file. Every bundle you deploy in your app needs to have this snippet in order to be correctly source mapped.' - )} -
-
- {tct( - "If your source code does not contain this snippet and you're using a Sentry plugin for your bundler, please check that you are using the latest version and please verify that the plugin is correctly processing your files. Set the [debug] option to [true] to print useful debugging information.", - { - debug: debug, - true: true, - } - )} -
-
- {tct( - "If you're using the Sentry CLI, verify that you're running the [inject] command before you upload to Sentry and before you deploy your files.", - {inject: inject} - )} - + +

+ {tct( + 'In the JavaScript files you uploaded to Sentry, search for code that roughly looks like [snippet]. This code snippet might look different depending on how you process your code.', + { + snippet: ( + {'e._sentryDebugIds=e._sentryDebugIds||{}'} + ), + } + )} +

+

+ {t( + 'If this code exists in a bundle, that bundle will be able to be matched to a source file. Every bundle you deploy in your app needs to have this snippet in order to be correctly source mapped.' + )} +

+

+ {tct( + "If your source code does not contain this snippet and you're using a Sentry plugin for your bundler, please check that you are using the latest version and please verify that the plugin is correctly processing your files. Set the [debug] option to [true] to print useful debugging information.", + { + debug: debug, + true: true, + } + )} +

+

+ {tct( + "If you're using the Sentry CLI, verify that you're running the [inject] command before you upload to Sentry and before you deploy your files.", + {inject: inject} + )} +

+ From 81dfb8de0535df369d1acf519561839a13b95242 Mon Sep 17 00:00:00 2001 From: Abdullah Khan Date: Thu, 9 Apr 2026 17:49:10 +0600 Subject: [PATCH 9/9] feat(source-map-issues): Addressing pr suggestions --- .../sourceMapIssues/diagnosisSection.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx index e939d3fc2dbf99..b70402d33fa9a6 100644 --- a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx +++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx @@ -14,7 +14,15 @@ import {LoadingIndicator} from 'sentry/components/loadingIndicator'; import {IconOpen} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; -function getDiagnosisMessage(data: SourceMapDebugBlueThunderResponse): ReactNode | null { +function getDiagnosisMessage( + data: SourceMapDebugBlueThunderResponse | undefined +): ReactNode | null { + if (!data) { + return ( + {t('Unable to load source map diagnostic information for this event.')} + ); + } + const release = data.release ? ( {data.release} ) : null;