ref(replays): Use camelCase field names for api responses (#37554)

Updated fields to match the latest here: https://github.com/getsentry/replay-backend/pull/15/files#diff-3bc37663e99c0db745c2c39afae6b8814015ea3ee4066c495f97598fe6b154efR47-R74

static/app/components/replays/breadcrumbs/replayTimeline.tsx

@@ -32,7 +32,7 @@ function ReplayTimeline({}: Props) {
   }
 
   const durationMs = replay.getDurationMs();
-  const startTimestampMs = replay.getReplay().started_at.getTime();
+  const startTimestampMs = replay.getReplay().startedAt.getTime();
   const crumbs = replay.getRawCrumbs() || [];
   const spans = replay.getRawSpans() || [];
   const userCrumbs = crumbs.filter(crumb => USER_ACTIONS.includes(crumb.type));

static/app/components/replays/header/detailsPageBreadcrumbs.tsx

@@ -16,7 +16,7 @@ function DetailsPageBreadcrumbs({orgId, replayRecord}: Props) {
   const labelTitle =
     replayRecord?.user.name ||
     replayRecord?.user.email ||
-    replayRecord?.user.ip ||
+    replayRecord?.user.ipAddress ||
     replayRecord?.user.id;
 
   return (

static/app/components/replays/replayController.tsx

@@ -85,7 +85,7 @@ function ReplayPlayPauseBar({isCompact}: {isCompact: boolean}) {
           title={t('Next breadcrumb')}
           icon={<IconNext size="sm" />}
           onClick={() => {
-            const startTimestampMs = replay?.getReplay().started_at?.getTime();
+            const startTimestampMs = replay?.getReplay().startedAt?.getTime();
             if (!startTimestampMs) {
               return;
             }

static/app/components/replays/walker/urlWalker.tsx

@@ -24,7 +24,7 @@ type StringProps = {
 export const CrumbWalker = memo(function CrumbWalker({crumbs, replayRecord}: CrumbProps) {
   const {setCurrentTime} = useReplayContext();
 
-  const startTimestampMs = replayRecord.started_at.getTime();
+  const startTimestampMs = replayRecord.startedAt.getTime();
 
   const handleClick = useCallback(
     (crumb: Crumb) => {

static/app/utils/replays/getCurrentUrl.tsx

@@ -9,7 +9,7 @@ function getCurrentUrl(
   crumbs: Crumb[],
   currentOffsetMS: number
 ) {
-  const startTimestampMs = replayRecord.started_at.getTime();
+  const startTimestampMs = replayRecord.startedAt.getTime();
   const currentTimeMs = startTimestampMs + Math.floor(currentOffsetMS);
 
   const navigationCrumbs = crumbs.filter(

static/app/utils/replays/hooks/useExtractedCrumbHtml.tsx

@@ -87,7 +87,7 @@ function useExtractedCrumbHtml({replay}: HookOpts) {
 
     try {
       // Run the replay to the end, we will capture data as it streams into the plugin
-      replayerRef.pause(replay.getReplay().finished_at.getTime());
+      replayerRef.pause(replay.getReplay().finishedAt.getTime());
     } catch (error) {
       Sentry.captureException(error);
     }

static/app/utils/replays/replayReader.tsx

@@ -90,37 +90,37 @@ export default class ReplayReader {
       .filter(Boolean) as string[];
 
     this.replayRecord = {
-      count_errors: this.getRawCrumbs().filter(
+      countErrors: this.getRawCrumbs().filter(
         crumb => crumb.category === BreadcrumbType.ERROR
       ).length,
-      count_segments: 0,
-      count_urls: urls.length,
+      countSegments: 0,
+      countUrls: urls.length,
+      errorIds: [],
       dist: this.event.dist,
       duration: endTimestampMs - startTimestampMs,
       environment: null,
-      finished_at: new Date(endTimestampMs),
-      ip_address_v4: this.event.user?.ip_address,
-      ip_address_v6: null,
-      longest_transaction: 0,
+      finishedAt: new Date(endTimestampMs), // TODO(replay): Convert from string to Date when reading API
+      longestTransaction: 0,
       platform: this.event.platform,
-      project_id: this.event.projectID,
-      project_slug: '',
+      projectId: this.event.projectID,
+      projectSlug: '', // TODO(replay): Read from useProject to fill this in
       release: null, // event.release is not a string, expected to be `version@1.4`
-      replay_id: this.event.id,
-      sdk_name: this.event.sdk?.name,
-      sdk_version: this.event.sdk?.version,
-      started_at: new Date(startTimestampMs),
+      replayId: this.event.id,
+      sdkName: this.event.sdk?.name,
+      sdkVersion: this.event.sdk?.version,
+      startedAt: new Date(startTimestampMs), // TODO(replay): Convert from string to Date when reading API
       tags: this.event.tags.reduce((tags, {key, value}) => {
         tags[key] = value;
         return tags;
       }, {} as ReplayRecord['tags']),
       title: this.event.title,
-      trace_ids: [],
+      traceIds: [],
       urls,
+      userAgent: '',
       user: {
         email: this.event.user?.email,
         id: this.event.user?.id,
-        ip: this.event.user?.ip_address,
+        ipAddress: this.event.user?.ip_address,
         name: this.event.user?.name,
       },
     } as ReplayRecord;

static/app/views/replays/detail/breadcrumbs/index.tsx

@@ -36,7 +36,7 @@ function Breadcrumbs({}: Props) {
   const crumbListContainerRef = useRef<HTMLDivElement>(null);
   useCurrentItemScroller(crumbListContainerRef);
 
-  const startTimestampMs = replayRecord?.started_at.getTime() || 0;
+  const startTimestampMs = replayRecord?.startedAt.getTime() || 0;
   const {handleMouseEnter, handleMouseLeave, handleClick} =
     useCrumbHandlers(startTimestampMs);
 

static/app/views/replays/detail/domMutations/index.tsx

@@ -18,7 +18,7 @@ type Props = {
 
 function DomMutations({replay}: Props) {
   const {isLoading, actions} = useExtractedCrumbHtml({replay});
-  const startTimestampMs = replay.getReplay().started_at.getTime();
+  const startTimestampMs = replay.getReplay().startedAt.getTime();
 
   const {handleMouseEnter, handleMouseLeave, handleClick} =
     useCrumbHandlers(startTimestampMs);

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

@@ -27,8 +27,8 @@ function EventMetaData({crumbs, durationMs, replayRecord}: Props) {
       {replayRecord ? (
         <ProjectBadge
           project={
-            projects.find(p => p.id === replayRecord.project_id) || {
-              slug: replayRecord.project_slug || '',
+            projects.find(p => p.id === replayRecord.projectId) || {
+              slug: replayRecord.projectSlug || '',
             }
           }
           avatarSize={16}
@@ -41,7 +41,7 @@ function EventMetaData({crumbs, durationMs, replayRecord}: Props) {
         {replayRecord ? (
           <React.Fragment>
             <IconCalendar color="gray300" />
-            <TimeSince date={replayRecord.started_at} shorten />
+            <TimeSince date={replayRecord.startedAt} shorten />
           </React.Fragment>
         ) : (
           <HeaderPlaceholder />