final fixes

2026-02-26 10:19:29 +01:00
parent b193ccb7d0
commit d5513d8a47
21 changed files with 388 additions and 370 deletions
--- a/apps/api/src/controllers/event.controller.ts
+++ b/apps/api/src/controllers/event.controller.ts
@@ -1,26 +1,25 @@
-import type { FastifyReply, FastifyRequest } from 'fastify';
-
-import { generateDeviceId, parseUserAgent } from '@openpanel/common/server';
-import { getSalts } from '@openpanel/db';
-import { getEventsGroupQueueShard } from '@openpanel/queue';
-
 import { generateId, slug } from '@openpanel/common';
+import { parseUserAgent } from '@openpanel/common/server';
+import { getSalts } from '@openpanel/db';
 import { getGeoLocation } from '@openpanel/geo';
+import { getEventsGroupQueueShard } from '@openpanel/queue';
 import type { DeprecatedPostEventPayload } from '@openpanel/validation';
+import type { FastifyReply, FastifyRequest } from 'fastify';
 import { getStringHeaders, getTimestamp } from './track.controller';
+import { getDeviceId } from '@/utils/ids';

 export async function postEvent(
  request: FastifyRequest<{
    Body: DeprecatedPostEventPayload;
  }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
  const { timestamp, isTimestampFromThePast } = getTimestamp(
    request.timestamp,
-    request.body,
+    request.body
  );
  const ip = request.clientIp;
-  const ua = request.headers['user-agent'];
+  const ua = request.headers['user-agent'] ?? 'unknown/1.0';
  const projectId = request.client?.projectId;
  const headers = getStringHeaders(request.headers);

@@ -30,34 +29,22 @@ export async function postEvent(
  }

  const [salts, geo] = await Promise.all([getSalts(), getGeoLocation(ip)]);
-  const currentDeviceId = ua
-    ? generateDeviceId({
-        salt: salts.current,
-        origin: projectId,
-        ip,
-        ua,
-      })
-    : '';
-  const previousDeviceId = ua
-    ? generateDeviceId({
-        salt: salts.previous,
-        origin: projectId,
-        ip,
-        ua,
-      })
-    : '';
+  const { deviceId, sessionId } = await getDeviceId({
+    projectId,
+    ip,
+    ua,
+    salts,
+  });

  const uaInfo = parseUserAgent(ua, request.body?.properties);
  const groupId = uaInfo.isServer
-    ? request.body?.profileId
-      ? `${projectId}:${request.body?.profileId}`
-      : `${projectId}:${generateId()}`
-    : currentDeviceId;
+    ? `${projectId}:${request.body?.profileId ?? generateId()}`
+    : deviceId;
  const jobId = [
    slug(request.body.name),
    timestamp,
    projectId,
-    currentDeviceId,
+    deviceId,
    groupId,
  ]
    .filter(Boolean)
@@ -74,9 +61,10 @@ export async function postEvent(
      },
      uaInfo,
      geo,
-      currentDeviceId,
-      previousDeviceId,
-      deviceId: '',
+      currentDeviceId: '',
+      previousDeviceId: '',
+      deviceId,
+      sessionId: sessionId ?? '',
    },
    groupId,
    jobId,
--- a/apps/api/src/controllers/track.controller.ts
+++ b/apps/api/src/controllers/track.controller.ts
@@ -1,7 +1,3 @@
-import type { FastifyReply, FastifyRequest } from 'fastify';
-import { assocPath, pathOr, pick } from 'ramda';
-
-import { HttpError } from '@/utils/errors';
 import { generateId, slug } from '@openpanel/common';
 import { generateDeviceId, parseUserAgent } from '@openpanel/common/server';
 import {
@@ -13,8 +9,6 @@ import {
 import { type GeoLocation, getGeoLocation } from '@openpanel/geo';
 import { getEventsGroupQueueShard } from '@openpanel/queue';
 import { getRedisCache } from '@openpanel/redis';
-
-import { getDeviceId } from '@/utils/ids';
 import {
  type IDecrementPayload,
  type IIdentifyPayload,
@@ -24,6 +18,10 @@ import {
  type ITrackPayload,
  zTrackHandlerPayload,
 } from '@openpanel/validation';
+import type { FastifyReply, FastifyRequest } from 'fastify';
+import { assocPath, pathOr, pick } from 'ramda';
+import { HttpError } from '@/utils/errors';
+import { getDeviceId } from '@/utils/ids';

 export function getStringHeaders(headers: FastifyRequest['headers']) {
  return Object.entries(
@@ -35,14 +33,14 @@ export function getStringHeaders(headers: FastifyRequest['headers']) {
        'openpanel-client-id',
        'request-id',
      ],
-      headers,
-    ),
+      headers
+    )
  ).reduce(
    (acc, [key, value]) => ({
      ...acc,
      [key]: value ? String(value) : undefined,
    }),
-    {},
+    {}
  );
 }

@@ -68,7 +66,7 @@ function getIdentity(body: ITrackHandlerPayload): IIdentifyPayload | undefined {

 export function getTimestamp(
  timestamp: FastifyRequest['timestamp'],
-  payload: ITrackHandlerPayload['payload'],
+  payload: ITrackHandlerPayload['payload']
 ) {
  const safeTimestamp = timestamp || Date.now();
  const userDefinedTimestamp =
@@ -121,7 +119,7 @@ async function buildContext(
  request: FastifyRequest<{
    Body: ITrackHandlerPayload;
  }>,
-  validatedBody: ITrackHandlerPayload,
+  validatedBody: ITrackHandlerPayload
 ): Promise<TrackContext> {
  const projectId = request.client?.projectId;
  if (!projectId) {
@@ -176,7 +174,7 @@ async function buildContext(

 async function handleTrack(
  payload: ITrackPayload,
-  context: TrackContext,
+  context: TrackContext
 ): Promise<void> {
  const { projectId, deviceId, geo, headers, timestamp, sessionId } = context;

@@ -224,7 +222,7 @@ async function handleTrack(
      },
      groupId,
      jobId,
-    }),
+    })
  );

  await Promise.all(promises);
@@ -232,7 +230,7 @@ async function handleTrack(

 async function handleIdentify(
  payload: IIdentifyPayload,
-  context: TrackContext,
+  context: TrackContext
 ): Promise<void> {
  const { projectId, geo, ua } = context;
  const uaInfo = parseUserAgent(ua, payload.properties);
@@ -262,7 +260,7 @@ async function handleIdentify(
 async function adjustProfileProperty(
  payload: IIncrementPayload | IDecrementPayload,
  projectId: string,
-  direction: 1 | -1,
+  direction: 1 | -1
 ): Promise<void> {
  const { profileId, property, value } = payload;
  const profile = await getProfileById(profileId, projectId);
@@ -272,7 +270,7 @@ async function adjustProfileProperty(

  const parsed = Number.parseInt(
    pathOr<string>('0', property.split('.'), profile.properties),
-    10,
+    10
  );

  if (Number.isNaN(parsed)) {
@@ -282,7 +280,7 @@ async function adjustProfileProperty(
  profile.properties = assocPath(
    property.split('.'),
    parsed + direction * (value || 1),
-    profile.properties,
+    profile.properties
  );

  await upsertProfile({
@@ -295,21 +293,21 @@ async function adjustProfileProperty(

 async function handleIncrement(
  payload: IIncrementPayload,
-  context: TrackContext,
+  context: TrackContext
 ): Promise<void> {
  await adjustProfileProperty(payload, context.projectId, 1);
 }

 async function handleDecrement(
  payload: IDecrementPayload,
-  context: TrackContext,
+  context: TrackContext
 ): Promise<void> {
  await adjustProfileProperty(payload, context.projectId, -1);
 }

 async function handleReplay(
  payload: IReplayPayload,
-  context: TrackContext,
+  context: TrackContext
 ): Promise<void> {
  if (!context.sessionId) {
    throw new HttpError('Session ID is required for replay', { status: 400 });
@@ -318,7 +316,6 @@ async function handleReplay(
  const row = {
    project_id: context.projectId,
    session_id: context.sessionId,
-    profile_id: '', // TODO: remove
    chunk_index: payload.chunk_index,
    started_at: payload.started_at,
    ended_at: payload.ended_at,
@@ -333,7 +330,7 @@ export async function handler(
  request: FastifyRequest<{
    Body: ITrackHandlerPayload;
  }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
  // Validate request body with Zod
  const validationResult = zTrackHandlerPayload.safeParse(request.body);
@@ -393,7 +390,7 @@ export async function handler(

 export async function fetchDeviceId(
  request: FastifyRequest,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
  const salts = await getSalts();
  const projectId = request.client?.projectId;
@@ -428,11 +425,11 @@ export async function fetchDeviceId(
    const multi = getRedisCache().multi();
    multi.hget(
      `bull:sessions:sessionEnd:${projectId}:${currentDeviceId}`,
-      'data',
+      'data'
    );
    multi.hget(
      `bull:sessions:sessionEnd:${projectId}:${previousDeviceId}`,
-      'data',
+      'data'
    );
    const res = await multi.exec();
    if (res?.[0]?.[1]) {
--- a/apps/api/src/hooks/duplicate.hook.ts
+++ b/apps/api/src/hooks/duplicate.hook.ts
@@ -14,7 +14,8 @@ export async function duplicateHook(
  const ip = req.clientIp;
  const origin = req.headers.origin;
  const clientId = req.headers['openpanel-client-id'];
-  const shouldCheck = ip && origin && clientId && req.body.type !== 'replay';
+  const isReplay = 'type' in req.body && req.body.type === 'replay';
+  const shouldCheck = ip && origin && clientId && !isReplay;

  const isDuplicate = shouldCheck
    ? await isDuplicatedEvent({
@@ -25,7 +26,6 @@ export async function duplicateHook(
      })
    : false;

-  console.log('Duplicate event', isDuplicate);
  if (isDuplicate) {
    return reply.status(200).send('Duplicate event');
  }
--- a/apps/api/src/hooks/request-logging.hook.ts
+++ b/apps/api/src/hooks/request-logging.hook.ts
@@ -41,7 +41,6 @@ export async function requestLoggingHook(
        ['openpanel-client-id', 'openpanel-sdk-name', 'openpanel-sdk-version'],
        request.headers
      ),
-      // body: request.body,
    });
  }
 }
--- a/apps/api/src/index.ts
+++ b/apps/api/src/index.ts
@@ -116,7 +116,7 @@ const startServer = async () => {

        return callback(null, {
          origin: '*',
-          maxAge: 86_400 * 7, // cache preflight for 24h
+          maxAge: 86_400 * 7, // cache preflight for 7 days
        });
      };
    });
@@ -125,11 +125,6 @@ const startServer = async () => {
      global: false,
    });

-    fastify.addHook('onRequest', async (req) => {
-      if (req.method === 'POST') {
-        console.log('Incoming req', req.method, req.url);
-      }
-    });
    fastify.addHook('onRequest', requestIdHook);
    fastify.addHook('onRequest', timestampHook);
    fastify.addHook('onRequest', ipHook);
--- a/apps/public/content/docs/(tracking)/sdks/astro.mdx
+++ b/apps/public/content/docs/(tracking)/sdks/astro.mdx
@@ -54,7 +54,8 @@ import { OpenPanelComponent } from '@openpanel/astro';
 ##### Astro options

 - `profileId` - If you have a user id, you can pass it here to identify the user
- `cdnUrl` - The url to the OpenPanel SDK (default: `https://openpanel.dev/op1.js`)
+- `cdnUrl` (deprecated) - The url to the OpenPanel SDK (default: `https://openpanel.dev/op1.js`)
+- `scriptUrl` - The url to the OpenPanel SDK (default: `https://openpanel.dev/op1.js`)
 - `filter` - This is a function that will be called before tracking an event. If it returns false the event will not be tracked. [Read more](#filter)
 - `globalProperties` - This is an object of properties that will be sent with every event.

--- a/apps/public/content/docs/(tracking)/sdks/nextjs.mdx
+++ b/apps/public/content/docs/(tracking)/sdks/nextjs.mdx
@@ -62,7 +62,8 @@ export default function RootLayout({ children }) {
 ##### NextJS options

 - `profileId` - If you have a user id, you can pass it here to identify the user
- `cdnUrl` - The url to the OpenPanel SDK (default: `https://openpanel.dev/op1.js`)
+- `cdnUrl` (deprecated) - The url to the OpenPanel SDK (default: `https://openpanel.dev/op1.js`)
+- `scriptUrl` - The url to the OpenPanel SDK (default: `https://openpanel.dev/op1.js`)
 - `filter` - This is a function that will be called before tracking an event. If it returns false the event will not be tracked. [Read more](#filter)
 - `globalProperties` - This is an object of properties that will be sent with every event.

@@ -286,12 +287,12 @@ import { createRouteHandler } from '@openpanel/nextjs/server';
 export const { GET, POST } = createRouteHandler();
 ```

-Remember to change the `apiUrl` and `cdnUrl` in the `OpenPanelComponent` to your own server. 
+Remember to change the `apiUrl` and `scriptUrl` in the `OpenPanelComponent` to your own server. 

 ```tsx
 <OpenPanelComponent
  apiUrl="/api/op" // [!code highlight]
-  cdnUrl="/api/op/op1.js" // [!code highlight]
+  scriptUrl="/api/op/op1.js" // [!code highlight]
  clientId="your-client-id"
  trackScreenViews={true}
 />
--- a/apps/public/content/guides/nextjs-analytics.mdx
+++ b/apps/public/content/guides/nextjs-analytics.mdx
@@ -225,7 +225,7 @@ Then update your OpenPanelComponent to use the proxy endpoint.
 ```tsx
 <OpenPanelComponent
  apiUrl="/api/op"
-  cdnUrl="/api/op/op1.js"
+  scriptUrl="/api/op/op1.js"
  clientId="your-client-id"
  trackScreenViews={true}
 />
--- a/apps/start/src/components/sessions/replay/index.tsx
+++ b/apps/start/src/components/sessions/replay/index.tsx
@@ -4,6 +4,7 @@ import { Maximize2, Minimize2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { BrowserChrome } from './browser-chrome';
 import { ReplayTime } from './replay-controls';
+import { ReplayTimeline } from './replay-timeline';
 import { getEventOffsetMs } from './replay-utils';
 import {
  ReplayProvider,
@@ -12,7 +13,6 @@ import {
 } from '@/components/sessions/replay/replay-context';
 import { ReplayEventFeed } from '@/components/sessions/replay/replay-event-feed';
 import { ReplayPlayer } from '@/components/sessions/replay/replay-player';
-import { ReplayTimeline } from '@/components/sessions/replay/replay-timeline';
 import { useTRPC } from '@/integrations/trpc/react';

 function BrowserUrlBar({ events }: { events: IServiceEvent[] }) {
@@ -32,7 +32,7 @@ function BrowserUrlBar({ events }: { events: IServiceEvent[] }) {
      .filter(({ offsetMs }) => offsetMs >= -10_000 && offsetMs <= currentTime)
      .sort((a, b) => a.offsetMs - b.offsetMs);

-    const latest = withOffset[withOffset.length - 1];
+    const latest = withOffset.at(-1);
    if (!latest) {
      return '';
    }
@@ -74,7 +74,7 @@ function ReplayChunkLoader({
        )
        .then((res) => {
          res.data.forEach((row) => {
-            row.events.forEach((event) => {
+            row?.events?.forEach((event) => {
              addEvent(event);
            });
          });
@@ -82,6 +82,9 @@ function ReplayChunkLoader({
          if (res.hasMore) {
            recursive(fromIndex + res.data.length);
          }
+        })
+        .catch(() => {
+          // chunk loading failed — replay may be incomplete
        });
    }

@@ -160,10 +163,30 @@ function ReplayContent({
  );

  const events = eventsData?.data ?? [];
-  const playerEvents = firstBatch?.data.flatMap((row) => row.events) ?? [];
+  const playerEvents =
+    firstBatch?.data.flatMap((row) => row?.events ?? []) ?? [];
  const hasMore = firstBatch?.hasMore ?? false;
  const hasReplay = playerEvents.length !== 0;

+  function renderReplay() {
+    if (replayLoading) {
+      return (
+        <div className="col h-[320px] items-center justify-center gap-4 bg-background">
+          <div className="h-8 w-8 animate-pulse rounded-full bg-muted" />
+          <div>Loading session replay</div>
+        </div>
+      );
+    }
+    if (hasReplay) {
+      return <ReplayPlayer events={playerEvents} />;
+    }
+    return (
+      <div className="flex h-[320px] items-center justify-center bg-background text-muted-foreground text-sm">
+        No replay data available for this session.
+      </div>
+    );
+  }
+
  return (
    <ReplayProvider>
      <div
@@ -187,18 +210,7 @@ function ReplayContent({
              )
            }
          >
-            {replayLoading ? (
-              <div className="col h-[320px] items-center justify-center gap-4 bg-background">
-                <div className="h-8 w-8 animate-pulse rounded-full bg-muted" />
-                <div>Loading session replay</div>
-              </div>
-            ) : hasReplay ? (
-              <ReplayPlayer events={playerEvents} />
-            ) : (
-              <div className="flex h-[320px] items-center justify-center bg-background text-muted-foreground text-sm">
-                No replay data available for this session.
-              </div>
-            )}
+            {renderReplay()}
            {hasReplay && <ReplayTimeline events={events} />}
          </BrowserChrome>
        </div>
--- a/apps/start/src/components/sessions/table/columns.tsx
+++ b/apps/start/src/components/sessions/table/columns.tsx
@@ -1,14 +1,12 @@
-import { ProjectLink } from '@/components/links';
-import { SerieIcon } from '@/components/report-chart/common/serie-icon';
-import { formatDateTime, formatTimeAgoOrDateTime } from '@/utils/date';
-import type { ColumnDef } from '@tanstack/react-table';
-import { Video } from 'lucide-react';
-
-import { ColumnCreatedAt } from '@/components/column-created-at';
-import { ProfileAvatar } from '@/components/profiles/profile-avatar';
-import { getProfileName } from '@/utils/getters';
 import { round } from '@openpanel/common';
 import type { IServiceSession } from '@openpanel/db';
+import type { ColumnDef } from '@tanstack/react-table';
+import { Video } from 'lucide-react';
+import { ColumnCreatedAt } from '@/components/column-created-at';
+import { ProjectLink } from '@/components/links';
+import { ProfileAvatar } from '@/components/profiles/profile-avatar';
+import { SerieIcon } from '@/components/report-chart/common/serie-icon';
+import { getProfileName } from '@/utils/getters';

 function formatDuration(milliseconds: number): string {
  const seconds = milliseconds / 1000;
@@ -45,20 +43,20 @@ export function useColumns() {
      cell: ({ row }) => {
        const session = row.original;
        return (
-          <div className="row gap-2 items-center">
+          <div className="row items-center gap-2">
            <ProjectLink
-              href={`/sessions/${session.id}`}
              className="font-medium"
+              href={`/sessions/${session.id}`}
              title={session.id}
            >
              {session.id.slice(0, 8)}...
            </ProjectLink>
            {session.hasReplay && (
              <ProjectLink
-                href={`/sessions/${session.id}#replay`}
-                className="text-muted-foreground hover:text-foreground"
-                title="View replay"
                aria-label="View replay"
+                className="text-muted-foreground hover:text-foreground"
+                href={`/sessions/${session.id}#replay`}
+                title="View replay"
              >
                <Video className="size-4" />
              </ProjectLink>
@@ -76,8 +74,8 @@ export function useColumns() {
        if (session.profile) {
          return (
            <ProjectLink
+              className="row items-center gap-2 font-medium"
              href={`/profiles/${encodeURIComponent(session.profile.id)}`}
-              className="font-medium row gap-2 items-center"
            >
              <ProfileAvatar size="sm" {...session.profile} />
              {getProfileName(session.profile)}
@@ -86,8 +84,8 @@ export function useColumns() {
        }
        return (
          <ProjectLink
+            className="font-medium font-mono"
            href={`/profiles/${encodeURIComponent(session.profileId)}`}
-            className="font-mono font-medium"
          >
            {session.profileId}
          </ProjectLink>
--- a/apps/start/src/modals/event-details.tsx
+++ b/apps/start/src/modals/event-details.tsx
@@ -1,22 +1,3 @@
-import { ReportChartShortcut } from '@/components/report-chart/shortcut';
-import {
-  useEventQueryFilters,
-  useEventQueryNamesFilter,
-} from '@/hooks/use-event-query-filters';
-
-import { ProjectLink } from '@/components/links';
-import {
-  WidgetButtons,
-  WidgetHead,
-} from '@/components/overview/overview-widget';
-import { SerieIcon } from '@/components/report-chart/common/serie-icon';
-import { Button } from '@/components/ui/button';
-import { FieldValue, KeyValueGrid } from '@/components/ui/key-value-grid';
-import { Widget, WidgetBody } from '@/components/widget';
-import { fancyMinutes } from '@/hooks/use-numer-formatter';
-import { useTRPC } from '@/integrations/trpc/react';
-import { cn } from '@/utils/cn';
-import { getProfileName } from '@/utils/getters';
 import type { IClickhouseEvent, IServiceEvent } from '@openpanel/db';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { FilterIcon, XIcon } from 'lucide-react';
@@ -24,6 +5,24 @@ import { omit } from 'ramda';
 import { Suspense, useState } from 'react';
 import { popModal } from '.';
 import { ModalContent } from './Modal/Container';
+import { ProjectLink } from '@/components/links';
+import {
+  WidgetButtons,
+  WidgetHead,
+} from '@/components/overview/overview-widget';
+import { SerieIcon } from '@/components/report-chart/common/serie-icon';
+import { ReportChartShortcut } from '@/components/report-chart/shortcut';
+import { Button } from '@/components/ui/button';
+import { FieldValue, KeyValueGrid } from '@/components/ui/key-value-grid';
+import { Widget, WidgetBody } from '@/components/widget';
+import {
+  useEventQueryFilters,
+  useEventQueryNamesFilter,
+} from '@/hooks/use-event-query-filters';
+import { fancyMinutes } from '@/hooks/use-numer-formatter';
+import { useTRPC } from '@/integrations/trpc/react';
+import { cn } from '@/utils/cn';
+import { getProfileName } from '@/utils/getters';

 interface Props {
  id: string;
@@ -55,7 +54,7 @@ const filterable: Partial<Record<keyof IServiceEvent, keyof IClickhouseEvent>> =
 export default function EventDetails(props: Props) {
  return (
    <ModalContent className="!p-0">
-      <Widget className="bg-transparent border-0 min-w-0">
+      <Widget className="min-w-0 border-0 bg-transparent">
        <Suspense fallback={<EventDetailsSkeleton />}>
          <EventDetailsContent {...props} />
        </Suspense>
@@ -84,7 +83,7 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
      id,
      projectId,
      createdAt,
-    }),
+    })
  );

  const { event, session } = query.data;
@@ -158,7 +157,7 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
              event,
            });
          }
-        },
+        }
      );
    }

@@ -209,7 +208,7 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
              >
                <ArrowRightIcon className="size-4" />
              </Button> */}
-            <Button size="icon" variant={'ghost'} onClick={() => popModal()}>
+            <Button onClick={() => popModal()} size="icon" variant={'ghost'}>
              <XIcon className="size-4" />
            </Button>
          </div>
@@ -218,10 +217,10 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
        <WidgetButtons>
          {Object.entries(TABS).map(([, tab]) => (
            <button
-              key={tab.id}
-              type="button"
-              onClick={() => setWidget(tab)}
              className={cn(tab.id === widget.id && 'active')}
+              key={tab.id}
+              onClick={() => setWidget(tab)}
+              type="button"
            >
              {tab.title}
            </button>
@@ -231,29 +230,29 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
      <WidgetBody className="col gap-4 bg-def-100">
        {profile && (
          <ProjectLink
-            onClick={() => popModal()}
+            className="card col gap-2 p-4 py-2 hover:bg-def-100"
            href={`/profiles/${encodeURIComponent(profile.id)}`}
-            className="card p-4 py-2 col gap-2 hover:bg-def-100"
+            onClick={() => popModal()}
          >
-            <div className="row items-center gap-2 justify-between">
-              <div className="row items-center gap-2 min-w-0">
+            <div className="row items-center justify-between gap-2">
+              <div className="row min-w-0 items-center gap-2">
                {profile.avatar && (
                  <img
-                    className="size-4 bg-border rounded-full"
+                    className="size-4 rounded-full bg-border"
                    src={profile.avatar}
                  />
                )}
-                <div className="font-medium truncate">
+                <div className="truncate font-medium">
                  {getProfileName(profile, false)}
                </div>
              </div>
-              <div className="row items-center gap-2 shrink-0">
-                <div className="row gap-1 items-center">
+              <div className="row shrink-0 items-center gap-2">
+                <div className="row items-center gap-1">
                  <SerieIcon name={event.country} />
                  <SerieIcon name={event.os} />
                  <SerieIcon name={event.browser} />
                </div>
-                <div className="text-muted-foreground truncate max-w-40">
+                <div className="max-w-40 truncate text-muted-foreground">
                  {event.referrerName || event.referrer}
                </div>
              </div>
@@ -276,16 +275,16 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
            <KeyValueGrid
              columns={1}
              data={properties}
+              onItemClick={(item) => {
+                popModal();
+                setFilter(`properties.${item.name}`, item.value as any);
+              }}
              renderValue={(item) => (
                <div className="flex items-center gap-2">
                  <span className="font-mono">{String(item.value)}</span>
                  <FilterIcon className="size-3 shrink-0" />
                </div>
              )}
-              onItemClick={(item) => {
-                popModal();
-                setFilter(`properties.${item.name}`, item.value as any);
-              }}
            />
          </section>
        )}
@@ -296,25 +295,6 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
          <KeyValueGrid
            columns={1}
            data={data}
-            renderValue={(item) => {
-              const isFilterable = item.value && (filterable as any)[item.name];
-              if (isFilterable) {
-                return (
-                  <div className="flex items-center gap-2">
-                    <FieldValue
-                      name={item.name}
-                      value={item.value}
-                      event={event}
-                    />
-                    <FilterIcon className="size-3 shrink-0" />
-                  </div>
-                );
-              }
-
-              return (
-                <FieldValue name={item.name} value={item.value} event={event} />
-              );
-            }}
            onItemClick={(item) => {
              const isFilterable = item.value && (filterable as any)[item.name];
              if (isFilterable) {
@@ -322,26 +302,45 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
                setFilter(item.name as keyof IServiceEvent, item.value);
              }
            }}
+            renderValue={(item) => {
+              const isFilterable = item.value && (filterable as any)[item.name];
+              if (isFilterable) {
+                return (
+                  <div className="flex items-center gap-2">
+                    <FieldValue
+                      event={event}
+                      name={item.name}
+                      value={item.value}
+                    />
+                    <FilterIcon className="size-3 shrink-0" />
+                  </div>
+                );
+              }
+
+              return (
+                <FieldValue event={event} name={item.name} value={item.value} />
+              );
+            }}
          />
        </section>
        <section>
          <div className="mb-2 flex justify-between font-medium">
            <div>All events for {event.name}</div>
            <button
-              type="button"
              className="text-muted-foreground hover:underline"
              onClick={() => {
                setEvents([event.name]);
                popModal();
              }}
+              type="button"
            >
              Show all
            </button>
          </div>
          <div className="card p-4">
            <ReportChartShortcut
-              projectId={event.projectId}
              chartType="linear"
+              projectId={event.projectId}
              series={[
                {
                  id: 'A',
@@ -365,52 +364,52 @@ function EventDetailsSkeleton() {
    <>
      <WidgetHead>
        <div className="row items-center justify-between">
-          <div className="h-6 w-32 bg-muted animate-pulse rounded" />
+          <div className="h-6 w-32 animate-pulse rounded bg-muted" />
          <div className="row items-center gap-2 pr-2">
-            <div className="h-8 w-8 bg-muted animate-pulse rounded" />
-            <div className="h-8 w-8 bg-muted animate-pulse rounded" />
-            <div className="h-8 w-8 bg-muted animate-pulse rounded" />
+            <div className="h-8 w-8 animate-pulse rounded bg-muted" />
+            <div className="h-8 w-8 animate-pulse rounded bg-muted" />
+            <div className="h-8 w-8 animate-pulse rounded bg-muted" />
          </div>
        </div>

        <WidgetButtons>
-          <div className="h-8 w-20 bg-muted animate-pulse rounded" />
-          <div className="h-8 w-20 bg-muted animate-pulse rounded" />
+          <div className="h-8 w-20 animate-pulse rounded bg-muted" />
+          <div className="h-8 w-20 animate-pulse rounded bg-muted" />
        </WidgetButtons>
      </WidgetHead>
      <WidgetBody className="col gap-4 bg-def-100">
        {/* Profile skeleton */}
-        <div className="card p-4 py-2 col gap-2">
-          <div className="row items-center gap-2 justify-between">
-            <div className="row items-center gap-2 min-w-0">
-              <div className="size-4 bg-muted animate-pulse rounded-full" />
-              <div className="h-4 w-24 bg-muted animate-pulse rounded" />
+        <div className="card col gap-2 p-4 py-2">
+          <div className="row items-center justify-between gap-2">
+            <div className="row min-w-0 items-center gap-2">
+              <div className="size-4 animate-pulse rounded-full bg-muted" />
+              <div className="h-4 w-24 animate-pulse rounded bg-muted" />
            </div>
-            <div className="row items-center gap-2 shrink-0">
-              <div className="row gap-1 items-center">
-                <div className="size-4 bg-muted animate-pulse rounded" />
-                <div className="size-4 bg-muted animate-pulse rounded" />
-                <div className="size-4 bg-muted animate-pulse rounded" />
+            <div className="row shrink-0 items-center gap-2">
+              <div className="row items-center gap-1">
+                <div className="size-4 animate-pulse rounded bg-muted" />
+                <div className="size-4 animate-pulse rounded bg-muted" />
+                <div className="size-4 animate-pulse rounded bg-muted" />
              </div>
-              <div className="h-4 w-32 bg-muted animate-pulse rounded" />
+              <div className="h-4 w-32 animate-pulse rounded bg-muted" />
            </div>
          </div>
-          <div className="h-4 w-64 bg-muted animate-pulse rounded" />
+          <div className="h-4 w-64 animate-pulse rounded bg-muted" />
        </div>

        {/* Properties skeleton */}
        <section>
          <div className="mb-2 flex justify-between font-medium">
-            <div className="h-5 w-20 bg-muted animate-pulse rounded" />
+            <div className="h-5 w-20 animate-pulse rounded bg-muted" />
          </div>
          <div className="space-y-2">
            {Array.from({ length: 3 }).map((_, i) => (
              <div
+                className="flex items-center justify-between rounded bg-muted/50 p-3"
                key={i.toString()}
-                className="flex items-center justify-between p-3 bg-muted/50 rounded"
              >
-                <div className="h-4 w-24 bg-muted animate-pulse rounded" />
-                <div className="h-4 w-32 bg-muted animate-pulse rounded" />
+                <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+                <div className="h-4 w-32 animate-pulse rounded bg-muted" />
              </div>
            ))}
          </div>
@@ -419,16 +418,16 @@ function EventDetailsSkeleton() {
        {/* Information skeleton */}
        <section>
          <div className="mb-2 flex justify-between font-medium">
-            <div className="h-5 w-24 bg-muted animate-pulse rounded" />
+            <div className="h-5 w-24 animate-pulse rounded bg-muted" />
          </div>
          <div className="space-y-2">
            {Array.from({ length: 6 }).map((_, i) => (
              <div
+                className="flex items-center justify-between rounded bg-muted/50 p-3"
                key={i.toString()}
-                className="flex items-center justify-between p-3 bg-muted/50 rounded"
              >
-                <div className="h-4 w-20 bg-muted animate-pulse rounded" />
-                <div className="h-4 w-28 bg-muted animate-pulse rounded" />
+                <div className="h-4 w-20 animate-pulse rounded bg-muted" />
+                <div className="h-4 w-28 animate-pulse rounded bg-muted" />
              </div>
            ))}
          </div>
@@ -437,11 +436,11 @@ function EventDetailsSkeleton() {
        {/* Chart skeleton */}
        <section>
          <div className="mb-2 flex justify-between font-medium">
-            <div className="h-5 w-40 bg-muted animate-pulse rounded" />
-            <div className="h-4 w-16 bg-muted animate-pulse rounded" />
+            <div className="h-5 w-40 animate-pulse rounded bg-muted" />
+            <div className="h-4 w-16 animate-pulse rounded bg-muted" />
          </div>
          <div className="card p-4">
-            <div className="h-32 w-full bg-muted animate-pulse rounded" />
+            <div className="h-32 w-full animate-pulse rounded bg-muted" />
          </div>
        </section>
      </WidgetBody>
--- a/apps/start/src/routes/_app.$organizationId.$projectId.sessions_.$sessionId.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.sessions_.$sessionId.tsx
@@ -1,3 +1,6 @@
+import type { IServiceEvent, IServiceSession } from '@openpanel/db';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, Link } from '@tanstack/react-router';
 import { EventIcon } from '@/components/events/event-icon';
 import FullPageLoadingState from '@/components/full-page-loading-state';
 import { PageContainer } from '@/components/page-container';
@@ -6,18 +9,20 @@ import { ProfileAvatar } from '@/components/profiles/profile-avatar';
 import { SerieIcon } from '@/components/report-chart/common/serie-icon';
 import { ReplayShell } from '@/components/sessions/replay';
 import { KeyValueGrid } from '@/components/ui/key-value-grid';
-import { Widget, WidgetBody, WidgetHead, WidgetTitle } from '@/components/widget';
+import {
+  Widget,
+  WidgetBody,
+  WidgetHead,
+  WidgetTitle,
+} from '@/components/widget';
+import { useNumber } from '@/hooks/use-numer-formatter';
 import { useTRPC } from '@/integrations/trpc/react';
 import { formatDateTime } from '@/utils/date';
 import { getProfileName } from '@/utils/getters';
-import { useNumber } from '@/hooks/use-numer-formatter';
 import { createProjectTitle } from '@/utils/title';
-import { useSuspenseQuery } from '@tanstack/react-query';
-import { Link, createFileRoute } from '@tanstack/react-router';
-import type { IServiceEvent, IServiceSession } from '@openpanel/db';

 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId/sessions_/$sessionId',
+  '/_app/$organizationId/$projectId/sessions_/$sessionId'
 )({
  component: Component,
  loader: async ({ context, params }) => {
@@ -26,7 +31,7 @@ export const Route = createFileRoute(
        context.trpc.session.byId.queryOptions({
          sessionId: params.sessionId,
          projectId: params.projectId,
-        }),
+        })
      ),
      context.queryClient.prefetchQuery(
        context.trpc.event.events.queryOptions({
@@ -34,7 +39,7 @@ export const Route = createFileRoute(
          sessionId: params.sessionId,
          filters: [],
          columnVisibility: {},
-        }),
+        })
      ),
    ]);
  },
@@ -45,7 +50,19 @@ export const Route = createFileRoute(
 });

 function sessionToFakeEvent(session: IServiceSession): IServiceEvent {
-  return session as unknown as IServiceEvent;
+  return {
+    ...session,
+    name: 'screen_view',
+    sessionId: session.id,
+    properties: {},
+    path: session.exitPath,
+    origin: session.exitOrigin,
+    importedAt: undefined,
+    meta: undefined,
+    sdkName: undefined,
+    sdkVersion: undefined,
+    profile: undefined,
+  };
 }

 function VisitedRoutes({ paths }: { paths: string[] }) {
@@ -56,7 +73,9 @@ function VisitedRoutes({ paths }: { paths: string[] }) {
  const sorted = Object.entries(counted).sort((a, b) => b[1] - a[1]);
  const max = sorted[0]?.[1] ?? 1;

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

  return (
    <Widget className="w-full">
@@ -65,14 +84,14 @@ function VisitedRoutes({ paths }: { paths: string[] }) {
      </WidgetHead>
      <div className="flex flex-col gap-1 p-1">
        {sorted.map(([path, count]) => (
-          <div key={path} className="relative px-3 py-2 group">
+          <div className="group relative px-3 py-2" key={path}>
            <div
-              className="absolute bottom-0 left-0 top-0 rounded bg-def-200 group-hover:bg-def-300"
+              className="absolute top-0 bottom-0 left-0 rounded bg-def-200 group-hover:bg-def-300"
              style={{ width: `${(count / max) * 100}%` }}
            />
-            <div className="relative flex justify-between gap-2 min-w-0">
+            <div className="relative flex min-w-0 justify-between gap-2">
              <span className="truncate text-sm">{path}</span>
-              <span className="shrink-0 text-sm font-medium">{count}</span>
+              <span className="shrink-0 font-medium text-sm">{count}</span>
            </div>
          </div>
        ))}
@@ -89,7 +108,9 @@ function EventDistribution({ events }: { events: IServiceEvent[] }) {
  const sorted = Object.entries(counted).sort((a, b) => b[1] - a[1]);
  const max = sorted[0]?.[1] ?? 1;

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

  return (
    <Widget className="w-full">
@@ -98,14 +119,14 @@ function EventDistribution({ events }: { events: IServiceEvent[] }) {
      </WidgetHead>
      <div className="flex flex-col gap-1 p-1">
        {sorted.map(([name, count]) => (
-          <div key={name} className="relative px-3 py-2 group">
+          <div className="group relative px-3 py-2" key={name}>
            <div
-            className="absolute bottom-0 left-0 top-0 rounded bg-def-200 group-hover:bg-def-300"
+              className="absolute top-0 bottom-0 left-0 rounded bg-def-200 group-hover:bg-def-300"
              style={{ width: `${(count / max) * 100}%` }}
            />
            <div className="relative flex justify-between gap-2">
              <span className="text-sm">{name.replace(/_/g, ' ')}</span>
-              <span className="shrink-0 text-sm font-medium">{count}</span>
+              <span className="shrink-0 font-medium text-sm">{count}</span>
            </div>
          </div>
        ))}
@@ -117,10 +138,10 @@ function EventDistribution({ events }: { events: IServiceEvent[] }) {
 function Component() {
  const { projectId, sessionId, organizationId } = Route.useParams();
  const trpc = useTRPC();
-  const number = useNumber()
+  const number = useNumber();

  const { data: session } = useSuspenseQuery(
-    trpc.session.byId.queryOptions({ sessionId, projectId }),
+    trpc.session.byId.queryOptions({ sessionId, projectId })
  );

  const { data: eventsData } = useSuspenseQuery(
@@ -129,7 +150,7 @@ function Component() {
      sessionId,
      filters: [],
      columnVisibility: {},
-    }),
+    })
  );

  const events = eventsData?.data ?? [];
@@ -141,83 +162,54 @@ function Component() {
    trpc.profile.byId.queryOptions({
      profileId: session.profileId,
      projectId,
-    }),
+    })
  );

  const fakeEvent = sessionToFakeEvent(session);

  return (
    <PageContainer className="col gap-8">
-      <PageHeader
-        title={`Session: ${session.id}`}
-      >
-        <div className="row gap-4 mb-6">
-                  {session.country && (
-                    <div className="row gap-2 items-center">
-                      <SerieIcon name={session.country} />
-                      <span>
-                        {session.country}
-                        {session.city && ` / ${session.city}`}
-
-                              </span>
-                    </div>
-                            )}
-                  {session.device && (
-                    <div className="row gap-2 items-center">
-                      <SerieIcon name={session.device} />
-                      <span className="capitalize">{session.device}</span>
-                          </div>
-
-
-
-                  )}
-                  {session.os && (
-                    <div className="row gap-2 items-center">
-                      <SerieIcon name={session.os} />
-                      <span>{session.os}</span>
-
-
-
-
-
-
-                </div>
-                  )}
-                  {session.model && (
-                    <div className="row gap-2 items-center">
-                      <SerieIcon name={session.model} />
-                      <span>{session.model}</span>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                          </div>
-                  )}
-          {session.browser && (
-            <div className="row gap-2 items-center">
-              <SerieIcon name={session.browser} />
-              <span>{session.browser}</span>
-
-
-
+      <PageHeader title={`Session: ${session.id}`}>
+        <div className="row mb-6 gap-4">
+          {session.country && (
+            <div className="row items-center gap-2">
+              <SerieIcon name={session.country} />
+              <span>
+                {session.country}
+                {session.city && ` / ${session.city}`}
+              </span>
            </div>
          )}
+          {session.device && (
+            <div className="row items-center gap-2">
+              <SerieIcon name={session.device} />
+              <span className="capitalize">{session.device}</span>
            </div>
+          )}
+          {session.os && (
+            <div className="row items-center gap-2">
+              <SerieIcon name={session.os} />
+              <span>{session.os}</span>
+            </div>
+          )}
+          {session.model && (
+            <div className="row items-center gap-2">
+              <SerieIcon name={session.model} />
+              <span>{session.model}</span>
+            </div>
+          )}
+          {session.browser && (
+            <div className="row items-center gap-2">
+              <SerieIcon name={session.browser} />
+              <span>{session.browser}</span>
+            </div>
+          )}
+        </div>
      </PageHeader>

-      {session.hasReplay && <ReplayShell sessionId={sessionId} projectId={projectId} />}
+      {session.hasReplay && (
+        <ReplayShell projectId={projectId} sessionId={sessionId} />
+      )}

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-[340px_minmax(0,1fr)]">
        {/* Left column */}
@@ -232,7 +224,10 @@ function Component() {
              columns={1}
              copyable
              data={[
-                { name: 'duration', value: number.formatWithUnit(session.duration/1000, 'min') },
+                {
+                  name: 'duration',
+                  value: number.formatWithUnit(session.duration / 1000, 'min'),
+                },
                { name: 'createdAt', value: session.createdAt },
                { name: 'endedAt', value: session.endedAt },
                { name: 'screenViews', value: session.screenViewCount },
@@ -305,13 +300,13 @@ function Component() {
              </WidgetHead>
              <WidgetBody className="p-0">
                <Link
-                  to="/$organizationId/$projectId/profiles/$profileId"
+                  className="row items-center gap-3 p-4 transition-colors hover:bg-accent"
                  params={{
                    organizationId,
                    projectId,
                    profileId: session.profileId,
                  }}
-                  className="row items-center gap-3 p-4 transition-colors hover:bg-accent"
+                  to="/$organizationId/$projectId/profiles/$profileId"
                >
                  <ProfileAvatar {...profile} size="lg" />
                  <div className="col min-w-0 gap-0.5">
@@ -319,7 +314,7 @@ function Component() {
                      {getProfileName(profile, false) ?? session.profileId}
                    </span>
                    {profile.email && (
-                      <span className="truncate text-sm text-muted-foreground">
+                      <span className="truncate text-muted-foreground text-sm">
                        {profile.email}
                      </span>
                    )}
@@ -350,24 +345,24 @@ function Component() {
            <div className="divide-y">
              {events.map((event) => (
                <div
-                  key={event.id}
                  className="row items-center gap-3 px-4 py-2"
+                  key={event.id}
                >
-                  <EventIcon name={event.name} meta={event.meta} size="sm" />
+                  <EventIcon meta={event.meta} name={event.name} size="sm" />
                  <div className="col min-w-0 flex-1">
-                    <span className="truncate text-sm font-medium">
+                    <span className="truncate font-medium text-sm">
                      {event.name === 'screen_view' && event.path
                        ? event.path
                        : event.name.replace(/_/g, ' ')}
                    </span>
                  </div>
-                  <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+                  <span className="shrink-0 text-muted-foreground text-xs tabular-nums">
                    {formatDateTime(event.createdAt)}
                  </span>
                </div>
              ))}
              {events.length === 0 && (
-                <div className="py-8 text-center text-sm text-muted-foreground">
+                <div className="py-8 text-center text-muted-foreground text-sm">
                  No events found
                </div>
              )}
--- a/apps/worker/src/jobs/events.incoming-event.ts
+++ b/apps/worker/src/jobs/events.incoming-event.ts
@@ -52,7 +52,7 @@ async function createEventAndNotify(
  logger.info('Creating event', { event: payload });
  const [event] = await Promise.all([
    createEvent(payload),
-    checkNotificationRulesForEvent(payload).catch(() => {}),
+    checkNotificationRulesForEvent(payload).catch(() => null),
  ]);

  return event;
--- a/apps/worker/src/jobs/events.incoming-events.test.ts
+++ b/apps/worker/src/jobs/events.incoming-events.test.ts
@@ -32,6 +32,8 @@ const SESSION_TIMEOUT = 30 * 60 * 1000;
 const projectId = 'test-project';
 const currentDeviceId = 'device-123';
 const previousDeviceId = 'device-456';
+// Valid UUID used when creating a new session in tests
+const newSessionId = 'a1b2c3d4-e5f6-4789-a012-345678901234';
 const geo = {
  country: 'US',
  city: 'New York',
@@ -67,7 +69,7 @@ describe('incomingEvent', () => {
    vi.clearAllMocks();
  });

-  it.only('should create a session start and an event', async () => {
+  it('should create a session start and an event', async () => {
    const spySessionsQueueAdd = vi.spyOn(sessionsQueue, 'add');
    const timestamp = new Date();
    // Mock job data
@@ -90,12 +92,15 @@ describe('incomingEvent', () => {
      projectId,
      currentDeviceId,
      previousDeviceId,
+      deviceId: currentDeviceId,
+      sessionId: newSessionId,
    };
    const event = {
      name: 'test_event',
      deviceId: currentDeviceId,
      profileId: '',
      sessionId: expect.stringMatching(
+        // biome-ignore lint/performance/useTopLevelRegex: test
        /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
      ),
      projectId,
@@ -182,6 +187,8 @@ describe('incomingEvent', () => {
      projectId,
      currentDeviceId,
      previousDeviceId,
+      deviceId: currentDeviceId,
+      sessionId: 'session-123',
    };

    const changeDelay = vi.fn();
@@ -263,6 +270,8 @@ describe('incomingEvent', () => {
      projectId,
      currentDeviceId: '',
      previousDeviceId: '',
+      deviceId: '',
+      sessionId: '',
      uaInfo: uaInfoServer,
    };

@@ -367,6 +376,8 @@ describe('incomingEvent', () => {
      projectId,
      currentDeviceId: '',
      previousDeviceId: '',
+      deviceId: '',
+      sessionId: '',
      uaInfo: uaInfoServer,
    };