batching events

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-listener.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { useState } from 'react';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { useAppParams } from '@/hooks/useAppParams';
+import { useDebounceVal } from '@/hooks/useDebounceVal';
 import useWS from '@/hooks/useWS';
 import { cn } from '@/utils/cn';
 import dynamic from 'next/dynamic';
@@ -22,11 +22,13 @@ const AnimatedNumbers = dynamic(() => import('react-animated-numbers'), {
 export default function EventListener() {
   const router = useRouter();
   const { projectId } = useAppParams();
-  const [counter, setCounter] = useState(0);
+  const counter = useDebounceVal(0, 1000, {
+    maxWait: 5000,
+  });
 
   useWS<IServiceEventMinimal>(`/live/events/${projectId}`, (event) => {
     if (event?.name) {
-      setCounter((prev) => prev + 1);
+      counter.set((prev) => prev + 1);
     }
   });
 
@@ -35,7 +37,7 @@ export default function EventListener() {
       <TooltipTrigger asChild>
         <button
           onClick={() => {
-            setCounter(0);
+            counter.set(0);
             router.refresh();
           }}
           className="flex h-8 items-center gap-2 rounded border border-border bg-card px-3 text-sm font-medium leading-none"
@@ -52,7 +54,7 @@ export default function EventListener() {
               )}
             ></div>
           </div>
-          {counter === 0 ? (
+          {counter.debounced === 0 ? (
             'Listening'
           ) : (
             <>
@@ -61,11 +63,10 @@ export default function EventListener() {
                 transitions={(index) => ({
                   type: 'spring',
                   duration: index + 0.3,
-
                   damping: 10,
                   stiffness: 200,
                 })}
-                animateToNumber={counter}
+                animateToNumber={counter.debounced}
                 locale="en"
               />
               new events
@@ -74,7 +75,9 @@ export default function EventListener() {
         </button>
       </TooltipTrigger>
       <TooltipContent side="bottom">
-        {counter === 0 ? 'Listening to new events' : 'Click to refresh'}
+        {counter.debounced === 0
+          ? 'Listening to new events'
+          : 'Click to refresh'}
       </TooltipContent>
     </Tooltip>
   );

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/realtime-live-events/index.tsx

@@ -5,7 +5,7 @@ import { getEvents } from '@openpanel/db';
 import LiveEvents from './live-events';
 
 type Props = {
-  projectId?: string;
+  projectId: string;
   limit?: number;
 };
 const RealtimeLiveEventsServer = async ({ projectId, limit = 30 }: Props) => {

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/realtime-live-events/live-events.tsx

@@ -12,14 +12,14 @@ import type {
 
 type Props = {
   events: (IServiceEventMinimal | IServiceCreateEventPayload)[];
-  projectId?: string;
+  projectId: string;
   limit: number;
 };
 
 const RealtimeLiveEvents = ({ events, projectId, limit }: Props) => {
   const [state, setState] = useState(events ?? []);
   useWS<IServiceEventMinimal | IServiceCreateEventPayload>(
-    projectId ? `/live/events/${projectId}` : '/live/events',
+    `/live/events/${projectId}`,
     (event) => {
       setState((p) => [event, ...p].slice(0, limit));
     }

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/realtime-reloader.tsx

@@ -12,12 +12,21 @@ const RealtimeReloader = ({ projectId }: Props) => {
   const client = useQueryClient();
   const router = useRouter();
 
-  useWS<number>(`/live/visitors/${projectId}`, (value) => {
-    router.refresh();
-    client.refetchQueries({
-      type: 'active',
-    });
-  });
+  useWS<number>(
+    `/live/events/${projectId}`,
+    () => {
+      router.refresh();
+      client.refetchQueries({
+        type: 'active',
+      });
+    },
+    {
+      debounce: {
+        maxWait: 15000,
+        delay: 15000,
+      },
+    }
+  );
 
   return null;
 };

apps/dashboard/src/app/api/clerk/webhook/route.ts

@@ -3,6 +3,8 @@ import { pathOr } from 'ramda';
 
 import { AccessLevel, db } from '@openpanel/db';
 
+export const dynamic = 'force-dynamic';
+
 export async function POST(request: Request) {
   const payload: WebhookEvent = await request.json();
 

apps/dashboard/src/app/providers.tsx

@@ -63,7 +63,8 @@ function AllProviders({ children }: { children: React.ReactNode }) {
       disableTransitionOnChange
     >
       <OpenpanelProvider
-        clientId="301c6dc1-424c-4bc3-9886-a8beab09b615"
+        url="https://op.coderax.se/api"
+        clientId="d32780cb-1c60-4a1b-bb5a-ffc11973255e"
         profileId={userId || undefined}
         trackScreenViews
         trackOutgoingLinks