531 telemetry client in javascript

examples/nextjs/app/components/TelemetryClient.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { sendEvent, TelemetryEventType } from '@corbado/shared-util';
+import { useEffect, useRef } from 'react';
+
+export function TelemetryClient() {
+  const hasSentTelemetry = useRef(false);
+
+  useEffect(() => {
+    if (hasSentTelemetry.current) return;
+
+    void sendEvent({
+      type: TelemetryEventType.EXAMPLE_APPLICATION_OPENED,
+      payload: {
+        exampleName: 'corbado/javascript/examples/nextjs',
+      },
+      sdkVersion: '3.1.0',
+      sdkName: 'React SDK',
+      identifier: process.env.NEXT_PUBLIC_CORBADO_PROJECT_ID!,
+    });
+
+    hasSentTelemetry.current = true;
+  }, []);
+
+  return null;
+}

examples/nextjs/app/page.tsx

@@ -4,10 +4,12 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import RightIntroSection from './ui/right-intro-section';
+import { TelemetryClient } from './components/TelemetryClient';
 
 export default function Page() {
   return (
     <main className='flex min-h-screen flex-col p-6'>
+      <TelemetryClient />
       <div className='flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52'>
         <Image
           src='/corbado-logo.svg'