final fixes

2026-02-26 10:19:29 +01:00
parent b193ccb7d0
commit d5513d8a47
21 changed files with 388 additions and 370 deletions
--- a/packages/db/src/buffers/session-buffer.ts
+++ b/packages/db/src/buffers/session-buffer.ts
@@ -1,8 +1,7 @@
-import { type Redis, getRedisCache } from '@openpanel/redis';
-
 import { getSafeJson } from '@openpanel/json';
+import { getRedisCache, type Redis } from '@openpanel/redis';
 import { assocPath, clone } from 'ramda';
-import { TABLE_NAMES, ch } from '../clickhouse/client';
+import { ch, TABLE_NAMES } from '../clickhouse/client';
 import type { IClickhouseEvent } from '../services/event.service';
 import type { IClickhouseSession } from '../services/session.service';
 import { BaseBuffer } from './base-buffer';
@@ -35,14 +34,14 @@ export class SessionBuffer extends BaseBuffer {
      | {
          projectId: string;
          profileId: string;
-        },
+        }
  ) {
    let hit: string | null = null;
    if ('sessionId' in options) {
      hit = await this.redis.get(`session:${options.sessionId}`);
    } else {
      hit = await this.redis.get(
-        `session:${options.projectId}:${options.profileId}`,
+        `session:${options.projectId}:${options.profileId}`
      );
    }

@@ -54,7 +53,7 @@ export class SessionBuffer extends BaseBuffer {
  }

  async getSession(
-    event: IClickhouseEvent,
+    event: IClickhouseEvent
  ): Promise<[IClickhouseSession] | [IClickhouseSession, IClickhouseSession]> {
    const existingSession = await this.getExistingSession({
      sessionId: event.session_id,
@@ -186,14 +185,14 @@ export class SessionBuffer extends BaseBuffer {
        `session:${newSession.id}`,
        JSON.stringify(newSession),
        'EX',
-        60 * 60,
+        60 * 60
      );
      if (newSession.profile_id) {
        multi.set(
          `session:${newSession.project_id}:${newSession.profile_id}`,
          JSON.stringify(newSession),
          'EX',
-          60 * 60,
+          60 * 60
        );
      }
      for (const session of sessions) {
@@ -220,10 +219,12 @@ export class SessionBuffer extends BaseBuffer {
      const events = await this.redis.lrange(
        this.redisKey,
        0,
-        this.batchSize - 1,
+        this.batchSize - 1
      );

-      if (events.length === 0) return;
+      if (events.length === 0) {
+        return;
+      }

      const sessions = events
        .map((e) => getSafeJson<IClickhouseSession>(e))
@@ -258,7 +259,7 @@ export class SessionBuffer extends BaseBuffer {
    }
  }

-  async getBufferSize() {
+  getBufferSize() {
    return this.getBufferSizeWithCounter(() => this.redis.llen(this.redisKey));
  }
 }
--- a/packages/db/src/services/session.service.ts
+++ b/packages/db/src/services/session.service.ts
@@ -1,3 +1,4 @@
+import { getSafeJson } from '@openpanel/json';
 import { cacheable } from '@openpanel/redis';
 import type { IChartEventFilter } from '@openpanel/validation';
 import sqlstring from 'sqlstring';
@@ -14,7 +15,7 @@ import { getEventFiltersWhereClause } from './chart.service';
 import { getOrganizationByProjectIdCached } from './organization.service';
 import { getProfilesCached, type IServiceProfile } from './profile.service';

-export type IClickhouseSession = {
+export interface IClickhouseSession {
  id: string;
  profile_id: string;
  event_count: number;
@@ -53,8 +54,9 @@ export type IClickhouseSession = {
  revenue: number;
  sign: 1 | 0;
  version: number;
-  has_replay: boolean;
-};
+  // Dynamically added
+  has_replay?: boolean;
+}

 export interface IServiceSession {
  id: string;
@@ -92,8 +94,8 @@ export interface IServiceSession {
  utmContent: string;
  utmTerm: string;
  revenue: number;
-  hasReplay: boolean;
  profile?: IServiceProfile;
+  hasReplay?: boolean;
 }

 export interface GetSessionListOptions {
@@ -144,21 +146,19 @@ export function transformSession(session: IClickhouseSession): IServiceSession {
    utmContent: session.utm_content,
    utmTerm: session.utm_term,
    revenue: session.revenue,
-    hasReplay: session.has_replay,
    profile: undefined,
+    hasReplay: session.has_replay,
  };
 }

-type Direction = 'initial' | 'next' | 'prev';
-
-type PageInfo = {
+interface PageInfo {
  next?: Cursor; // use last row
-};
+}

-type Cursor = {
+interface Cursor {
  createdAt: string; // ISO 8601 with ms
  id: string;
-};
+}

 export async function getSessionList({
  cursor,
@@ -238,13 +238,14 @@ export async function getSessionList({
    sb.select[column] = column;
  });

-  sb.select.has_replay = `toBool(src.session_id != '') as has_replay`;
+  sb.select.has_replay = `toBool(src.session_id != '') as hasReplay`;
  sb.joins.has_replay = `LEFT JOIN (SELECT DISTINCT session_id FROM ${TABLE_NAMES.session_replay_chunks} WHERE project_id = ${sqlstring.escape(projectId)} AND started_at > now() - INTERVAL ${dateIntervalInDays} DAY) AS src ON src.session_id = id`;

  const sql = getSql();
  const data = await chQuery<
    IClickhouseSession & {
      latestCreatedAt: string;
+      hasReplay: boolean;
    }
  >(sql);

@@ -347,20 +348,24 @@ export async function getSessionReplayChunksFrom(
     FROM ${TABLE_NAMES.session_replay_chunks}
     WHERE session_id = ${sqlstring.escape(sessionId)}
       AND project_id = ${sqlstring.escape(projectId)}
-     ORDER BY started_at, ended_at
+     ORDER BY started_at, ended_at, chunk_index
     LIMIT ${REPLAY_CHUNKS_PAGE_SIZE + 1}
     OFFSET ${fromIndex}`
  );

  return {
-    data: rows.slice(0, REPLAY_CHUNKS_PAGE_SIZE).map((row, index) => ({
-      chunkIndex: index + fromIndex,
-      events: JSON.parse(row.payload) as {
-        type: number;
-        data: unknown;
-        timestamp: number;
-      }[],
-    })),
+    data: rows
+      .slice(0, REPLAY_CHUNKS_PAGE_SIZE)
+      .map((row, index) => {
+        const events = getSafeJson<
+          { type: number; data: unknown; timestamp: number }[]
+        >(row.payload);
+        if (!events) {
+          return null;
+        }
+        return { chunkIndex: index + fromIndex, events };
+      })
+      .filter(Boolean),
    hasMore: rows.length > REPLAY_CHUNKS_PAGE_SIZE,
  };
 }
@@ -369,19 +374,33 @@ class SessionService {
  constructor(private client: typeof ch) {}

  async byId(sessionId: string, projectId: string) {
-    const result = await clix(this.client)
-      .select<IClickhouseSession>(['*'])
-      .from(TABLE_NAMES.sessions)
-      .where('id', '=', sessionId)
-      .where('project_id', '=', projectId)
-      .where('sign', '=', 1)
-      .execute();
+    const [sessionRows, hasReplayRows] = await Promise.all([
+      clix(this.client)
+        .select<IClickhouseSession>(['*'])
+        .from(TABLE_NAMES.sessions, true)
+        .where('id', '=', sessionId)
+        .where('project_id', '=', projectId)
+        .where('sign', '=', 1)
+        .execute(),
+      chQuery<{ n: number }>(
+        `SELECT 1 AS n
+         FROM ${TABLE_NAMES.session_replay_chunks}
+         WHERE session_id = ${sqlstring.escape(sessionId)}
+           AND project_id = ${sqlstring.escape(projectId)}
+         LIMIT 1`
+      ),
+    ]);

-    if (!result[0]) {
+    if (!sessionRows[0]) {
      throw new Error('Session not found');
    }

-    return transformSession(result[0]);
+    const session = transformSession(sessionRows[0]);
+
+    return {
+      ...session,
+      hasReplay: hasReplayRows.length > 0,
+    };
  }
 }

--- a/packages/sdks/astro/src/OpenPanelComponent.astro
+++ b/packages/sdks/astro/src/OpenPanelComponent.astro
@@ -4,12 +4,14 @@ import { getInitSnippet } from '@openpanel/web';

 type Props = Omit<OpenPanelOptions, 'filter'> & {
  profileId?: string;
+  /** @deprecated Use `scriptUrl` instead. */
  cdnUrl?: string;
+  scriptUrl?: string;
  filter?: string;
  globalProperties?: Record<string, unknown>;
 };

-const { profileId, cdnUrl, globalProperties, ...options } = Astro.props;
+const { profileId, cdnUrl, scriptUrl, globalProperties, ...options } = Astro.props;

 const CDN_URL = 'https://openpanel.dev/op1.js';

@@ -60,5 +62,5 @@ ${methods
  .join('\n')}`;
 ---

-<script src={cdnUrl ?? CDN_URL} async defer />
+<script src={scriptUrl ?? cdnUrl ?? CDN_URL} async defer />
 <script is:inline set:html={scriptContent} />
--- a/packages/sdks/nextjs/index.tsx
+++ b/packages/sdks/nextjs/index.tsx
@@ -1,8 +1,3 @@
-// adding .js next/script import fixes an issues
-// with esm and nextjs (when using pages dir)
-import Script from 'next/script.js';
-import React from 'react';
-
 import type {
  DecrementPayload,
  IdentifyPayload,
@@ -12,6 +7,11 @@ import type {
  TrackProperties,
 } from '@openpanel/web';
 import { getInitSnippet } from '@openpanel/web';
+// adding .js next/script import fixes an issues
+// with esm and nextjs (when using pages dir)
+import Script from 'next/script.js';
+// biome-ignore lint/correctness/noUnusedImports: nextjs requires this
+import React from 'react';

 export * from '@openpanel/web';

@@ -19,7 +19,9 @@ const CDN_URL = 'https://openpanel.dev/op1.js';

 type OpenPanelComponentProps = Omit<OpenPanelOptions, 'filter'> & {
  profileId?: string;
+  /** @deprecated Use `scriptUrl` instead. */
  cdnUrl?: string;
+  scriptUrl?: string;
  filter?: string;
  globalProperties?: Record<string, unknown>;
  strategy?: 'beforeInteractive' | 'afterInteractive' | 'lazyOnload' | 'worker';
@@ -42,6 +44,7 @@ const stringify = (obj: unknown) => {
 export function OpenPanelComponent({
  profileId,
  cdnUrl,
+  scriptUrl,
  globalProperties,
  strategy = 'afterInteractive',
  ...options
@@ -80,10 +83,8 @@ export function OpenPanelComponent({

  return (
    <>
-      <Script src={appendVersion(cdnUrl || CDN_URL)} async defer />
+      <Script async defer src={appendVersion(scriptUrl || cdnUrl || CDN_URL)} />
      <Script
-        id="openpanel-init"
-        strategy={strategy}
        dangerouslySetInnerHTML={{
          __html: `${getInitSnippet()}
          ${methods
@@ -92,6 +93,8 @@ export function OpenPanelComponent({
            })
            .join('\n')}`,
        }}
+        id="openpanel-init"
+        strategy={strategy}
      />
    </>
  );
@@ -101,25 +104,21 @@ type IdentifyComponentProps = IdentifyPayload;

 export function IdentifyComponent(props: IdentifyComponentProps) {
  return (
-    <>
-      <Script
-        dangerouslySetInnerHTML={{
-          __html: `window.op('identify', ${JSON.stringify(props)});`,
-        }}
-      />
-    </>
+    <Script
+      dangerouslySetInnerHTML={{
+        __html: `window.op('identify', ${JSON.stringify(props)});`,
+      }}
+    />
  );
 }

 export function SetGlobalPropertiesComponent(props: Record<string, unknown>) {
  return (
-    <>
-      <Script
-        dangerouslySetInnerHTML={{
-          __html: `window.op('setGlobalProperties', ${JSON.stringify(props)});`,
-        }}
-      />
-    </>
+    <Script
+      dangerouslySetInnerHTML={{
+        __html: `window.op('setGlobalProperties', ${JSON.stringify(props)});`,
+      }}
+    />
  );
 }

@@ -152,7 +151,7 @@ function screenView(properties?: TrackProperties): void;
 function screenView(path: string, properties?: TrackProperties): void;
 function screenView(
  pathOrProperties?: string | TrackProperties,
-  propertiesOrUndefined?: TrackProperties,
+  propertiesOrUndefined?: TrackProperties
 ) {
  window.op?.('screenView', pathOrProperties, propertiesOrUndefined);
 }
--- a/packages/sdks/sdk/src/index.ts
+++ b/packages/sdks/sdk/src/index.ts
@@ -176,7 +176,7 @@ export class OpenPanel {

  async revenue(
    amount: number,
-    properties?: TrackProperties & { deviceId?: string },
+    properties?: TrackProperties & { deviceId?: string }
  ) {
    const deviceId = properties?.deviceId;
    delete properties?.deviceId;
@@ -195,7 +195,10 @@ export class OpenPanel {
    return this.sessionId ?? '';
  }

-  async fetchDeviceId(): Promise<string> {
+  /**
+   * @deprecated Use `getDeviceId()` instead. This async method is no longer needed.
+   */
+  fetchDeviceId(): Promise<string> {
    return Promise.resolve(this.deviceId ?? '');
  }

--- a/packages/trpc/src/routers/session.ts
+++ b/packages/trpc/src/routers/session.ts
@@ -1,12 +1,10 @@
-import { z } from 'zod';
-
 import {
  getSessionList,
  getSessionReplayChunksFrom,
  sessionService,
 } from '@openpanel/db';
 import { zChartEventFilter } from '@openpanel/validation';
-
+import { z } from 'zod';
 import { createTRPCRouter, protectedProcedure } from '../trpc';

 export function encodeCursor(cursor: {
@@ -18,7 +16,7 @@ export function encodeCursor(cursor: {
 }

 export function decodeCursor(
-  encoded: string,
+  encoded: string
 ): { createdAt: string; id: string } | null {
  try {
    const json = Buffer.from(encoded, 'base64url').toString('utf8');
@@ -44,7 +42,7 @@ export const sessionRouter = createTRPCRouter({
        endDate: z.date().optional(),
        search: z.string().optional(),
        take: z.number().default(50),
-      }),
+      })
    )
    .query(async ({ input }) => {
      const cursor = input.cursor ? decodeCursor(input.cursor) : null;
@@ -62,7 +60,7 @@ export const sessionRouter = createTRPCRouter({

  byId: protectedProcedure
    .input(z.object({ sessionId: z.string(), projectId: z.string() }))
-    .query(async ({ input: { sessionId, projectId } }) => {
+    .query(({ input: { sessionId, projectId } }) => {
      return sessionService.byId(sessionId, projectId);
    }),

@@ -72,9 +70,9 @@ export const sessionRouter = createTRPCRouter({
        sessionId: z.string(),
        projectId: z.string(),
        fromIndex: z.number().int().min(0).default(0),
-      }),
+      })
    )
-    .query(async ({ input: { sessionId, projectId, fromIndex } }) => {
+    .query(({ input: { sessionId, projectId, fromIndex } }) => {
      return getSessionReplayChunksFrom(sessionId, projectId, fromIndex);
    }),
 });
--- a/packages/validation/src/track.validation.ts
+++ b/packages/validation/src/track.validation.ts
@@ -67,9 +67,9 @@ export const zReplayPayload = z.object({
  chunk_index: z.number().int().min(0).max(65_535),
  events_count: z.number().int().min(1),
  is_full_snapshot: z.boolean(),
-  started_at: z.string(),
-  ended_at: z.string(),
-  payload: z.string().max(1_048_576 * 2), // 1MB max
+  started_at: z.string().datetime(),
+  ended_at: z.string().datetime(),
+  payload: z.string().max(1_048_576 * 2), // 2MB max
 });

 export const zTrackHandlerPayload = z.discriminatedUnion('type', [