Rename session recording to session replay across the codebase.

Renames all files, components, database schema, API routes, hooks,
messages, and build config from "recording" to "replay" terminology.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

prisma/migrations/18_add_session_recording/migration.sql

@@ -1,10 +1,10 @@
 -- AlterTable
-ALTER TABLE "website" ADD COLUMN "recording_enabled" BOOLEAN NOT NULL DEFAULT false;
+ALTER TABLE "website" ADD COLUMN "replay_enabled" BOOLEAN NOT NULL DEFAULT false;
-ALTER TABLE "website" ADD COLUMN "recording_config" JSONB;
+ALTER TABLE "website" ADD COLUMN "replay_config" JSONB;
 
 -- CreateTable
-CREATE TABLE "session_recording" (
+CREATE TABLE "session_replay" (
-    "recording_id" UUID NOT NULL,
+    "replay_id" UUID NOT NULL,
     "website_id" UUID NOT NULL,
     "session_id" UUID NOT NULL,
     "chunk_index" INTEGER NOT NULL,
@@ -14,12 +14,12 @@ CREATE TABLE "session_recording" (
     "ended_at" TIMESTAMPTZ(6) NOT NULL,
     "created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
 
-    CONSTRAINT "session_recording_pkey" PRIMARY KEY ("recording_id")
+    CONSTRAINT "session_replay_pkey" PRIMARY KEY ("replay_id")
 );
 
 -- CreateIndex
-CREATE INDEX "session_recording_website_id_idx" ON "session_recording"("website_id");
+CREATE INDEX "session_replay_website_id_idx" ON "session_replay"("website_id");
-CREATE INDEX "session_recording_session_id_idx" ON "session_recording"("session_id");
+CREATE INDEX "session_replay_session_id_idx" ON "session_replay"("session_id");
-CREATE INDEX "session_recording_website_id_session_id_idx" ON "session_recording"("website_id", "session_id");
+CREATE INDEX "session_replay_website_id_session_id_idx" ON "session_replay"("website_id", "session_id");
-CREATE INDEX "session_recording_website_id_created_at_idx" ON "session_recording"("website_id", "created_at");
+CREATE INDEX "session_replay_website_id_created_at_idx" ON "session_replay"("website_id", "created_at");
-CREATE INDEX "session_recording_session_id_chunk_index_idx" ON "session_recording"("session_id", "chunk_index");
+CREATE INDEX "session_replay_session_id_chunk_index_idx" ON "session_replay"("session_id", "chunk_index");

prisma/schema.prisma

@@ -75,8 +75,8 @@ model Website {
   updatedAt DateTime? @updatedAt @map("updated_at") @db.Timestamptz(6)
   deletedAt DateTime? @map("deleted_at") @db.Timestamptz(6)
 
-  recordingEnabled Boolean   @default(false) @map("recording_enabled")
+  replayEnabled Boolean   @default(false) @map("replay_enabled")
-  recordingConfig  Json?     @map("recording_config")
+  replayConfig  Json?     @map("replay_config")
 
   user              User?               @relation("user", fields: [userId], references: [id])
   createUser        User?               @relation("createUser", fields: [createdBy], references: [id])
@@ -86,7 +86,7 @@ model Website {
   revenue           Revenue[]
   segments          Segment[]
   sessionData       SessionData[]
-  sessionRecordings SessionRecording[]
+  sessionReplays SessionReplay[]
 
   @@index([userId])
   @@index([teamId])
@@ -355,8 +355,8 @@ model Share {
   @@map("share")
 }
 
-model SessionRecording {
+model SessionReplay {
-  id         String    @id() @map("recording_id") @db.Uuid
+  id         String    @id() @map("replay_id") @db.Uuid
   websiteId  String    @map("website_id") @db.Uuid
   sessionId  String    @map("session_id") @db.Uuid
   chunkIndex Int       @map("chunk_index") @db.Integer
@@ -373,5 +373,5 @@ model SessionRecording {
   @@index([websiteId, sessionId])
   @@index([websiteId, createdAt])
   @@index([sessionId, chunkIndex])
-  @@map("session_recording")
+  @@map("session_replay")
 }

rollup.recorder.config.js

@@ -15,7 +15,7 @@ export default {
     commonjs(),
     replace({
       __COLLECT_API_HOST__: process.env.COLLECT_API_HOST || '',
-      __COLLECT_RECORDING_ENDPOINT__: process.env.COLLECT_RECORDING_ENDPOINT || '/api/record',
+      __COLLECT_REPLAY_ENDPOINT__: process.env.COLLECT_REPLAY_ENDPOINT || '/api/record',
       delimiters: ['', ''],
       preventAssignment: true,
     }),

src/app/(main)/websites/[websiteId]/recordings/RecordingsDataTable.tsx

@@ -1,15 +0,0 @@
-import { DataGrid } from '@/components/common/DataGrid';
-import { useRecordingsQuery } from '@/components/hooks';
-import { RecordingsTable } from './RecordingsTable';
-
-export function RecordingsDataTable({ websiteId }: { websiteId: string }) {
-  const queryResult = useRecordingsQuery(websiteId);
-
-  return (
-    <DataGrid query={queryResult} allowPaging allowSearch>
-      {({ data }) => {
-        return <RecordingsTable data={data} websiteId={websiteId} />;
-      }}
-    </DataGrid>
-  );
-}

src/app/(main)/websites/[websiteId]/replays/ReplaysDataTable.tsx

@@ -0,0 +1,15 @@
+import { DataGrid } from '@/components/common/DataGrid';
+import { useReplaysQuery } from '@/components/hooks';
+import { ReplaysTable } from './ReplaysTable';
+
+export function ReplaysDataTable({ websiteId }: { websiteId: string }) {
+  const queryResult = useReplaysQuery(websiteId);
+
+  return (
+    <DataGrid query={queryResult} allowPaging allowSearch>
+      {({ data }) => {
+        return <ReplaysTable data={data} websiteId={websiteId} />;
+      }}
+    </DataGrid>
+  );
+}

src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx

@@ -2,14 +2,14 @@
 import { Column } from '@umami/react-zen';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { Panel } from '@/components/common/Panel';
-import { RecordingsDataTable } from './RecordingsDataTable';
+import { ReplaysDataTable } from './ReplaysDataTable';
 
-export function RecordingsPage({ websiteId }: { websiteId: string }) {
+export function ReplaysPage({ websiteId }: { websiteId: string }) {
   return (
     <Column gap="3">
       <WebsiteControls websiteId={websiteId} />
       <Panel>
-        <RecordingsDataTable websiteId={websiteId} />
+        <ReplaysDataTable websiteId={websiteId} />
       </Panel>
     </Column>
   );

src/app/(main)/websites/[websiteId]/replays/ReplaysTable.tsx

@@ -13,7 +13,7 @@ function formatDuration(ms: number) {
   return `${minutes}:${secs.toString().padStart(2, '0')}`;
 }
 
-export function RecordingsTable({ websiteId, ...props }: DataTableProps & { websiteId: string }) {
+export function ReplaysTable({ websiteId, ...props }: DataTableProps & { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
 
@@ -52,7 +52,7 @@ export function RecordingsTable({ websiteId, ...props }: DataTableProps & { webs
       </DataColumn>
       <DataColumn id="play" label="" width="80px">
         {(row: any) => (
-          <Link href={`/websites/${websiteId}/recordings/${row.id}`}>
+          <Link href={`/websites/${websiteId}/replays/${row.id}`}>
             <Button variant="quiet">
               <Icon>
                 <Play />

src/app/(main)/websites/[websiteId]/replays/[sessionId]/ReplayPlayback.tsx

@@ -3,42 +3,36 @@ import { Column, Row, Text } from '@umami/react-zen';
 import { SessionInfo } from '@/app/(main)/websites/[websiteId]/sessions/SessionInfo';
 import { Avatar } from '@/components/common/Avatar';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { useMessages, useRecordingQuery, useWebsiteSessionQuery } from '@/components/hooks';
+import { useMessages, useReplayQuery, useWebsiteSessionQuery } from '@/components/hooks';
-import { RecordingPlayer } from './RecordingPlayer';
+import { ReplayPlayer } from './ReplayPlayer';
 
-export function RecordingPlayback({
+export function ReplayPlayback({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
-  websiteId,
+  const { data: replay, isLoading, error } = useReplayQuery(websiteId, sessionId);
-  sessionId,
-}: {
-  websiteId: string;
-  sessionId: string;
-}) {
-  const { data: recording, isLoading, error } = useRecordingQuery(websiteId, sessionId);
   const { data: session } = useWebsiteSessionQuery(websiteId, sessionId);
   const { formatMessage, labels } = useMessages();
 
   return (
     <LoadingPanel
-      data={recording}
+      data={replay}
       isLoading={isLoading}
       error={error}
       loadingIcon="spinner"
       loadingPlacement="absolute"
     >
-      {recording && (
+      {replay && (
         <Column gap="6">
           {session && (
             <Row alignItems="center" gap="4">
               <Avatar seed={sessionId} size={48} />
               <Column>
-                <Text weight="bold">{formatMessage(labels.recording)}</Text>
+                <Text weight="bold">{formatMessage(labels.replay)}</Text>
                 <Text color="muted">
-                  {recording.eventCount} {formatMessage(labels.events).toLowerCase()}
+                  {replay.eventCount} {formatMessage(labels.events).toLowerCase()}
                 </Text>
               </Column>
             </Row>
           )}
-          <RecordingPlayer events={recording.events} />
+          <ReplayPlayer events={replay.events} />
           {session && <SessionInfo data={session} />}
         </Column>
       )}

src/app/(main)/websites/[websiteId]/replays/[sessionId]/ReplayPlayer.tsx

@@ -3,7 +3,7 @@ import { Column } from '@umami/react-zen';
 import { useEffect, useRef, useState } from 'react';
 import 'rrweb-player/dist/style.css';
 
-export function RecordingPlayer({ events }: { events: any[] }) {
+export function ReplayPlayer({ events }: { events: any[] }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<any>(null);
   const [loaded, setLoaded] = useState(false);
@@ -17,14 +17,14 @@ export function RecordingPlayer({ events }: { events: any[] }) {
       typeCounts[e.type] = (typeCounts[e.type] || 0) + 1;
     });
     const timestamps = events.map((e: any) => e.timestamp).filter(Boolean);
-    console.log('[RecordingPlayer] Events:', events.length, 'Types:', typeCounts);
+    console.log('[ReplayPlayer] Events:', events.length, 'Types:', typeCounts);
     console.log(
-      '[RecordingPlayer] Time range:',
+      '[ReplayPlayer] Time range:',
       timestamps.length
         ? `${Math.min(...timestamps)} - ${Math.max(...timestamps)} (${Math.max(...timestamps) - Math.min(...timestamps)}ms)`
         : 'no timestamps',
     );
-    console.log('[RecordingPlayer] First 3 events:', events.slice(0, 3));
+    console.log('[ReplayPlayer] First 3 events:', events.slice(0, 3));
 
     // Dynamically import rrweb-player to avoid SSR issues
     import('rrweb-player').then(mod => {

src/app/(main)/websites/[websiteId]/replays/[sessionId]/page.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { RecordingPlayback } from './RecordingPlayback';
+import { ReplayPlayback } from './ReplayPlayback';
 
 export default async function ({
   params,
@@ -8,9 +8,9 @@ export default async function ({
 }) {
   const { websiteId, sessionId } = await params;
 
-  return <RecordingPlayback websiteId={websiteId} sessionId={sessionId} />;
+  return <ReplayPlayback websiteId={websiteId} sessionId={sessionId} />;
 }
 
 export const metadata: Metadata = {
-  title: 'Recording Playback',
+  title: 'Session Replay',
 };

src/app/(main)/websites/[websiteId]/replays/page.tsx

@@ -1,12 +1,12 @@
 import type { Metadata } from 'next';
-import { RecordingsPage } from './RecordingsPage';
+import { ReplaysPage } from './ReplaysPage';
 
 export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
   const { websiteId } = await params;
 
-  return <RecordingsPage websiteId={websiteId} />;
+  return <ReplaysPage websiteId={websiteId} />;
 }
 
 export const metadata: Metadata = {
-  title: 'Recordings',
+  title: 'Replays',
 };

src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx

@@ -10,10 +10,10 @@ import {
   TextField,
 } from '@umami/react-zen';
 import { X } from 'lucide-react';
-import { RecordingPlayer } from '@/app/(main)/websites/[websiteId]/recordings/[sessionId]/RecordingPlayer';
+import { ReplayPlayer } from '@/app/(main)/websites/[websiteId]/replays/[sessionId]/ReplayPlayer';
 import { Avatar } from '@/components/common/Avatar';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { useMessages, useRecordingQuery, useWebsiteSessionQuery } from '@/components/hooks';
+import { useMessages, useReplayQuery, useWebsiteSessionQuery } from '@/components/hooks';
 import { SessionActivity } from './SessionActivity';
 import { SessionData } from './SessionData';
 import { SessionInfo } from './SessionInfo';
@@ -29,7 +29,7 @@ export function SessionProfile({
   onClose?: () => void;
 }) {
   const { data, isLoading, error } = useWebsiteSessionQuery(websiteId, sessionId);
-  const { data: recording } = useRecordingQuery(websiteId, sessionId);
+  const { data: replay } = useReplayQuery(websiteId, sessionId);
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -65,8 +65,8 @@ export function SessionProfile({
               <TabList>
                 <Tab id="activity">{formatMessage(labels.activity)}</Tab>
                 <Tab id="properties">{formatMessage(labels.properties)}</Tab>
-                {recording?.events?.length > 0 && (
+                {replay?.events?.length > 0 && (
-                  <Tab id="recording">{formatMessage(labels.recording)}</Tab>
+                  <Tab id="replay">{formatMessage(labels.replay)}</Tab>
                 )}
               </TabList>
               <TabPanel id="activity">
@@ -80,9 +80,9 @@ export function SessionProfile({
               <TabPanel id="properties">
                 <SessionData sessionId={sessionId} websiteId={websiteId} />
               </TabPanel>
-              {recording?.events?.length > 0 && (
+              {replay?.events?.length > 0 && (
-                <TabPanel id="recording">
+                <TabPanel id="replay">
-                  <RecordingPlayer events={recording.events} />
+                  <ReplayPlayer events={replay.events} />
                 </TabPanel>
               )}
             </Tabs>

src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx

@@ -11,7 +11,7 @@ import {
 import { useState } from 'react';
 import { useMessages, useUpdateQuery, useWebsite } from '@/components/hooks';
 
-interface RecordingConfig {
+interface ReplayConfig {
   sampleRate?: number;
   maskLevel?: string;
   maxDuration?: number;
@@ -19,19 +19,19 @@ interface RecordingConfig {
   retentionDays?: number;
 }
 
-export function WebsiteRecordingSettings({ websiteId }: { websiteId: string }) {
+export function WebsiteReplaySettings({ websiteId }: { websiteId: string }) {
   const website = useWebsite();
   const { formatMessage, labels, messages } = useMessages();
   const { mutateAsync, error, touch, toast } = useUpdateQuery(`/websites/${websiteId}`);
-  const [enabled, setEnabled] = useState(website?.recordingEnabled ?? false);
+  const [enabled, setEnabled] = useState(website?.replayEnabled ?? false);
 
-  const config = (website?.recordingConfig as RecordingConfig) || {};
+  const config = (website?.replayConfig as ReplayConfig) || {};
 
   const handleSubmit = async (data: any) => {
     await mutateAsync(
       {
-        recordingEnabled: enabled,
+        replayEnabled: enabled,
-        recordingConfig: {
+        replayConfig: {
           sampleRate: parseFloat(data.sampleRate) || 1,
           maskLevel: data.maskLevel || 'moderate',
           maxDuration: parseInt(data.maxDuration, 10) || 600000,
@@ -61,9 +61,9 @@ export function WebsiteRecordingSettings({ websiteId }: { websiteId: string }) {
       }}
     >
       <Column gap="4">
-        <Label>{formatMessage(labels.recordings)}</Label>
+        <Label>{formatMessage(labels.replays)}</Label>
         <Switch isSelected={enabled} onChange={setEnabled}>
-          {formatMessage(labels.recordingEnabled)}
+          {formatMessage(labels.replayEnabled)}
         </Switch>
         {enabled && (
           <>

src/app/(main)/websites/[websiteId]/settings/WebsiteSettings.tsx

@@ -2,7 +2,7 @@ import { Column } from '@umami/react-zen';
 import { Panel } from '@/components/common/Panel';
 import { WebsiteData } from './WebsiteData';
 import { WebsiteEditForm } from './WebsiteEditForm';
-import { WebsiteRecordingSettings } from './WebsiteRecordingSettings';
+import { WebsiteReplaySettings } from './WebsiteReplaySettings';
 import { WebsiteShareForm } from './WebsiteShareForm';
 import { WebsiteTrackingCode } from './WebsiteTrackingCode';
 
@@ -16,7 +16,7 @@ export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal
         <WebsiteTrackingCode websiteId={websiteId} />
       </Panel>
       <Panel>
-        <WebsiteRecordingSettings websiteId={websiteId} />
+        <WebsiteReplaySettings websiteId={websiteId} />
       </Panel>
       <Panel>
         <WebsiteShareForm websiteId={websiteId} />

src/app/(main)/websites/[websiteId]/settings/WebsiteTrackingCode.tsx

@@ -32,7 +32,7 @@ export function WebsiteTrackingCode({
 
   let code = `<script defer src="${url}" data-website-id="${websiteId}"></script>`;
 
-  if (website?.recordingEnabled) {
+  if (website?.replayEnabled) {
     const recorderUrl = getUrl(RECORDER_NAME);
     code += `\n<script defer src="${recorderUrl}" data-website-id="${websiteId}"></script>`;
   }

src/app/api/record/route.ts

@@ -8,7 +8,7 @@ import { parseToken } from '@/lib/jwt';
 import { parseRequest } from '@/lib/request';
 import { badRequest, forbidden, json, serverError } from '@/lib/response';
 import { getWebsite } from '@/queries/prisma';
-import { saveRecordingChunk } from '@/queries/sql';
+import { saveReplayChunk } from '@/queries/sql';
 
 const schema = z.object({
   website: z.uuid(),
@@ -52,8 +52,8 @@ export async function POST(request: Request) {
       return badRequest({ message: 'Website not found.' });
     }
 
-    if (!website.recordingEnabled) {
+    if (!website.replayEnabled) {
-      return json({ ok: false, reason: 'recording_disabled' });
+      return json({ ok: false, reason: 'replay_disabled' });
     }
 
     // Client info for bot/IP checks
@@ -82,7 +82,7 @@ export async function POST(request: Request) {
     // Use timestamp-based chunk index for ordering
     const chunkIndex = timestamp || Math.floor(Date.now() / 1000);
 
-    await saveRecordingChunk({
+    await saveReplayChunk({
       websiteId,
       sessionId,
       chunkIndex,

src/app/api/websites/[websiteId]/replays/[sessionId]/route.ts

@@ -2,7 +2,7 @@ import { gunzipSync } from 'node:zlib';
 import { parseRequest } from '@/lib/request';
 import { json, unauthorized } from '@/lib/response';
 import { canViewWebsite } from '@/permissions';
-import { getRecordingChunks } from '@/queries/sql';
+import { getReplayChunks } from '@/queries/sql';
 
 export async function GET(
   request: Request,
@@ -20,7 +20,7 @@ export async function GET(
     return unauthorized();
   }
 
-  const chunks = await getRecordingChunks(websiteId, sessionId);
+  const chunks = await getReplayChunks(websiteId, sessionId);
 
   // Decompress and concatenate all chunks
   const allEvents = chunks.flatMap(chunk => {

src/app/api/websites/[websiteId]/replays/route.ts

@@ -3,7 +3,7 @@ import { getQueryFilters, parseRequest } from '@/lib/request';
 import { json, unauthorized } from '@/lib/response';
 import { dateRangeParams, pagingParams, searchParams } from '@/lib/schema';
 import { canViewWebsite } from '@/permissions';
-import { getSessionRecordings } from '@/queries/sql';
+import { getSessionReplays } from '@/queries/sql';
 
 export async function GET(
   request: Request,
@@ -29,7 +29,7 @@ export async function GET(
 
   const filters = await getQueryFilters(query, websiteId);
 
-  const data = await getSessionRecordings(websiteId, filters);
+  const data = await getSessionReplays(websiteId, filters);
 
   return json(data);
 }

src/app/api/websites/[websiteId]/route.ts

@@ -42,8 +42,8 @@ export async function POST(
     name: z.string().optional(),
     domain: z.string().optional(),
     shareId: z.string().max(50).nullable().optional(),
-    recordingEnabled: z.boolean().optional(),
+    replayEnabled: z.boolean().optional(),
-    recordingConfig: z
+    replayConfig: z
       .object({
         sampleRate: z.number().min(0).max(1).optional(),
         maskLevel: z.enum(['strict', 'moderate', 'relaxed']).optional(),
@@ -62,7 +62,7 @@ export async function POST(
   }
 
   const { websiteId } = await params;
-  const { name, domain, shareId, recordingEnabled, recordingConfig } = body;
+  const { name, domain, shareId, replayEnabled, replayConfig } = body;
 
   if (!(await canUpdateWebsite(auth, websiteId))) {
     return unauthorized();
@@ -72,8 +72,8 @@ export async function POST(
     const website = await updateWebsite(websiteId, {
       name,
       domain,
-      ...(recordingEnabled !== undefined && { recordingEnabled }),
+      ...(replayEnabled !== undefined && { replayEnabled }),
-      ...(recordingConfig !== undefined && { recordingConfig }),
+      ...(replayConfig !== undefined && { replayConfig }),
     });
 
     if (shareId === null) {

src/components/hooks/index.ts

@@ -25,8 +25,8 @@ export * from './queries/useLoginQuery';
 export * from './queries/usePixelQuery';
 export * from './queries/usePixelsQuery';
 export * from './queries/useRealtimeQuery';
-export * from './queries/useRecordingQuery';
+export * from './queries/useReplayQuery';
-export * from './queries/useRecordingsQuery';
+export * from './queries/useReplaysQuery';
 export * from './queries/useReportQuery';
 export * from './queries/useReportsQuery';
 export * from './queries/useResultQuery';

src/components/hooks/queries/useRecordingQuery.ts

@@ -1,13 +0,0 @@
-import { useApi } from '../useApi';
-
-export function useRecordingQuery(websiteId: string, sessionId: string) {
-  const { get, useQuery } = useApi();
-
-  return useQuery({
-    queryKey: ['recording', { websiteId, sessionId }],
-    queryFn: () => {
-      return get(`/websites/${websiteId}/recordings/${sessionId}`);
-    },
-    enabled: Boolean(websiteId && sessionId),
-  });
-}

src/components/hooks/queries/useReplayQuery.ts

@@ -0,0 +1,13 @@
+import { useApi } from '../useApi';
+
+export function useReplayQuery(websiteId: string, sessionId: string) {
+  const { get, useQuery } = useApi();
+
+  return useQuery({
+    queryKey: ['replay', { websiteId, sessionId }],
+    queryFn: () => {
+      return get(`/websites/${websiteId}/replays/${sessionId}`);
+    },
+    enabled: Boolean(websiteId && sessionId),
+  });
+}

src/components/hooks/queries/useReplaysQuery.ts

@@ -3,15 +3,15 @@ import { useDateParameters } from '../useDateParameters';
 import { useModified } from '../useModified';
 import { usePagedQuery } from '../usePagedQuery';
 
-export function useRecordingsQuery(websiteId: string, params?: Record<string, string | number>) {
+export function useReplaysQuery(websiteId: string, params?: Record<string, string | number>) {
   const { get } = useApi();
-  const { modified } = useModified('recordings');
+  const { modified } = useModified('replays');
   const { startAt, endAt, unit, timezone } = useDateParameters();
 
   return usePagedQuery({
-    queryKey: ['recordings', { websiteId, modified, startAt, endAt, unit, timezone, ...params }],
+    queryKey: ['replays', { websiteId, modified, startAt, endAt, unit, timezone, ...params }],
     queryFn: pageParams => {
-      return get(`/websites/${websiteId}/recordings`, {
+      return get(`/websites/${websiteId}/replays`, {
         startAt,
         endAt,
         unit,

src/components/hooks/useWebsiteNavItems.tsx

@@ -96,10 +96,10 @@ export function useWebsiteNavItems(websiteId: string) {
           path: renderPath('/retention'),
         },
         {
-          id: 'recordings',
+          id: 'replays',
-          label: formatMessage(labels.recordings),
+          label: formatMessage(labels.replays),
           icon: <Video />,
-          path: renderPath('/recordings'),
+          path: renderPath('/replays'),
         },
       ],
     },

src/components/messages.ts

@@ -378,17 +378,17 @@ export const labels = defineMessages({
   support: { id: 'label.support', defaultMessage: 'Support' },
   documentation: { id: 'label.documentation', defaultMessage: 'Documentation' },
   switchAccount: { id: 'label.switch-account', defaultMessage: 'Switch account' },
-  recordings: { id: 'label.recordings', defaultMessage: 'Recordings' },
+  replays: { id: 'label.replays', defaultMessage: 'Replays' },
-  recording: { id: 'label.recording', defaultMessage: 'Recording' },
+  replay: { id: 'label.replay', defaultMessage: 'Replay' },
-  playRecording: { id: 'label.play-recording', defaultMessage: 'Play recording' },
+  playReplay: { id: 'label.play-replay', defaultMessage: 'Play replay' },
-  recordingEnabled: { id: 'label.recording-enabled', defaultMessage: 'Recording enabled' },
+  replayEnabled: { id: 'label.replay-enabled', defaultMessage: 'Replay enabled' },
   sampleRate: { id: 'label.sample-rate', defaultMessage: 'Sample rate' },
   maskLevel: { id: 'label.mask-level', defaultMessage: 'Mask level' },
   maxDuration: { id: 'label.max-duration', defaultMessage: 'Max duration' },
   retentionDays: { id: 'label.retention-days', defaultMessage: 'Retention days' },
   duration: { id: 'label.duration', defaultMessage: 'Duration' },
   recordedAt: { id: 'label.recorded-at', defaultMessage: 'Recorded at' },
-  noRecordings: { id: 'label.no-recordings', defaultMessage: 'No recordings' },
+  noReplays: { id: 'label.no-replays', defaultMessage: 'No replays' },
   strict: { id: 'label.strict', defaultMessage: 'Strict' },
   moderate: { id: 'label.moderate', defaultMessage: 'Moderate' },
   relaxed: { id: 'label.relaxed', defaultMessage: 'Relaxed' },

src/queries/prisma/website.ts

@@ -136,7 +136,7 @@ export async function resetWebsite(websiteId: string) {
 
   return transaction(
     async tx => {
-      await tx.sessionRecording.deleteMany({
+      await tx.sessionReplay.deleteMany({
         where: { websiteId },
       });
 
@@ -187,7 +187,7 @@ export async function deleteWebsite(websiteId: string) {
 
   return transaction(
     async tx => {
-      await tx.sessionRecording.deleteMany({
+      await tx.sessionReplay.deleteMany({
         where: { websiteId },
       });
 

src/queries/sql/index.ts

@@ -22,10 +22,10 @@ export * from './getWeeklyTraffic';
 export * from './pageviews/getPageviewExpandedMetrics';
 export * from './pageviews/getPageviewMetrics';
 export * from './pageviews/getPageviewStats';
-export * from './recordings/deleteRecordingsByWebsite';
+export * from './replays/deleteReplaysByWebsite';
-export * from './recordings/getRecordingChunks';
+export * from './replays/getReplayChunks';
-export * from './recordings/getSessionRecordings';
+export * from './replays/getSessionReplays';
-export * from './recordings/saveRecordingChunk';
+export * from './replays/saveReplayChunk';
 export * from './reports/getBreakdown';
 export * from './reports/getFunnel';
 export * from './reports/getJourney';

src/queries/sql/recordings/index.ts

@@ -1,4 +0,0 @@
-export * from './deleteRecordingsByWebsite';
-export * from './getRecordingChunks';
-export * from './getSessionRecordings';
-export * from './saveRecordingChunk';

src/queries/sql/replays/deleteReplaysByWebsite.ts

@@ -1,11 +1,11 @@
 import prisma from '@/lib/prisma';
 
-export async function deleteRecordingsByWebsite(websiteId: string) {
+export async function deleteReplaysByWebsite(websiteId: string) {
   return relationalQuery(websiteId);
 }
 
 async function relationalQuery(websiteId: string) {
-  return prisma.client.sessionRecording.deleteMany({
+  return prisma.client.sessionReplay.deleteMany({
     where: { websiteId },
   });
 }

src/queries/sql/replays/getReplayChunks.ts

@@ -1,11 +1,11 @@
 import prisma from '@/lib/prisma';
 
-export async function getRecordingChunks(websiteId: string, sessionId: string) {
+export async function getReplayChunks(websiteId: string, sessionId: string) {
   return relationalQuery(websiteId, sessionId);
 }
 
 async function relationalQuery(websiteId: string, sessionId: string) {
-  return prisma.client.sessionRecording.findMany({
+  return prisma.client.sessionReplay.findMany({
     where: {
       websiteId,
       sessionId,

src/queries/sql/replays/getSessionReplays.ts

@@ -1,9 +1,9 @@
 import prisma from '@/lib/prisma';
 import type { QueryFilters } from '@/lib/types';
 
-const FUNCTION_NAME = 'getSessionRecordings';
+const FUNCTION_NAME = 'getSessionReplays';
 
-export async function getSessionRecordings(...args: [websiteId: string, filters: QueryFilters]) {
+export async function getSessionReplays(...args: [websiteId: string, filters: QueryFilters]) {
   return relationalQuery(...args);
 }
 
@@ -40,12 +40,12 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
       session.country,
       session.city,
       sum(sr.event_count) as "eventCount",
-      count(sr.recording_id) as "chunkCount",
+      count(sr.replay_id) as "chunkCount",
       min(sr.started_at) as "startedAt",
       max(sr.ended_at) as "endedAt",
       (extract(epoch from max(sr.ended_at) - min(sr.started_at)) * 1000)::bigint as "duration",
       max(sr.created_at) as "createdAt"
-    from session_recording sr
+    from session_replay sr
     left join session on session.session_id = sr.session_id
       and session.website_id = sr.website_id
     where sr.website_id = {{websiteId::uuid}}

src/queries/sql/replays/index.ts

@@ -0,0 +1,4 @@
+export * from './deleteReplaysByWebsite';
+export * from './getReplayChunks';
+export * from './getSessionReplays';
+export * from './saveReplayChunk';

src/queries/sql/replays/saveReplayChunk.ts

@@ -1,7 +1,7 @@
 import { uuid } from '@/lib/crypto';
 import prisma from '@/lib/prisma';
 
-export interface SaveRecordingChunkArgs {
+export interface SaveReplayChunkArgs {
   websiteId: string;
   sessionId: string;
   chunkIndex: number;
@@ -11,7 +11,7 @@ export interface SaveRecordingChunkArgs {
   endedAt: Date;
 }
 
-export async function saveRecordingChunk(args: SaveRecordingChunkArgs) {
+export async function saveReplayChunk(args: SaveReplayChunkArgs) {
   return relationalQuery(args);
 }
 
@@ -23,8 +23,8 @@ async function relationalQuery({
   eventCount,
   startedAt,
   endedAt,
-}: SaveRecordingChunkArgs) {
+}: SaveReplayChunkArgs) {
-  return prisma.client.sessionRecording.create({
+  return prisma.client.sessionReplay.create({
     data: {
       id: uuid(),
       websiteId,

src/recorder/index.js

@@ -22,7 +22,7 @@ import { record } from 'rrweb';
 
   const host =
     hostUrl || '__COLLECT_API_HOST__' || currentScript.src.split('/').slice(0, -1).join('/');
-  const endpoint = `${host.replace(/\/$/, '')}__COLLECT_RECORDING_ENDPOINT__`;
+  const endpoint = `${host.replace(/\/$/, '')}__COLLECT_REPLAY_ENDPOINT__`;
 
   const FLUSH_EVENT_COUNT = 50;
   const FLUSH_INTERVAL = 10000;