feat(source-map-config-issues): Implementing problem, diagnosis and troubleshooting section designs (#112393)

dev-ui link for testing: [issue in dev
org](https://instrument-gc.dev.getsentry.net:7999/issues/7389912885/?project=4511172452286464&query=&referrer=issue-stream)

A little context on the endpoint used for the diagnosis section.

- `GET
/api/0/projects/{org}/{project}/events/{event_id}/source-map-debug-blue-thunder-edition/`
— given an event, checks whether source maps can be resolved for each
frame across three paths.
- - Debug ID — whether the bundle has a debug ID injected and the
corresponding artifacts are uploaded
- - Release artifacts — whether the minified file and source map resolve
correctly for the event's release/dist
- - Scraping — whether Sentry attempted to fetch source maps from the
deployed URL and the outcome (success, not found, disabled, timeout,
etc.)

<img width="1185" height="825" alt="Screenshot 2026-04-08 at 12 21
20 AM"
src="https://github.com/user-attachments/assets/9b41cf59-16c8-40ff-babf-7e36d9893826"
/>

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

Author: Abdkhan14

static/app/components/events/interfaces/crashContent/exception/content.tsx

@@ -10,7 +10,8 @@ import {StacktraceBanners} from 'sentry/components/events/interfaces/crashConten
 import {useLineCoverageContext} from 'sentry/components/events/interfaces/crashContent/exception/lineCoverageContext';
 import {
   prepareSourceMapDebuggerFrameInformation,
-  useSourceMapDebuggerData,
+  useSourceMapDebugQuery,
+  type SourceMapDebugBlueThunderResponse,
 } from 'sentry/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData';
 import {renderLinksInText} from 'sentry/components/events/interfaces/crashContent/exception/utils';
 import {getStacktracePlatform} from 'sentry/components/events/interfaces/utils';
@@ -164,7 +165,7 @@ function InnerContent({
   hasChainedExceptions: boolean;
   hiddenExceptions: ExceptionRenderStateMap;
   isSampleError: boolean;
-  sourceMapDebuggerData: ReturnType<typeof useSourceMapDebuggerData>;
+  sourceMapDebuggerData: SourceMapDebugBlueThunderResponse | undefined;
   toggleRelatedExceptions: (exceptionId: number) => void;
   values: ExceptionValue[];
   project?: Project;
@@ -265,7 +266,11 @@ export function Content({
 }: Props) {
   const {projects} = useProjects({slugs: [projectSlug]});
 
-  const sourceMapDebuggerData = useSourceMapDebuggerData(event, projectSlug);
+  const {data: sourceMapDebuggerData} = useSourceMapDebugQuery(
+    projectSlug,
+    event.id,
+    event.sdk?.name ?? null
+  );
   const {hiddenExceptions, toggleRelatedExceptions, expandException} =
     useHiddenExceptions(values);
 

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 {
@@ -33,7 +34,7 @@ interface SourceMapDebugBlueThunderResponseFrame {
   };
 }
 
-interface SourceMapDebugBlueThunderResponse {
+export interface SourceMapDebugBlueThunderResponse {
   dist: string | null;
   exceptions: Array<{
     frames: SourceMapDebugBlueThunderResponseFrame[];
@@ -49,31 +50,43 @@ interface SourceMapDebugBlueThunderResponse {
   min_debug_id_sdk_version?: string | null;
 }
 
-export function useSourceMapDebuggerData(event: Event, projectSlug: string) {
-  const isSdkThatShouldShowSourceMapsDebugger =
-    !!event.sdk?.name?.startsWith('sentry.javascript.');
+export type SourceMapDebugQueryResult = UseApiQueryResult<
+  SourceMapDebugBlueThunderResponse,
+  RequestError
+>;
+
+export function useSourceMapDebugQuery(
+  projectSlug: string,
+  eventId: string,
+  sdkName: string | null = null
+): SourceMapDebugQueryResult {
   const organization = useOrganization({allowNull: true});
-  const {data: sourceMapDebuggerData} = useApiQuery<SourceMapDebugBlueThunderResponse>(
+  const isSdkThatShouldShowSourceMapsDebugger =
+    sdkName?.startsWith('sentry.javascript.') ?? false;
+  return useApiQuery<SourceMapDebugBlueThunderResponse>(
     [
       getApiUrl(
         '/projects/$organizationIdOrSlug/$projectIdOrSlug/events/$eventId/source-map-debug-blue-thunder-edition/',
         {
           path: {
             organizationIdOrSlug: organization!.slug,
             projectIdOrSlug: projectSlug,
-            eventId: event.id,
+            eventId,
           },
         }
       ),
     ],
     {
-      enabled: isSdkThatShouldShowSourceMapsDebugger && organization !== null,
+      enabled:
+        isSdkThatShouldShowSourceMapsDebugger &&
+        !!organization &&
+        !!projectSlug &&
+        !!eventId,
       staleTime: Infinity,
       retry: false,
       refetchOnWindowFocus: false,
     }
   );
-  return sourceMapDebuggerData;
 }
 
 function getDebugIdProgress(

static/app/components/stackTrace/issueStackTrace/issueSourceMapsDebuggerAction.tsx

@@ -6,7 +6,7 @@ import {Button} from '@sentry/scraps/button';
 import {openModal} from 'sentry/actionCreators/modal';
 import {
   prepareSourceMapDebuggerFrameInformation,
-  useSourceMapDebuggerData,
+  useSourceMapDebugQuery,
 } from 'sentry/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData';
 import {SourceMapsDebuggerModal} from 'sentry/components/events/interfaces/sourceMapsDebuggerModal';
 import {VALID_SOURCE_MAP_DEBUGGER_FILE_EXTENSIONS} from 'sentry/components/stackTrace/frame/actions/utils';
@@ -24,7 +24,11 @@ export function IssueSourceMapsDebuggerAction() {
   const {exceptionIndex, hideSourceMapDebugger, project} = useStackTraceContext();
   const organization = useOrganization({allowNull: true});
 
-  const sourceMapDebuggerData = useSourceMapDebuggerData(event, project?.slug ?? '');
+  const {data: sourceMapDebuggerData} = useSourceMapDebugQuery(
+    project?.slug ?? '',
+    event.id,
+    event.sdk?.name ?? null
+  );
   const debuggerFrame =
     exceptionIndex === undefined
       ? undefined

static/app/utils/issueTypeConfig/configurationIssuesConfig.tsx

@@ -1,4 +1,5 @@
 import {t} from 'sentry/locale';
+import {IssueType} from 'sentry/types/group';
 import type {IssueCategoryConfigMapping} from 'sentry/utils/issueTypeConfig/types';
 import {Tab} from 'sentry/views/issueDetails/types';
 
@@ -34,6 +35,7 @@ export const configurationIssuesConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true, searchBar: {enabled: false}},
       graph: {enabled: true, type: 'discover-events'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: false},
     },
@@ -51,4 +53,14 @@ export const configurationIssuesConfig: IssueCategoryConfigMapping = {
     discover: {enabled: false},
     groupingInfo: {enabled: false},
   },
+  [IssueType.SOURCEMAP_CONFIGURATION]: {
+    evidence: null,
+    header: {
+      filterBar: {enabled: false},
+      graph: {enabled: false},
+      eventNavigation: {enabled: false},
+      tagDistribution: {enabled: false},
+      occurrenceSummary: {enabled: false},
+    },
+  },
 };

static/app/utils/issueTypeConfig/cronConfig.tsx

@@ -26,6 +26,7 @@ export const cronConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true},
       graph: {enabled: true, type: 'cron-checks'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: true},
     },

static/app/utils/issueTypeConfig/index.tsx

@@ -52,6 +52,7 @@ const BASE_CONFIG: IssueTypeConfig = {
   header: {
     filterBar: {enabled: true, fixedEnvironment: false, searchBar: {enabled: true}},
     graph: {enabled: true, type: 'discover-events'},
+    eventNavigation: {enabled: true},
     tagDistribution: {enabled: true},
     occurrenceSummary: {enabled: false},
   },

static/app/utils/issueTypeConfig/instrumentationConfig.tsx

@@ -20,6 +20,7 @@ export const instrumentationConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true, searchBar: {enabled: false}},
       graph: {enabled: true, type: 'discover-events'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: false},
     },

static/app/utils/issueTypeConfig/metricConfig.tsx

@@ -107,6 +107,7 @@ export const metricConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true, searchBar: {enabled: false}},
       graph: {enabled: true, type: 'detector-history'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: false},
     },

static/app/utils/issueTypeConfig/metricIssueConfig.tsx

@@ -27,6 +27,7 @@ export const metricIssueConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true},
       graph: {enabled: true, type: 'detector-history'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: false},
     },

static/app/utils/issueTypeConfig/outageConfig.tsx

@@ -35,6 +35,7 @@ export const outageConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true},
       graph: {enabled: true, type: 'cron-checks'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: true},
     },
@@ -69,6 +70,7 @@ export const outageConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true},
       graph: {enabled: true, type: 'uptime-checks'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: true, downtime: true},
     },