test

Author: lindesvard

apps/public/app/api/[...op]/route.ts

@@ -0,0 +1,67 @@
+import { createHash } from 'node:crypto';
+import { getClientIpFromHeaders } from '@openpanel/common/server/get-client-ip';
+// adding .js next/script import fixes an issues
+// with esm and nextjs (when using pages dir)
+import { NextResponse } from 'next/server.js';
+
+type CreateNextRouteHandlerOptions = {
+  apiUrl?: string;
+};
+
+function createNextRouteHandler(options: CreateNextRouteHandlerOptions) {
+  return async function POST(req: Request) {
+    const apiUrl = options.apiUrl ?? 'https://api.openpanel.dev';
+    const headers = new Headers(req.headers);
+    const clientIp = getClientIpFromHeaders(headers);
+    console.log('debug', {
+      clientIp,
+      userAgent: req.headers.get('user-agent'),
+    });
+    try {
+      const res = await fetch(`${apiUrl}/track`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(await req.json()),
+      });
+      return NextResponse.json(await res.text(), { status: res.status });
+    } catch (e) {
+      return NextResponse.json(e);
+    }
+  };
+}
+
+function createScriptHandler() {
+  return async function GET(req: Request) {
+    if (!req.url.endsWith('op1.js')) {
+      return NextResponse.json({ error: 'Not found' }, { status: 404 });
+    }
+
+    const scriptUrl = 'https://openpanel.dev/op1.js';
+    try {
+      const res = await fetch(scriptUrl, {
+        next: { revalidate: 86400 },
+      });
+      const text = await res.text();
+      const etag = `"${createHash('md5').update(text).digest('hex')}"`;
+      return new NextResponse(text, {
+        headers: {
+          'Content-Type': 'text/javascript',
+          'Cache-Control':
+            'public, max-age=86400, stale-while-revalidate=86400',
+          ETag: etag,
+        },
+      });
+    } catch (e) {
+      return NextResponse.json(
+        {
+          error: 'Failed to fetch script',
+          message: e instanceof Error ? e.message : String(e),
+        },
+        { status: 500 },
+      );
+    }
+  };
+}
+
+export const POST = createNextRouteHandler({});
+export const GET = createScriptHandler();

apps/public/app/layout.tsx

@@ -61,12 +61,9 @@ export default async function Layout({ children }: { children: ReactNode }) {
         <RootProvider>
           <TooltipProvider>{children}</TooltipProvider>
         </RootProvider>
-        <Script
-          defer
-          src="http://localhost:3000/script.js"
-          data-website-id="44d65df1-e9cb-4c2c-917d-4bf1c7850948"
-        />
         <OpenPanelComponent
+          apiUrl="/api/op"
+          cdnUrl="/api/op/op1.js"
           clientId="301c6dc1-424c-4bc3-9886-a8beab09b615"
           trackAttributes
           trackScreenViews

apps/public/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@hyperdx/node-opentelemetry": "^0.8.1",
     "@number-flow/react": "0.3.5",
+    "@openpanel/common": "workspace:*",
     "@openpanel/nextjs": "^1.0.5",
     "@openpanel/payments": "workspace:^",
     "@openpanel/sdk-info": "workspace:^",

packages/common/index.ts

@@ -9,3 +9,4 @@ export * from './src/url';
 export * from './src/id';
 export * from './src/get-previous-metric';
 export * from './src/group-by-labels';
+export * from './src/get-client-ip';

packages/common/package.json

@@ -5,7 +5,8 @@
   "main": "index.ts",
   "exports": {
     ".": "./index.ts",
-    "./server": "./server/index.ts"
+    "./server": "./server/index.ts",
+    "./server/get-client-ip": "./server/get-client-ip.ts"
   },
   "scripts": {
     "test": "vitest",

packages/common/server/get-client-ip.ts

@@ -0,0 +1,81 @@
+/**
+ * Get client IP from headers
+ *
+ * Can be configured via IP_HEADER_ORDER env variable
+ * Example: IP_HEADER_ORDER="cf-connecting-ip,x-real-ip,x-forwarded-for"
+ */
+
+const DEFAULT_HEADER_ORDER = [
+  'cf-connecting-ip',
+  'true-client-ip',
+  'x-real-ip',
+  'x-client-ip',
+  'fastly-client-ip',
+  'x-cluster-client-ip',
+  'x-appengine-user-ip',
+  'do-connecting-ip',
+  'x-nf-client-connection-ip',
+  'x-forwarded-for',
+  'x-forwarded',
+  'forwarded',
+];
+
+function getHeaderOrder(): string[] {
+  if (typeof process !== 'undefined' && process.env?.IP_HEADER_ORDER) {
+    return process.env.IP_HEADER_ORDER.split(',').map((h) => h.trim());
+  }
+  return DEFAULT_HEADER_ORDER;
+}
+
+function isValidIp(ip: string): boolean {
+  // Basic IP validation
+  const ipv4 = /^(\d{1,3}\.){3}\d{1,3}$/;
+  const ipv6 = /^([0-9a-fA-F]{0,4}:){2,7}[0-9a-fA-F]{0,4}$/;
+  return ipv4.test(ip) || ipv6.test(ip);
+}
+
+export function getClientIpFromHeaders(
+  headers: Record<string, string | string[] | undefined> | Headers,
+): string | null {
+  const headerOrder = getHeaderOrder();
+
+  for (const headerName of headerOrder) {
+    let value: string | null = null;
+
+    // Get header value
+    if (headers instanceof Headers) {
+      value = headers.get(headerName);
+    } else {
+      const headerValue = headers[headerName];
+      if (Array.isArray(headerValue)) {
+        value = headerValue[0] || null;
+      } else {
+        value = headerValue || null;
+      }
+    }
+
+    if (!value) continue;
+
+    // Handle x-forwarded-for (comma separated)
+    if (headerName === 'x-forwarded-for') {
+      const firstIp = value.split(',')[0]?.trim();
+      if (firstIp && isValidIp(firstIp)) {
+        return firstIp;
+      }
+    }
+    // Handle forwarded header (RFC 7239)
+    else if (headerName === 'forwarded') {
+      const match = value.match(/for=(?:"?\[?([^\]"]+)\]?"?)/i);
+      const ip = match?.[1];
+      if (ip && isValidIp(ip)) {
+        return ip;
+      }
+    }
+    // Regular headers
+    else if (isValidIp(value)) {
+      return value;
+    }
+  }
+
+  return null;
+}