refactor session replays to be per visit. sessions persist too long resulting in low-quality recordings

src/app/api/record/route.ts

@@ -42,7 +42,7 @@ export async function POST(request: Request) {
       return badRequest({ message: 'Invalid session token.' });
     }
 
-    const { sessionId } = cache;
+    const { sessionId, visitId } = cache;
 
     // Query directly to avoid stale Redis cache for recordingEnabled
     const website = await getWebsite(websiteId);
@@ -80,6 +80,7 @@ export async function POST(request: Request) {
     await saveRecording({
       websiteId,
       sessionId,
+      visitId,
       chunkIndex,
       events,
       eventCount: events.length,

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

@@ -1,4 +1,3 @@
-import { stitchChunkEvents } from '@/lib/replay';
 import { parseRequest } from '@/lib/request';
 import { json, unauthorized } from '@/lib/response';
 import { canViewWebsite } from '@/permissions';
@@ -6,7 +5,7 @@ import { getReplayChunks } from '@/queries/sql';
 
 export async function GET(
   request: Request,
-  { params }: { params: Promise<{ websiteId: string; sessionId: string }> },
+  { params }: { params: Promise<{ websiteId: string; replayId: string }> },
 ) {
   const { auth, error } = await parseRequest(request);
 
@@ -14,19 +13,21 @@ export async function GET(
     return error();
   }
 
-  const { websiteId, sessionId } = await params;
+  const { websiteId, replayId } = await params;
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const chunks = await getReplayChunks(websiteId, sessionId);
+  const chunks = await getReplayChunks(websiteId, replayId);
 
-  const allEvents = stitchChunkEvents(chunks);
+  const allEvents = chunks.flatMap(chunk => chunk.events);
+  const sessionId = chunks.length > 0 ? chunks[0].sessionId : null;
   const startedAt = chunks.length > 0 ? chunks[0].startedAt : null;
   const endedAt = chunks.length > 0 ? chunks[chunks.length - 1].endedAt : null;
 
   return json({
+    sessionId,
     events: allEvents,
     startedAt,
     endedAt,

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

@@ -0,0 +1,33 @@
+import { getQueryFilters, parseRequest } from '@/lib/request';
+import { json, unauthorized } from '@/lib/response';
+import { pagingParams, searchParams, withDateRange } from '@/lib/schema';
+import { canViewWebsite } from '@/permissions';
+import { getSessionReplays } from '@/queries/sql';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ websiteId: string; sessionId: string }> },
+) {
+  const schema = withDateRange({
+    ...pagingParams,
+    ...searchParams,
+  });
+
+  const { auth, query, error } = await parseRequest(request, schema);
+
+  if (error) {
+    return error();
+  }
+
+  const { websiteId, sessionId } = await params;
+
+  if (!(await canViewWebsite(auth, websiteId))) {
+    return unauthorized();
+  }
+
+  const filters = await getQueryFilters(query, websiteId);
+
+  const data = await getSessionReplays(websiteId, filters, sessionId);
+
+  return json(data);
+}