fix(replays): Read from `replayRecord` to show errors and duration in the details header (#38032)

Previously we were fetching the actual error objects from the `/eventsv2/` api, and then counting them up. 
This is still broken; it's probably the same root cause as [38002](https://github.com/getsentry/sentry/issues/38002), so it'll get fixed. Also we'll switch from `/eventsv2/` to the supported events api in #37998

So lots of things related, but this is a narrow fix and we get to remove some prop-drilling in the process.

Fixes #38001

static/app/views/replays/detail/page.tsx

@@ -8,21 +8,20 @@ import {CrumbWalker} from 'sentry/components/replays/walker/urlWalker';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import space from 'sentry/styles/space';
 import type {Crumb} from 'sentry/types/breadcrumbs';
-import EventMetaData, {
-  HeaderPlaceholder,
-} from 'sentry/views/replays/detail/eventMetaData';
 import ChooseLayout from 'sentry/views/replays/detail/layout/chooseLayout';
+import ReplayMetaData, {
+  HeaderPlaceholder,
+} from 'sentry/views/replays/detail/replayMetaData';
 import type {ReplayRecord} from 'sentry/views/replays/types';
 
 type Props = {
   children: ReactNode;
   orgSlug: string;
   crumbs?: Crumb[];
-  durationMs?: number;
   replayRecord?: ReplayRecord;
 };
 
-function Page({children, crumbs, durationMs, orgSlug, replayRecord}: Props) {
+function Page({children, crumbs, orgSlug, replayRecord}: Props) {
   const title = replayRecord
     ? `${replayRecord.id} - Replays - ${orgSlug}`
     : `Replays - ${orgSlug}`;
@@ -44,11 +43,7 @@ function Page({children, crumbs, durationMs, orgSlug, replayRecord}: Props) {
       )}
 
       <MetaDataColumn>
-        <EventMetaData
-          crumbs={crumbs}
-          durationMs={durationMs}
-          replayRecord={replayRecord}
-        />
+        <ReplayMetaData replayRecord={replayRecord} />
       </MetaDataColumn>
     </Header>
   );

static/app/views/replays/detail/eventMetaData.tsx → static/app/views/replays/detail/replayMetaData.tsx

@@ -7,27 +7,21 @@ import Placeholder from 'sentry/components/placeholder';
 import TimeSince from 'sentry/components/timeSince';
 import {IconCalendar, IconClock, IconFire} from 'sentry/icons';
 import space from 'sentry/styles/space';
-import type {Crumb} from 'sentry/types/breadcrumbs';
-import {defined} from 'sentry/utils';
 import useProjects from 'sentry/utils/useProjects';
 import {useRouteContext} from 'sentry/utils/useRouteContext';
 import type {ReplayRecord} from 'sentry/views/replays/types';
 
 type Props = {
-  crumbs: Crumb[] | undefined;
-  durationMs: number | undefined;
   replayRecord: ReplayRecord | undefined;
 };
 
-function EventMetaData({crumbs, durationMs, replayRecord}: Props) {
+function ReplayMetaData({replayRecord}: Props) {
   const {
     params: {replaySlug},
   } = useRouteContext();
   const {projects} = useProjects();
   const [slug] = replaySlug.split(':');
 
-  const errors = crumbs?.filter(crumb => crumb.type === 'error').length;
-
   return (
     <KeyMetrics>
       {replayRecord ? (
@@ -54,11 +48,11 @@ function EventMetaData({crumbs, durationMs, replayRecord}: Props) {
         )}
       </KeyMetricData>
       <KeyMetricData>
-        {durationMs !== undefined ? (
+        {replayRecord ? (
           <React.Fragment>
             <IconClock color="gray300" />
             <Duration
-              seconds={Math.floor(msToSec(durationMs || 0)) || 1}
+              seconds={Math.floor(msToSec(replayRecord?.duration || 0)) || 1}
               abbreviation
               exact
             />
@@ -68,10 +62,10 @@ function EventMetaData({crumbs, durationMs, replayRecord}: Props) {
         )}
       </KeyMetricData>
       <KeyMetricData>
-        {defined(errors) ? (
+        {replayRecord ? (
           <React.Fragment>
             <IconFire color="red300" />
-            {errors}
+            {replayRecord?.countErrors}
           </React.Fragment>
         ) : (
           <HeaderPlaceholder />
@@ -112,4 +106,4 @@ const KeyMetricData = styled('div')`
   line-height: ${p => p.theme.text.lineHeightBody};
 `;
 
-export default EventMetaData;
+export default ReplayMetaData;

static/app/views/replays/details.tsx

@@ -76,13 +76,11 @@ function ReplayDetails({
 function LoadedDetails({orgSlug}: {orgSlug: string}) {
   const {getLayout} = useReplayLayout();
   const {replay} = useReplayContext();
-  const durationMs = replay?.getDurationMs();
 
   return (
     <Page
       orgSlug={orgSlug}
       crumbs={replay?.getRawCrumbs()}
-      durationMs={durationMs}
       replayRecord={replay?.getReplay()}
     >
       <Layout layout={getLayout()} />