fix(replay): Navigation away from replay details causes rrweb errors (#102877)

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.

Note there may be more instances of this bug, for now this only
addresses Issue breadcrumbs.

Author: billyvg

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)
             ? {

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)}