feat(replays): Link issue replay error counts

static/app/components/replays/table/replayTableColumns.tsx

@@ -23,7 +23,6 @@ import {ScoreBar} from 'sentry/components/scoreBar';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {IconNot} from 'sentry/icons';
 import {IconCursorArrow} from 'sentry/icons/iconCursorArrow';
-import {IconFire} from 'sentry/icons/iconFire';
 import {IconOpen} from 'sentry/icons/iconOpen';
 import {IconPlay} from 'sentry/icons/iconPlay';
 import {t, tct} from 'sentry/locale';
@@ -249,16 +248,7 @@ export const ReplayCountErrorsColumn: ReplayTableColumn = {
         key="countErrors"
         data-test-id="replay-table-column-count-errors"
       >
-        <TabularNumber>
-          {replay.count_errors ? (
-            <Flex gap="xs">
-              <IconFire variant="danger" />
-              {replay.count_errors}
-            </Flex>
-          ) : (
-            0
-          )}
-        </TabularNumber>
+        <TabularNumber>{replay.count_errors ?? 0}</TabularNumber>
         {showDropdownFilters ? (
           <NumericDropdownFilter type="count_errors" val={replay.count_errors ?? 0} />
         ) : null}

static/app/views/issueDetails/groupReplays/groupReplays.spec.tsx

@@ -458,6 +458,7 @@ describe('GroupReplays', () => {
 
       const expectedQuery =
         'playlistEnd=2022-09-28T23%3A29%3A13&playlistStart=2022-06-30T23%3A29%3A13&query=id%3A%5B346789a703f6454384f1de473b8b9fcc%2Cb05dae9b6be54d21a4d5ad9f8f02b780%5D&referrer=issueReplays';
+      const expectedErrorsQuery = `${expectedQuery}&t_main=errors`;
 
       // Expect the first row to have the correct href
       expect(
@@ -479,6 +480,18 @@ describe('GroupReplays', () => {
         `/organizations/org-slug/explore/replays/${REPLAY_ID_2}/?${expectedQuery}`
       );
 
+      const issueEventLinks = screen.getAllByRole('link', {
+        name: 'View events for this issue',
+      });
+      expect(issueEventLinks[0]).toHaveAttribute(
+        'href',
+        `/organizations/org-slug/explore/replays/${REPLAY_ID_1}/?${expectedErrorsQuery}`
+      );
+      expect(issueEventLinks[1]).toHaveAttribute(
+        'href',
+        `/organizations/org-slug/explore/replays/${REPLAY_ID_2}/?${expectedErrorsQuery}`
+      );
+
       // Expect the first row to have the correct duration
       expect(screen.getByText('14:32:26')).toBeInTheDocument();
 

static/app/views/issueDetails/groupReplays/groupReplays.tsx

@@ -4,6 +4,7 @@ import type {Location, Query} from 'history';
 
 import {Button} from '@sentry/scraps/button';
 import {Flex, Stack} from '@sentry/scraps/layout';
+import {Link} from '@sentry/scraps/link';
 
 import {Placeholder} from 'sentry/components/placeholder';
 import {
@@ -25,6 +26,7 @@ import {
   ReplayOSColumn,
   ReplayPlayPauseColumn,
   ReplaySessionColumn,
+  type ReplayTableColumn,
 } from 'sentry/components/replays/table/replayTableColumns';
 import {usePlaylistQuery} from 'sentry/components/replays/usePlaylistQuery';
 import {replayVideoPlatforms} from 'sentry/data/platformCategories';
@@ -34,12 +36,14 @@ import type {Group} from 'sentry/types/group';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import type {EventView} from 'sentry/utils/discover/eventView';
 import {useReplayCountForIssues} from 'sentry/utils/replayCount/useReplayCountForIssues';
+import {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab';
 import {useLoadReplayReader} from 'sentry/utils/replays/hooks/useLoadReplayReader';
 import {useReplayList} from 'sentry/utils/replays/hooks/useReplayList';
 import {useCleanQueryParamsOnRouteLeave} from 'sentry/utils/useCleanQueryParamsOnRouteLeave';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
+import {makeReplaysPathname} from 'sentry/views/explore/replays/pathnames';
 import type {ReplayListRecord} from 'sentry/views/explore/replays/types';
 import {GroupReplaysPlayer} from 'sentry/views/issueDetails/groupReplays/groupReplaysPlayer';
 
@@ -49,12 +53,47 @@ type Props = {
   group: Group;
 };
 
+const IssueErrorsColumn: ReplayTableColumn = {
+  ...ReplayCountErrorsColumn,
+  Component: props => {
+    const {replay, to} = props;
+    const organization = useOrganization();
+
+    if (replay.is_archived) {
+      return null;
+    }
+
+    return (
+      <IssueErrorsLink
+        aria-label={t('View events for this issue')}
+        onClick={event => event.stopPropagation()}
+        title={t('View events for this issue')}
+        to={{
+          pathname: makeReplaysPathname({path: `/${replay.id}/`, organization}),
+          query: {
+            ...(typeof to === 'string' ? undefined : to.query),
+            t_main: TabKey.ERRORS,
+          },
+        }}
+      >
+        <ReplayCountErrorsColumn.Component {...props} />
+      </IssueErrorsLink>
+    );
+  },
+};
+
+const IssueErrorsLink = styled(Link)`
+  position: relative;
+  z-index: 1;
+  text-decoration: underline;
+`;
+
 const VISIBLE_COLUMNS = [
   ReplaySessionColumn,
   ReplayOSColumn,
   ReplayBrowserColumn,
   ReplayDurationColumn,
-  ReplayCountErrorsColumn,
+  IssueErrorsColumn,
   ReplayActivityColumn,
   ReplayDetailsLinkColumn,
 ];
@@ -63,7 +102,7 @@ const VISIBLE_COLUMNS_MOBILE = [
   ReplaySessionColumn,
   ReplayOSColumn,
   ReplayDurationColumn,
-  ReplayCountErrorsColumn,
+  IssueErrorsColumn,
   ReplayActivityColumn,
   ReplayDetailsLinkColumn,
 ];