From 7ced13b489dda6d6016de2bdef73258ab503342f Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Thu, 6 Nov 2025 12:21:51 -0500
Subject: [PATCH] fix(replay): Navigation away from replay details causes rrweb
 errors

When clicking a breadcrumb to navigate away from replay view (e.g. clicking on error link), it triggers click handlers for setting the player timestamp. This causes a lot of rrweb warnings/errors as it tries to play after the replayer is destroyed since we are navigating away.
---
 .../components/replays/breadcrumbs/breadcrumbIssueLink.tsx  | 5 +++++
 static/app/components/replays/breadcrumbs/errorTitle.tsx    | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/static/app/components/replays/breadcrumbs/breadcrumbIssueLink.tsx b/static/app/components/replays/breadcrumbs/breadcrumbIssueLink.tsx
index 32d6f6edcbaaae..98a6bc4446a884 100644
--- a/static/app/components/replays/breadcrumbs/breadcrumbIssueLink.tsx
+++ b/static/app/components/replays/breadcrumbs/breadcrumbIssueLink.tsx
@@ -1,3 +1,4 @@
+import {useCallback, type MouseEvent} from 'react';
 import styled from '@emotion/styled';
 
 import {ProjectAvatar} from 'sentry/components/core/avatar/projectAvatar';
@@ -25,6 +26,9 @@ function CrumbErrorIssue({frame}: {frame: FeedbackFrame | ErrorFrame}) {
   const organization = useOrganization();
   const project = useProjectFromSlug({organization, projectSlug: frame.data.projectSlug});
   const {groupId} = useReplayGroupContext();
+  const handleClick = useCallback((e: MouseEvent<HTMLAnchorElement>) => {
+    e.stopPropagation();
+  }, []);
 
   const projectAvatar = project ? <ProjectAvatar project={project} size={16} /> : null;
 
@@ -41,6 +45,7 @@ function CrumbErrorIssue({frame}: {frame: FeedbackFrame | ErrorFrame}) {
     <CrumbIssueWrapper>
       {projectAvatar}
       <Link
+        onClick={handleClick}
         to={
           isFeedbackFrame(frame)
             ? {
diff --git a/static/app/components/replays/breadcrumbs/errorTitle.tsx b/static/app/components/replays/breadcrumbs/errorTitle.tsx
index cbd4f2bff44893..c1ffc98a219145 100644
--- a/static/app/components/replays/breadcrumbs/errorTitle.tsx
+++ b/static/app/components/replays/breadcrumbs/errorTitle.tsx
@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, useCallback, type MouseEvent} from 'react';
 import capitalize from 'lodash/capitalize';
 
 import {Link} from 'sentry/components/core/link';
@@ -10,6 +10,9 @@ import useOrganization from 'sentry/utils/useOrganization';
 export default function CrumbErrorTitle({frame}: {frame: ErrorFrame}) {
   const organization = useOrganization();
   const {eventId} = useReplayGroupContext();
+  const handleClick = useCallback((e: MouseEvent<HTMLAnchorElement>) => {
+    e.stopPropagation();
+  }, []);
 
   if (eventId === frame.data.eventId) {
     return <Fragment>Error: This Event</Fragment>;
@@ -21,6 +24,7 @@ export default function CrumbErrorTitle({frame}: {frame: ErrorFrame}) {
     <Fragment>
       {capitalize(level)}:{' '}
       <Link
+        onClick={handleClick}
         to={`/organizations/${organization.slug}/issues/${frame.data.groupId}/events/${frame.data.eventId}/#replay`}
       >
         {getShortEventId(frame.data.eventId)}