diff --git a/static/app/components/events/interfaces/crashContent/exception/content.tsx b/static/app/components/events/interfaces/crashContent/exception/content.tsx
index 66b0a979536a00..9fc877c7d1496d 100644
--- a/static/app/components/events/interfaces/crashContent/exception/content.tsx
+++ b/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);
 
diff --git a/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx b/static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx
index cc4076bcbeca5b..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 {
@@ -33,7 +34,7 @@ interface SourceMapDebugBlueThunderResponseFrame {
   };
 }
 
-interface SourceMapDebugBlueThunderResponse {
+export interface SourceMapDebugBlueThunderResponse {
   dist: string | null;
   exceptions: Array<{
     frames: SourceMapDebugBlueThunderResponseFrame[];
@@ -49,11 +50,20 @@ 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/',
@@ -61,19 +71,22 @@ export function useSourceMapDebuggerData(event: Event, projectSlug: string) {
           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(
diff --git a/static/app/components/stackTrace/issueStackTrace/issueSourceMapsDebuggerAction.tsx b/static/app/components/stackTrace/issueStackTrace/issueSourceMapsDebuggerAction.tsx
index f958fb1c12ff45..8cb5ef097e5931 100644
--- a/static/app/components/stackTrace/issueStackTrace/issueSourceMapsDebuggerAction.tsx
+++ b/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
diff --git a/static/app/utils/issueTypeConfig/configurationIssuesConfig.tsx b/static/app/utils/issueTypeConfig/configurationIssuesConfig.tsx
index 965483e2c87c7b..cac2812ec80181 100644
--- a/static/app/utils/issueTypeConfig/configurationIssuesConfig.tsx
+++ b/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},
+    },
+  },
 };
diff --git a/static/app/utils/issueTypeConfig/cronConfig.tsx b/static/app/utils/issueTypeConfig/cronConfig.tsx
index 25d355d446813d..a085894aa56067 100644
--- a/static/app/utils/issueTypeConfig/cronConfig.tsx
+++ b/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},
     },
diff --git a/static/app/utils/issueTypeConfig/index.tsx b/static/app/utils/issueTypeConfig/index.tsx
index 59b8d6094f166e..31319fddc58cfc 100644
--- a/static/app/utils/issueTypeConfig/index.tsx
+++ b/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},
   },
diff --git a/static/app/utils/issueTypeConfig/instrumentationConfig.tsx b/static/app/utils/issueTypeConfig/instrumentationConfig.tsx
index 17feeeed97ff8b..6f763f5b373e18 100644
--- a/static/app/utils/issueTypeConfig/instrumentationConfig.tsx
+++ b/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},
     },
diff --git a/static/app/utils/issueTypeConfig/metricConfig.tsx b/static/app/utils/issueTypeConfig/metricConfig.tsx
index 5affac8b3d43c0..68e064f5cc4631 100644
--- a/static/app/utils/issueTypeConfig/metricConfig.tsx
+++ b/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},
     },
diff --git a/static/app/utils/issueTypeConfig/metricIssueConfig.tsx b/static/app/utils/issueTypeConfig/metricIssueConfig.tsx
index a047401ff3bb0e..b7dddfaa7fed72 100644
--- a/static/app/utils/issueTypeConfig/metricIssueConfig.tsx
+++ b/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},
     },
diff --git a/static/app/utils/issueTypeConfig/outageConfig.tsx b/static/app/utils/issueTypeConfig/outageConfig.tsx
index d5823a2f1cf441..074711bf29846c 100644
--- a/static/app/utils/issueTypeConfig/outageConfig.tsx
+++ b/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},
     },
diff --git a/static/app/utils/issueTypeConfig/types.tsx b/static/app/utils/issueTypeConfig/types.tsx
index 8a9e66ffaabff1..5c4d73a8ef2bb9 100644
--- a/static/app/utils/issueTypeConfig/types.tsx
+++ b/static/app/utils/issueTypeConfig/types.tsx
@@ -74,10 +74,14 @@ export type IssueTypeConfig = {
    * Configuration for the issue-level information header
    */
   header: {
+    /**
+     * 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/utils/issueTypeConfig/uptimeConfig.tsx b/static/app/utils/issueTypeConfig/uptimeConfig.tsx
index 36b36e5e548b8b..9ee616ea6bb1bd 100644
--- a/static/app/utils/issueTypeConfig/uptimeConfig.tsx
+++ b/static/app/utils/issueTypeConfig/uptimeConfig.tsx
@@ -17,6 +17,7 @@ export const uptimeConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true},
       graph: {enabled: true, type: 'uptime-checks'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: true, downtime: true},
     },
diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx
new file mode 100644
index 00000000000000..b70402d33fa9a6
--- /dev/null
+++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/diagnosisSection.tsx
@@ -0,0 +1,192 @@
+import type {ReactNode} from 'react';
+
+import {LinkButton} from '@sentry/scraps/button';
+import {InlineCode} from '@sentry/scraps/code';
+import {Stack} from '@sentry/scraps/layout';
+import {Heading, Text} from '@sentry/scraps/text';
+
+import type {
+  SourceMapDebugBlueThunderResponse,
+  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 (
+      <Text>{t('Unable to load source map diagnostic information for this event.')}</Text>
+    );
+  }
+
+  const release = data.release ? (
+    <InlineCode variant="neutral">{data.release}</InlineCode>
+  ) : null;
+
+  for (const exception of data.exceptions) {
+    for (const frame of exception.frames) {
+      const rel = frame.release_process;
+      const scraping = frame.scraping_process;
+
+      if (rel) {
+        const filePath = <InlineCode>{rel.abs_path}</InlineCode>;
+
+        if (rel.source_file_lookup_result === 'wrong-dist') {
+          return (
+            <Text>
+              {release
+                ? tct(
+                    'The source file [filePath] was found but the dist value does not match the uploaded artifact in release [release].',
+                    {filePath, release}
+                  )
+                : tct(
+                    'The source file [filePath] was found but the dist value does not match the uploaded artifact.',
+                    {filePath}
+                  )}
+            </Text>
+          );
+        }
+        if (rel.source_map_lookup_result === 'wrong-dist' && rel.source_map_reference) {
+          const mapRef = <InlineCode>{rel.source_map_reference}</InlineCode>;
+          return (
+            <Text>
+              {release
+                ? tct(
+                    'The source map [mapRef] was found but the dist value does not match the uploaded artifact in release [release].',
+                    {mapRef, release}
+                  )
+                : tct(
+                    'The source map [mapRef] was found but the dist value does not match the uploaded artifact.',
+                    {mapRef}
+                  )}
+            </Text>
+          );
+        }
+        if (
+          rel.source_file_lookup_result === 'unsuccessful' &&
+          rel.source_map_reference === null
+        ) {
+          return (
+            <Text>
+              {release
+                ? tct(
+                    'The source file [filePath] could not be found in any uploaded artifact bundle in release [release]. No source map reference was detected.',
+                    {filePath, release}
+                  )
+                : tct(
+                    'The source file [filePath] could not be found in any uploaded artifact bundle. No source map reference was detected.',
+                    {filePath}
+                  )}
+            </Text>
+          );
+        }
+        if (rel.source_map_lookup_result === 'unsuccessful' && rel.source_map_reference) {
+          const mapRef = <InlineCode>{rel.source_map_reference}</InlineCode>;
+          return (
+            <Text>
+              {release
+                ? tct(
+                    'The source map referenced by [filePath] points to [mapRef], but no matching artifact was found in release [release].',
+                    {filePath, mapRef, release}
+                  )
+                : tct(
+                    'The source map referenced by [filePath] points to [mapRef], but no matching artifact was found.',
+                    {filePath, mapRef}
+                  )}
+            </Text>
+          );
+        }
+      }
+
+      if (scraping) {
+        if (scraping.source_file?.status === 'failure') {
+          return (
+            <Text>
+              {tct('Sentry could not fetch the source file at [url]: [reason].', {
+                url: <InlineCode>{scraping.source_file.url}</InlineCode>,
+                reason: scraping.source_file.reason,
+              })}
+            </Text>
+          );
+        }
+        if (scraping.source_map?.status === 'failure') {
+          return (
+            <Text>
+              {tct('Sentry could not fetch the source map at [url]: [reason].', {
+                url: <InlineCode>{scraping.source_map.url}</InlineCode>,
+                reason: scraping.source_map.reason,
+              })}
+            </Text>
+          );
+        }
+      }
+    }
+  }
+
+  if (!data.project_has_some_artifact_bundle && !data.release_has_some_artifact) {
+    return (
+      <Stack gap="lg">
+        <Text>
+          {release
+            ? tct(
+                'No source map artifacts have been uploaded for this project in release [release].',
+                {release}
+              )
+            : t('No source map artifacts have been uploaded for this project.')}
+        </Text>
+        <div>
+          <LinkButton
+            size="sm"
+            icon={<IconOpen />}
+            external
+            href="https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/"
+          >
+            {t('Upload Instructions')}
+          </LinkButton>
+        </div>
+      </Stack>
+    );
+  }
+
+  return (
+    <Text>
+      {t(
+        'Source maps appear to be configured but Sentry could not pinpoint the exact issue.'
+      )}
+    </Text>
+  );
+}
+
+interface DiagnosisSectionProps {
+  sourceMapQuery: SourceMapDebugQueryResult;
+}
+
+export function DiagnosisSection({sourceMapQuery}: DiagnosisSectionProps) {
+  const {data, isLoading, isError} = sourceMapQuery;
+
+  function renderContent(): ReactNode {
+    if (isLoading) {
+      return <LoadingIndicator mini />;
+    }
+    if (isError) {
+      return (
+        <LoadingError
+          message={t('Unable to load source map diagnostic information for this event.')}
+        />
+      );
+    }
+
+    return getDiagnosisMessage(data);
+  }
+
+  return (
+    <Stack gap="lg" padding="lg">
+      <Heading as="h3">{t('Diagnosis')}</Heading>
+      {renderContent()}
+    </Stack>
+  );
+}
diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx
new file mode 100644
index 00000000000000..e5a61003bbf324
--- /dev/null
+++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/problemSection.tsx
@@ -0,0 +1,30 @@
+import {LinkButton} from '@sentry/scraps/button';
+import {Stack} from '@sentry/scraps/layout';
+import {Heading, Text} from '@sentry/scraps/text';
+
+import {IconInfo} from 'sentry/icons';
+import {t} from 'sentry/locale';
+
+export function ProblemSection() {
+  return (
+    <Stack gap="lg" padding="lg">
+      <Heading as="h3">{t('Problem')}</Heading>
+      <Text>
+        {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."
+        )}
+      </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/"
+        >
+          {t('Why configure source maps?')}
+        </LinkButton>
+      </div>
+    </Stack>
+  );
+}
diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails.tsx
new file mode 100644
index 00000000000000..ea0afaacf9afa7
--- /dev/null
+++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails.tsx
@@ -0,0 +1,33 @@
+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';
+import {TroubleshootingSection} from './troubleshootingSection';
+
+interface SourceMapIssueDetailsProps {
+  event: Event;
+  group: Group;
+  project: Project;
+}
+
+export function SourceMapIssueDetails({event, project}: SourceMapIssueDetailsProps) {
+  const sourceMapQuery = useSourceMapDebugQuery(
+    project.slug,
+    event.occurrence?.evidenceData?.sampleEventId,
+    event.sdk?.name ?? null
+  );
+
+  return (
+    <div>
+      <ProblemSection />
+      <SectionDivider orientation="horizontal" />
+      <DiagnosisSection sourceMapQuery={sourceMapQuery} />
+      <SectionDivider orientation="horizontal" />
+      <TroubleshootingSection project={project} />
+    </div>
+  );
+}
diff --git a/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx
new file mode 100644
index 00000000000000..6b2c8ab8cda2f5
--- /dev/null
+++ b/static/app/views/issueDetails/configurationIssues/sourceMapIssues/troubleshootingSection.tsx
@@ -0,0 +1,138 @@
+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 {Heading, Prose, Text} from '@sentry/scraps/text';
+
+import {ExternalLink} from 'sentry/components/links/externalLink';
+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';
+
+interface TroubleshootingSectionProps {
+  project: Project;
+}
+
+export function TroubleshootingSection({project}: TroubleshootingSectionProps) {
+  const organization = useOrganization();
+  const settingsUrl = `/settings/${organization.slug}/projects/${project.slug}/source-maps/`;
+
+  return (
+    <Stack gap="md" padding="lg">
+      <Heading as="h3">{t('Troubleshooting suggestions')}</Heading>
+      <Stack gap="sm">
+        <Disclosure size="md" defaultExpanded>
+          <Disclosure.Title>{t('Verify Artifacts Are Uploaded')}</Disclosure.Title>
+          <Disclosure.Content>
+            <Stack gap="lg">
+              <Text>
+                {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. You can find them at:'
+                )}
+              </Text>
+              <div>
+                <LinkButton
+                  size="sm"
+                  priority="primary"
+                  icon={<IconSettings />}
+                  to={settingsUrl}
+                >
+                  {t('Settings')}
+                </LinkButton>
+              </div>
+            </Stack>
+          </Disclosure.Content>
+        </Disclosure>
+        <Disclosure size="md">
+          <Disclosure.Title>
+            {t("Verify That You're Building Source Maps")}
+          </Disclosure.Title>
+          <Disclosure.Content>
+            <Prose>
+              <p>
+                {tct(
+                  'Bundlers and tools (like [tsc]) that generate code, often require you to manually set specific options to generate source maps.',
+                  {tsc: <InlineCode>tsc</InlineCode>}
+                )}
+              </p>
+              <p>
+                {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: <InlineCode>sourcesContent</InlineCode>}
+                )}
+              </p>
+            </Prose>
+          </Disclosure.Content>
+        </Disclosure>
+        <Disclosure size="md">
+          <Disclosure.Title>
+            {t("Verify That You're Running a Production Build")}
+          </Disclosure.Title>
+          <Disclosure.Content>
+            <Prose>
+              <p>
+                {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.'
+                )}
+              </p>
+              <p>
+                {t(
+                  'We recommend, especially when testing locally, to run a production build to verify your source maps uploading setup.'
+                )}
+              </p>
+            </Prose>
+          </Disclosure.Content>
+        </Disclosure>
+        <Disclosure size="md">
+          <Disclosure.Title>
+            {t('Verify Your Source Files Contain Debug ID Injection Snippets')}
+          </Disclosure.Title>
+          <Disclosure.Content>
+            <Prose>
+              <p>
+                {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: (
+                      <InlineCode>{'e._sentryDebugIds=e._sentryDebugIds||{}'}</InlineCode>
+                    ),
+                  }
+                )}
+              </p>
+              <p>
+                {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.'
+                )}
+              </p>
+              <p>
+                {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: <InlineCode>debug</InlineCode>,
+                    true: <InlineCode>true</InlineCode>,
+                  }
+                )}
+              </p>
+              <p>
+                {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: <InlineCode>inject</InlineCode>}
+                )}
+              </p>
+            </Prose>
+          </Disclosure.Content>
+        </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/">
+            <Flex align="center" gap="xs">
+              <IconDocs size="xs" />
+              {t('Read all documentation')}
+            </Flex>
+          </ExternalLink>
+        </Flex>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
index 42629448e60edc..e044f667999409 100644
--- a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
+++ b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
@@ -76,6 +76,7 @@ import {
 } from 'sentry/utils/platform';
 import {getReplayIdFromEvent} from 'sentry/utils/replays/getReplayIdFromEvent';
 import {useOrganization} from 'sentry/utils/useOrganization';
+import {SourceMapIssueDetails} from 'sentry/views/issueDetails/configurationIssues/sourceMapIssues/sourceMapIssueDetails';
 import {MetricIssuesSection} from 'sentry/views/issueDetails/metricIssues/metricIssuesSection';
 import {
   getHangProfileData,
@@ -157,6 +158,10 @@ export function EventDetailsContent({
 
   const issueTypeConfig = getConfigForIssueType(group, group.project);
 
+  if (group.issueType === IssueType.SOURCEMAP_CONFIGURATION) {
+    return <SourceMapIssueDetails group={group} event={event} project={project} />;
+  }
+
   return (
     <Fragment>
       {hasStreamlinedUI && (
diff --git a/static/app/views/issueDetails/streamline/eventDetails.tsx b/static/app/views/issueDetails/streamline/eventDetails.tsx
index a50e6f96e6f52b..709efd7cdc137f 100644
--- a/static/app/views/issueDetails/streamline/eventDetails.tsx
+++ b/static/app/views/issueDetails/streamline/eventDetails.tsx
@@ -6,6 +6,7 @@ import {ErrorBoundary} from 'sentry/components/errorBoundary';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
+import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
 import {useIsStuck} from 'sentry/utils/useIsStuck';
 import {useMedia} from 'sentry/utils/useMedia';
 import {
@@ -28,10 +29,14 @@ export function EventDetails({group, event, project}: EventDetailsContentProps)
     );
   }
 
+  const issueTypeConfig = getConfigForIssueType(group, project);
+
   return (
     <PageErrorBoundary mini message={t('There was an error loading the event content')}>
       <GroupContent role="main">
-        <StickyEventNav event={event} group={group} />
+        {issueTypeConfig.header.eventNavigation.enabled && (
+          <StickyEventNav event={event} group={group} />
+        )}
         <ContentPadding>
           <EventDetailsContent group={group} event={event} project={project} />
         </ContentPadding>
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 => (
               <div {...tourProps}>
                 <GroupContent>
-                  {groupReprocessingStatus !== ReprocessingStatus.REPROCESSING && (
-                    <NavigationSidebarWrapper hasToggleSidebar={!hasFilterBar}>
-                      <IssueEventNavigation event={event} group={group} />
-                      {/* Since the event details header is disabled, display the sidebar toggle here */}
-                      {!hasFilterBar && <ToggleSidebar size="sm" />}
-                    </NavigationSidebarWrapper>
-                  )}
+                  {groupReprocessingStatus !== ReprocessingStatus.REPROCESSING &&
+                    issueTypeConfig.header.eventNavigation.enabled && (
+                      <NavigationSidebarWrapper hasToggleSidebar={!hasFilterBar}>
+                        <IssueEventNavigation event={event} group={group} />
+                        {/* Since the event details header is disabled, display the sidebar toggle here */}
+                        {!hasFilterBar && <ToggleSidebar size="sm" />}
+                      </NavigationSidebarWrapper>
+                    )}
                   <ContentPadding>{children}</ContentPadding>
                 </GroupContent>
               </div>