feat(codecov): Add stack trace line coverage legend and better indication (#102450)

calvin-codecov · priscilawebdev · commit 5441b492c257 · 2025-11-06T08:02:07.000+01:00
Closes https://linear.app/getsentry/issue/CCMRG-1301/polish-codecov-covereduncovered-line-visuals-in-sentry-issues Figma: https://www.figma.com/design/dHDWguapYO8kiWaMZl1GAE/CCMRG-1301?node-id=13-127&t=vLpCzeDAij3CQbHo-1 <img width="1112" height="640" alt="Screenshot 2025-10-30 at 3 25 48 PM" src="https://github.com/user-attachments/assets/eeb02a68-9a17-4b83-866a-1da8ea402cc7" /> - Adds new legend - Changes hover tooltip text for line-by-line - Added a context to intelligently handle when to show the legend based on whether any of the stack frames have code coverage data. I didn't want the legend to be there even when there was no coverage data.
diff --git a/static/app/components/events/interfaces/crashContent/exception/content.spec.tsx b/static/app/components/events/interfaces/crashContent/exception/content.spec.tsx
@@ -16,8 +16,10 @@ import {render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary
 import {textWithMarkupMatcher} from 'sentry-test/utils';
 
 import {Content} from 'sentry/components/events/interfaces/crashContent/exception/content';
+import {LineCoverageProvider} from 'sentry/components/events/interfaces/crashContent/exception/lineCoverageContext';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import {EntryType} from 'sentry/types/event';
+import {CodecovStatusCode, Coverage} from 'sentry/types/integrations';
 import {StackType, StackView} from 'sentry/types/stacktrace';
 
 describe('Exception Content', () => {
@@ -471,4 +473,89 @@ describe('Exception Content', () => {
       expect(screen.getAllByRole('button', {name: 'View Section'})).toHaveLength(4);
     });
   });
+
+  describe('line coverage', () => {
+    it('shows line coverage legend when coverage data is available', async () => {
+      const orgWithCodecov = OrganizationFixture({codecovAccess: true});
+      const event = EventFixture({
+        projectID: project.id,
+        entries: [
+          {
+            type: EntryType.EXCEPTION,
+            data: {
+              values: [
+                {
+                  type: 'ValueError',
+                  value: 'test',
+                  stacktrace: {
+                    frames: [
+                      {
+                        function: 'func4',
+                        filename: 'file4.py',
+                        absPath: '/path/to/file4.py',
+                        lineNo: 50,
+                        context: [
+                          [48, 'def func4():'],
+                          [49, '    try:'],
+                          [50, 'raise ValueError("test")'],
+                          [51, '    except:'],
+                          [52, '        pass'],
+                        ],
+                        inApp: true,
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      });
+
+      MockApiClient.addMockResponse({
+        url: `/projects/${orgWithCodecov.slug}/${project.slug}/stacktrace-coverage/`,
+        body: {
+          status: CodecovStatusCode.COVERAGE_EXISTS,
+          coverageUrl: 'https://codecov.io/gh/owner/repo/file4.py',
+          lineCoverage: [
+            [48, Coverage.NOT_APPLICABLE],
+            [49, Coverage.COVERED],
+            [50, Coverage.NOT_COVERED],
+            [51, Coverage.COVERED],
+            [52, Coverage.PARTIAL],
+          ],
+        },
+      });
+
+      render(
+        <LineCoverageProvider>
+          <Content
+            type={StackType.ORIGINAL}
+            stackView={StackView.APP}
+            event={event}
+            values={event.entries[0]!.data.values}
+            projectSlug={project.slug}
+            newestFirst
+          />
+        </LineCoverageProvider>,
+        {
+          organization: orgWithCodecov,
+          deprecatedRouterMocks: true,
+        }
+      );
+
+      // The frame should be expanded
+      const toggleButton = screen.queryByRole('button', {name: 'Toggle Context'});
+      expect(toggleButton).toBeInTheDocument();
+      expect(toggleButton).toHaveAttribute('data-test-id', 'toggle-button-expanded');
+
+      // The frame context and line coverage legend should be visible
+      expect(await screen.findByText('def func4():')).toBeInTheDocument();
+      expect(await screen.findByText('Line covered by tests')).toBeInTheDocument();
+      expect(await screen.findByText('Line uncovered by tests')).toBeInTheDocument();
+      expect(
+        await screen.findByText('Line partially covered by tests')
+      ).toBeInTheDocument();
+    });
+  });
 });
diff --git a/static/app/components/events/interfaces/crashContent/exception/content.tsx b/static/app/components/events/interfaces/crashContent/exception/content.tsx
@@ -2,9 +2,11 @@ import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
+import {Flex} from 'sentry/components/core/layout/flex';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import {StacktraceBanners} from 'sentry/components/events/interfaces/crashContent/exception/banners/stacktraceBanners';
+import {useLineCoverageContext} from 'sentry/components/events/interfaces/crashContent/exception/lineCoverageContext';
 import {
   prepareSourceMapDebuggerFrameInformation,
   useSourceMapDebuggerData,
@@ -26,6 +28,7 @@ import {
 } from 'sentry/views/issueDetails/streamline/foldSection';
 import {useIsSampleEvent} from 'sentry/views/issueDetails/utils';
 
+import {LineCoverageLegend} from './lineCoverageLegend';
 import {Mechanism} from './mechanism';
 import {RelatedExceptions} from './relatedExceptions';
 import StackTrace from './stackTrace';
@@ -186,6 +189,7 @@ function InnerContent({
     ? exceptionIdx === values.length - 1
     : exceptionIdx === 0;
 
+  const {hasCoverageData} = useLineCoverageContext();
   return (
     <Fragment>
       <StyledPre>
@@ -201,9 +205,17 @@ function InnerContent({
       <ToggleExceptionButton
         {...{hiddenExceptions, toggleRelatedExceptions, values, exception}}
       />
-      {exception.mechanism && (
-        <Mechanism data={exception.mechanism} meta={meta?.[exceptionIdx]?.mechanism} />
-      )}
+      {exception.mechanism || hasCoverageData ? (
+        <RowWrapper direction="row" justify="between">
+          {exception.mechanism && (
+            <Mechanism
+              data={exception.mechanism}
+              meta={meta?.[exceptionIdx]?.mechanism}
+            />
+          )}
+          {hasCoverageData ? <LineCoverageLegend /> : null}
+        </RowWrapper>
+      ) : null}
       <RelatedExceptions
         mechanism={exception.mechanism}
         allExceptions={values}
@@ -261,9 +273,8 @@ export function Content({
     num_exceptions: values?.length ?? 0,
   });
 
-  // Organization context may be unavailable for the shared event view, so we
-  // avoid using the `useOrganization` hook here and directly useContext
-  // instead.
+  // Organization context may be unavailable for the shared event view, so we need
+  // to account for this possibility if we rely on the `useOrganization` hook.
   if (!values) {
     return null;
   }
@@ -400,3 +411,7 @@ const StyledFoldSection = styled(FoldSection)`
     margin-right: ${p => p.theme.space.xl};
   }
 `;
+
+const RowWrapper = styled(Flex)`
+  margin: ${p => p.theme.space.xl} 0 ${p => p.theme.space.xs} 0;
+`;
diff --git a/static/app/components/events/interfaces/crashContent/exception/index.tsx b/static/app/components/events/interfaces/crashContent/exception/index.tsx
@@ -6,6 +6,7 @@ import type {Project} from 'sentry/types/project';
 import {StackView} from 'sentry/types/stacktrace';
 
 import {Content} from './content';
+import {LineCoverageProvider} from './lineCoverageContext';
 import RawContent from './rawContent';
 
 type Props = {
@@ -37,17 +38,19 @@ export function ExceptionContent({
           platform={event.platform}
         />
       ) : (
-        <Content
-          type={stackType}
-          stackView={stackView}
-          values={values}
-          projectSlug={projectSlug}
-          newestFirst={isNewestFramesFirst}
-          event={event}
-          groupingCurrentLevel={groupingCurrentLevel}
-          meta={meta}
-          threadId={threadId}
-        />
+        <LineCoverageProvider>
+          <Content
+            type={stackType}
+            stackView={stackView}
+            values={values}
+            projectSlug={projectSlug}
+            newestFirst={isNewestFramesFirst}
+            event={event}
+            groupingCurrentLevel={groupingCurrentLevel}
+            meta={meta}
+            threadId={threadId}
+          />
+        </LineCoverageProvider>
       )}
     </ErrorBoundary>
   );
diff --git a/static/app/components/events/interfaces/crashContent/exception/lineCoverageContext.tsx b/static/app/components/events/interfaces/crashContent/exception/lineCoverageContext.tsx
@@ -0,0 +1,24 @@
+import {createContext, useContext, useState} from 'react';
+
+// This context is used to track whether any of the frames in the exception have line
+// coverage data to accurately display the line coverage legend if relevant.
+const LineCoverageContext = createContext<{
+  hasCoverageData: boolean;
+  setHasCoverageData: (hasCoverageData: boolean) => void;
+}>({
+  hasCoverageData: false,
+  setHasCoverageData: () => {},
+});
+
+export function LineCoverageProvider({children}: {children: React.ReactNode}) {
+  const [hasCoverageData, setHasCoverageData] = useState(false);
+  return (
+    <LineCoverageContext.Provider value={{hasCoverageData, setHasCoverageData}}>
+      {children}
+    </LineCoverageContext.Provider>
+  );
+}
+
+export const useLineCoverageContext = () => {
+  return useContext(LineCoverageContext);
+};
diff --git a/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx b/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx
@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+import {Flex} from 'sentry/components/core/layout/flex';
+import {coverageText as COVERAGE_TEXT} from 'sentry/components/events/interfaces/frame/contextLineNumber';
+import {Coverage} from 'sentry/types/integrations';
+
+export function LineCoverageLegend() {
+  return (
+    <Flex gap="2xl" align="center" direction="row" paddingBottom="md">
+      <CoveredLine>{COVERAGE_TEXT[Coverage.COVERED]}</CoveredLine>
+      <UncoveredLine>{COVERAGE_TEXT[Coverage.NOT_COVERED]}</UncoveredLine>
+      <PartiallyCoveredLine>{COVERAGE_TEXT[Coverage.PARTIAL]}</PartiallyCoveredLine>
+    </Flex>
+  );
+}
+
+const CoveredLine = styled('div')`
+  padding-right: ${p => p.theme.space.md};
+  border-right: 3px solid ${p => p.theme.tokens.content.success};
+  white-space: nowrap;
+`;
+
+const UncoveredLine = styled('div')`
+  padding-right: ${p => p.theme.space.md};
+  border-right: 3px solid ${p => p.theme.tokens.content.danger};
+  white-space: nowrap;
+`;
+
+const PartiallyCoveredLine = styled('div')`
+  padding-right: ${p => p.theme.space.md};
+  border-right: 3px dashed ${p => p.theme.tokens.content.warning};
+  white-space: nowrap;
+`;
diff --git a/static/app/components/events/interfaces/crashContent/exception/mechanism.tsx b/static/app/components/events/interfaces/crashContent/exception/mechanism.tsx
@@ -98,17 +98,9 @@ export function Mechanism({data: mechanism, meta: mechanismMeta}: Props) {
     }
   });
 
-  return (
-    <Wrapper>
-      <StyledPills>{pills}</StyledPills>
-    </Wrapper>
-  );
+  return <StyledPills>{pills}</StyledPills>;
 }
 
-const Wrapper = styled('div')`
-  margin: ${space(2)} 0 ${space(0.5)} 0;
-`;
-
 const iconStyle = (p: {theme: Theme}) => css`
   transition: 0.1s linear color;
   color: ${p.theme.gray300};
diff --git a/static/app/components/events/interfaces/frame/context.tsx b/static/app/components/events/interfaces/frame/context.tsx
@@ -1,8 +1,9 @@
-import {Fragment, useMemo} from 'react';
+import {Fragment, useEffect, useMemo} from 'react';
 import styled from '@emotion/styled';
 import keyBy from 'lodash/keyBy';
 
 import ClippedBox from 'sentry/components/clippedBox';
+import {useLineCoverageContext} from 'sentry/components/events/interfaces/crashContent/exception/lineCoverageContext';
 import {parseAssembly} from 'sentry/components/events/interfaces/utils';
 import {IconFlag} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -78,6 +79,10 @@ function Context({
   platform,
 }: Props) {
   const organization = useOrganization();
+  const {
+    hasCoverageData: issueHasCoverageData,
+    setHasCoverageData: setIssueHasCoverageData,
+  } = useLineCoverageContext();
 
   const {projects} = useProjects();
   const project = useMemo(
@@ -112,6 +117,12 @@ function Context({
   const hasCoverageData =
     !isLoadingCoverage && coverage?.status === CodecovStatusCode.COVERAGE_EXISTS;
 
+  useEffect(() => {
+    if (hasCoverageData && !issueHasCoverageData) {
+      setIssueHasCoverageData(true);
+    }
+  }, [hasCoverageData, issueHasCoverageData, setIssueHasCoverageData]);
+
   const [lineCoverage = [], hasCoverage] =
     hasCoverageData && coverage?.lineCoverage && !!activeLineNumber! && contextLines
       ? getLineCoverage(contextLines, coverage.lineCoverage)
diff --git a/static/app/components/events/interfaces/frame/contextLineNumber.tsx b/static/app/components/events/interfaces/frame/contextLineNumber.tsx
@@ -13,10 +13,10 @@ interface Props {
   coverage?: Coverage;
 }
 
-const coverageText: Record<Coverage, string | undefined> = {
-  [Coverage.NOT_COVERED]: t('Uncovered'),
-  [Coverage.COVERED]: t('Covered'),
-  [Coverage.PARTIAL]: t('Partially Covered'),
+export const coverageText: Record<Coverage, string | undefined> = {
+  [Coverage.NOT_COVERED]: t('Line uncovered by tests'),
+  [Coverage.COVERED]: t('Line covered by tests'),
+  [Coverage.PARTIAL]: t('Line partially covered by tests'),
   [Coverage.NOT_APPLICABLE]: undefined,
 };
 const coverageClass: Record<Coverage, string | undefined> = {
@@ -63,24 +63,23 @@ const Wrapper = styled('div')`
     margin-right: ${space(1.5)};
     background: transparent;
     min-width: 58px;
-    border-right-style: solid;
-    border-right-color: transparent;
+    border-right: 3px solid transparent;
     user-select: none;
   }
 
   &.covered .line-number {
     background: ${p => p.theme.green100};
+    border-right: 3px solid ${p => p.theme.tokens.content.success};
   }
 
   &.uncovered .line-number {
     background: ${p => p.theme.red100};
-    border-right-color: ${p => p.theme.red300};
+    border-right: 3px solid ${p => p.theme.tokens.content.danger};
   }
 
   &.partial .line-number {
     background: ${p => p.theme.yellow100};
-    border-right-style: dashed;
-    border-right-color: ${p => p.theme.yellow300};
+    border-right: 3px dashed ${p => p.theme.tokens.content.warning};
   }
 
   &.active {
