fix sdk api

apps/sdk-api/Dockerfile

@@ -0,0 +1,80 @@
+# Dockerfile that builds the web app only
+
+FROM --platform=linux/amd64 node:20-slim AS base
+
+ARG DATABASE_URL
+ENV DATABASE_URL=$DATABASE_URL
+
+ENV PNPM_HOME="/pnpm"
+
+ENV PATH="$PNPM_HOME:$PATH"
+
+RUN corepack enable
+
+ARG NODE_VERSION=20
+
+RUN apt update \
+    && apt install -y curl \
+    && curl -L https://raw.githubusercontent.com/tj/n/master/bin/n -o n \
+    && bash n $NODE_VERSION \
+    && rm n \
+    && npm install -g n
+
+WORKDIR /app
+
+COPY package.json package.json
+COPY pnpm-lock.yaml pnpm-lock.yaml
+COPY pnpm-workspace.yaml pnpm-workspace.yaml
+COPY apps/sdk-api/package.json apps/sdk-api/package.json
+COPY packages/db/package.json packages/db/package.json
+COPY packages/queue/package.json packages/queue/package.json
+COPY packages/types/package.json packages/types/package.json
+
+# BUILD
+FROM base AS build
+
+WORKDIR /app/apps/sdk-api
+RUN pnpm install --frozen-lockfile --ignore-scripts
+
+WORKDIR  /app
+COPY apps apps
+COPY packages packages
+COPY tooling tooling
+RUN pnpm db:codegen
+
+WORKDIR /app/apps/sdk-api
+RUN pnpm run build
+
+# PROD
+FROM base AS prod
+
+WORKDIR /app/apps/sdk-api
+RUN pnpm install --frozen-lockfile --prod --ignore-scripts
+
+# FINAL
+FROM base AS runner
+
+COPY --from=build /app/package.json /app/package.json
+COPY --from=prod /app/node_modules /app/node_modules
+
+# Apps
+COPY --from=build /app/apps/sdk-api /app/apps/sdk-api
+
+# Apps node_modules
+COPY --from=prod /app/apps/sdk-api/node_modules /app/apps/sdk-api/node_modules
+
+# Packages
+COPY --from=build /app/packages/db /app/packages/db
+COPY --from=build /app/packages/queue /app/packages/queue
+
+# Packages node_modules
+COPY --from=prod /app/packages/db/node_modules /app/packages/db/node_modules
+COPY --from=prod /app/packages/queue/node_modules /app/packages/queue/node_modules
+
+RUN pnpm db:codegen
+
+WORKDIR /app/apps/sdk-api
+
+EXPOSE 3000
+
+CMD ["pnpm", "start"]

apps/sdk-api/src/controllers/event.controller.ts

@@ -1,6 +1,7 @@
 import { parseIp } from '@/utils/parseIp';
 import { parseUserAgent } from '@/utils/parseUserAgent';
 import type { FastifyReply, FastifyRequest } from 'fastify';
+import { omit } from 'ramda';
 import { getClientIp } from 'request-ip';
 
 import { generateProfileId, getTime, toISOString } from '@mixan/common';
@@ -8,19 +9,44 @@ import type { IServiceCreateEventPayload } from '@mixan/db';
 import { getSalts } from '@mixan/db';
 import type { JobsOptions } from '@mixan/queue';
 import { eventsQueue, findJobByPrefix } from '@mixan/queue';
-
-export interface PostEventPayload {
-  profileId?: string;
-  name: string;
-  timestamp: string;
-  properties: Record<string, unknown>;
-  referrer: string | undefined;
-  path: string;
-}
+import type { PostEventPayload } from '@mixan/types';
 
 const SESSION_TIMEOUT = 1000 * 30 * 1;
 const SESSION_END_TIMEOUT = SESSION_TIMEOUT + 1000;
 
+function parseSearchParams(params: URLSearchParams): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const [key, value] of params.entries()) {
+    result[key] = value;
+  }
+  return result;
+}
+
+function parsePath(path?: string): {
+  query?: Record<string, unknown>;
+  path: string;
+  hash?: string;
+} {
+  if (!path) {
+    return {
+      path: '',
+    };
+  }
+
+  try {
+    const url = new URL(path);
+    return {
+      query: parseSearchParams(url.searchParams),
+      path: url.pathname,
+      hash: url.hash,
+    };
+  } catch (error) {
+    return {
+      path,
+    };
+  }
+}
+
 export async function postEvent(
   request: FastifyRequest<{
     Body: PostEventPayload;
@@ -30,7 +56,10 @@ export async function postEvent(
   let profileId: string | null = null;
   const projectId = request.projectId;
   const body = request.body;
-  const path = body.path;
+  const { path, hash, query } = parsePath(
+    body.properties?.path as string | undefined
+  );
+  const referrer = body.properties?.referrer as string | undefined;
   const ip = getClientIp(request)!;
   const origin = request.headers.origin!;
   const ua = request.headers['user-agent']!;
@@ -101,7 +130,10 @@ export async function postEvent(
     name: body.name,
     profileId,
     projectId,
-    properties: body.properties,
+    properties: Object.assign({}, omit(['path', 'referrer'], body.properties), {
+      hash,
+      query,
+    }),
     createdAt: body.timestamp,
     country: geo.country,
     city: geo.city,
@@ -115,13 +147,11 @@ export async function postEvent(
     brand: uaInfo.brand,
     model: uaInfo.model,
     duration: 0,
-    path,
-    referrer: body.referrer, // TODO
-    referrerName: body.referrer, // TODO
+    path: path,
+    referrer,
+    referrerName: referrer, // TODO
   };
 
-  console.log(payload);
-
   const job = findJobByPrefix(eventsJobs, `event:${projectId}:${profileId}:`);
 
   if (job?.isDelayed && job.data.type === 'createEvent') {

apps/sdk-api/src/index.ts

@@ -11,7 +11,7 @@ declare module 'fastify' {
   }
 }
 
-const port = parseInt(process.env.API_PORT || '3030', 10);
+const port = parseInt(process.env.API_PORT || '3000', 10);
 
 const startServer = async () => {
   try {
@@ -43,7 +43,7 @@ const startServer = async () => {
       fastify.log.error(error);
     });
     fastify.get('/', (request, reply) => {
-      reply.send({ name: 'fastify-typescript' });
+      reply.send({ name: 'openpanel sdk api' });
     });
     // fastify.get('/health-check', async (request, reply) => {
     //   try {

apps/test/src/analytics.ts

@@ -1,14 +1,14 @@
-import { MixanWeb } from '@mixan-test/sdk-web';
+// import { MixanWeb } from '@mixan-test/sdk-web';
 
-export const mixan = new MixanWeb({
-  verbose: true,
-  url: 'http://localhost:3000/api/sdk',
-  clientId: '568b4ed1-5d00-4f27-88a7-b8959e6674bd',
-  clientSecret: '1e362905-d352-44c4-9263-e037a2ad52fb',
-  trackIp: true,
-});
+// export const mixan = new MixanWeb({
+//   verbose: true,
+//   url: 'http://localhost:3000/api/sdk',
+//   clientId: '568b4ed1-5d00-4f27-88a7-b8959e6674bd',
+//   clientSecret: '1e362905-d352-44c4-9263-e037a2ad52fb',
+//   trackIp: true,
+// });
 
-mixan.init({
-  appVersion: '1.0.0',
-});
-mixan.trackOutgoingLinks();
+// mixan.init({
+//   appVersion: '1.0.0',
+// });
+// mixan.trackOutgoingLinks();

apps/test/src/pages/_app.tsx

@@ -1,15 +1,15 @@
 import { useEffect } from 'react';
-import { mixan } from '@/analytics';
+// import { mixan } from '@/analytics';
 import type { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   const router = useRouter();
-  useEffect(() => {
-    mixan.screenView();
-    return router.events.on('routeChangeComplete', () => {
-      mixan.screenView();
-    });
-  }, []);
+  // useEffect(() => {
+  //   mixan.screenView();
+  //   return router.events.on('routeChangeComplete', () => {
+  //     mixan.screenView();
+  //   });
+  // }, []);
   return <Component {...pageProps} />;
 }

apps/test/src/pages/_document.tsx

@@ -0,0 +1,21 @@
+import { Head, Html, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <script
+          async
+          src="/cdn.global.js"
+          client-id="568b4ed1-5d00-4f27-88a7-b8959e6674bd"
+          client-secret="1e362905-d352-44c4-9263-e037a2ad52fb"
+          track-screen-views="true"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

captain-definition-api

@@ -0,0 +1,4 @@
+{
+  "schemaVersion": 2,
+  "dockerfilePath": "./apps/sdk-api/Dockerfile"
+}

packages/db/clickhouse_tables.sql

@@ -1,4 +1,4 @@
-CREATE TABLE test.events (
+CREATE TABLE openpanel.events (
   `name` String,
   `profile_id` String,
   `project_id` String,

packages/db/src/services/event.service.ts

@@ -56,7 +56,10 @@ export interface IServiceCreateEventPayload {
   name: string;
   profileId: string;
   projectId: string;
-  properties: Record<string, unknown>;
+  properties: Record<string, unknown> & {
+    hash?: string;
+    query?: Record<string, unknown>;
+  };
   createdAt: string;
   country?: string | undefined;
   city?: string | undefined;

packages/sdk-web/cdn.ts

@@ -0,0 +1,14 @@
+// @ts-nocheck
+
+import { MixanWeb as Openpanel } from './index';
+
+const el = document.currentScript;
+if (el) {
+  window.openpanel = new Openpanel({
+    url: el?.getAttribute('url'),
+    clientId: el?.getAttribute('client-id'),
+    clientSecret: el?.getAttribute('client-secret'),
+    trackOutgoingLinks: !!el?.getAttribute('track-outgoing-links'),
+    trackScreenViews: !!el?.getAttribute('track-screen-views'),
+  });
+}

packages/sdk-web/index.ts

@@ -1,74 +1,35 @@
-import type { NewMixanOptions } from '@mixan/sdk';
+import type { MixanOptions } from '@mixan/sdk';
 import { Mixan } from '@mixan/sdk';
-import type { PartialBy } from '@mixan/types';
 
-import { parseQuery } from './src/parseQuery';
-import { getTimezone } from './src/utils';
+type MixanWebOptions = MixanOptions & {
+  trackOutgoingLinks?: boolean;
+  trackScreenViews?: boolean;
+  hash?: boolean;
+};
 
-export class MixanWeb extends Mixan {
-  constructor(
-    options: PartialBy<NewMixanOptions, 'setItem' | 'removeItem' | 'getItem'>
-  ) {
-    const hasStorage = typeof localStorage === 'undefined';
-    super({
-      batchInterval: options.batchInterval ?? 2000,
-      setItem: hasStorage ? () => {} : localStorage.setItem.bind(localStorage),
-      removeItem: hasStorage
-        ? () => {}
-        : localStorage.removeItem.bind(localStorage),
-      getItem: hasStorage
-        ? () => null
-        : localStorage.getItem.bind(localStorage),
-      ...options,
-    });
+export class MixanWeb extends Mixan<MixanWebOptions> {
+  constructor(options: MixanWebOptions) {
+    super(options);
+
+    if (this.options.trackOutgoingLinks) {
+      this.trackOutgoingLinks();
+    }
+
+    if (this.options.trackScreenViews) {
+      this.trackScreenViews();
+    }
   }
 
   private isServer() {
     return typeof document === 'undefined';
   }
 
-  private parseUrl(url?: string) {
-    if (!url || url === '') {
-      return {};
+  private getTimezone() {
+    try {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    } catch (e) {
+      return undefined;
     }
-
-    const ref = new URL(url);
-    return {
-      host: ref.host,
-      path: ref.pathname,
-      query: parseQuery(ref.search),
-      hash: ref.hash,
-    };
-  }
-
-  private properties() {
-    return {
-      ua: navigator.userAgent,
-      referrer: document.referrer || undefined,
-      language: navigator.language,
-      timezone: getTimezone(),
-      screen: {
-        width: window.screen.width,
-        height: window.screen.height,
-      },
-      title: document.title,
-      ...this.parseUrl(window.location.href),
-    };
-  }
-
-  public init(properties?: Record<string, unknown>) {
-    if (this.isServer()) {
-      return;
-    }
-
-    super.init({
-      ...this.properties(),
-      ...(properties ?? {}),
-    });
-
-    window.addEventListener('beforeunload', () => {
-      this.flush();
-    });
   }
 
   public trackOutgoingLinks() {
@@ -85,21 +46,53 @@ export class MixanWeb extends Mixan {
             href,
             text: target.innerText,
           });
-          super.flush();
         }
       }
     });
   }
 
+  public trackScreenViews() {
+    if (this.isServer()) {
+      return;
+    }
+
+    const oldPushState = history.pushState;
+    history.pushState = function pushState(...args) {
+      const ret = oldPushState.apply(this, args);
+      window.dispatchEvent(new Event('pushstate'));
+      window.dispatchEvent(new Event('locationchange'));
+      return ret;
+    };
+
+    const oldReplaceState = history.replaceState;
+    history.replaceState = function replaceState(...args) {
+      const ret = oldReplaceState.apply(this, args);
+      window.dispatchEvent(new Event('replacestate'));
+      window.dispatchEvent(new Event('locationchange'));
+      return ret;
+    };
+
+    window.addEventListener('popstate', () =>
+      window.dispatchEvent(new Event('locationchange'))
+    );
+
+    if (this.options.hash) {
+      window.addEventListener('hashchange', () => this.screenView());
+    } else {
+      window.addEventListener('locationchange', () => this.screenView());
+    }
+  }
+
   public screenView(properties?: Record<string, unknown>): void {
     if (this.isServer()) {
       return;
     }
 
     super.event('screen_view', {
-      ...properties,
-      ...this.parseUrl(window.location.href),
+      ...(properties ?? {}),
+      path: window.location.href,
       title: document.title,
+      referrer: document.referrer,
     });
   }
 }

packages/sdk-web/src/parseQuery.ts

@@ -1,8 +0,0 @@
-export function parseQuery(query: string): Record<string, string> {
-  const params = new URLSearchParams(query);
-  const result: Record<string, string> = {};
-  for (const [key, value] of params.entries()) {
-    result[key] = value;
-  }
-  return result;
-}

packages/sdk-web/src/utils.ts

@@ -1,7 +0,0 @@
-export function getTimezone() {
-  try {
-    return Intl.DateTimeFormat().resolvedOptions().timeZone;
-  } catch (e) {
-    return 'unknown';
-  }
-}

packages/sdk/index.ts

@@ -1,83 +1,40 @@
-import type {
-  BatchPayload,
-  BatchUpdateProfilePayload,
-  BatchUpdateSessionPayload,
-  MixanErrorResponse,
-} from '@mixan/types';
+import type { PostEventPayload } from '@mixan/types';
 
-type MixanLogger = (...args: unknown[]) => void;
-
-// -- 1. Besök
-// -- 2. Finns profile id?
-// --   NEJ
-// --   a. skicka events som vanligt (retunera genererat ID)
-// --   b. ge möjlighet att spara
-// --   JA
-// --   a. skicka event med profile_id
-// -- Payload
-// -- - user_agent?
-// -- - ip?
-// -- - profile_id?
-// -- - referrer
-
-export interface NewMixanOptions {
+export interface MixanOptions {
   url: string;
   clientId: string;
   clientSecret?: string;
   verbose?: boolean;
-  setItem?: (key: string, profileId: string) => void;
-  getItem?: (key: string) => string | null;
-  removeItem?: (key: string) => void;
+  setProfileId?: (profileId: string) => void;
+  getProfileId?: () => string | null | undefined;
+  removeProfileId?: () => void;
 }
 
-export type MixanOptions = Required<NewMixanOptions>;
-
 export interface MixanState {
-  profileId: null | string;
+  profileId?: string;
   properties: Record<string, unknown>;
 }
 
-function createLogger(verbose: boolean): MixanLogger {
-  return verbose ? (...args) => console.log('[Mixan]', ...args) : () => {};
-}
-
-class Fetcher {
-  private url: string;
-  private clientId: string;
-  private clientSecret: string;
-
-  constructor(
-    options: MixanOptions,
-    private logger: MixanLogger
-  ) {
-    this.url = options.url;
-    this.clientId = options.clientId;
-    this.clientSecret = options.clientSecret;
-  }
-
-  post<PostData, PostResponse>(
+function createApi(_url: string, clientId: string, clientSecret?: string) {
+  return function post<ReqBody, ResBody>(
     path: string,
-    data?: PostData,
+    data: ReqBody,
     options?: RequestInit
-  ): Promise<PostResponse | null> {
-    const url = `${this.url}${path}`;
+  ): Promise<ResBody | null> {
+    const url = `${_url}${path}`;
     let timer: ReturnType<typeof setTimeout>;
-
+    const headers: Record<string, string> = {
+      'mixan-client-id': clientId,
+      'Content-Type': 'application/json',
+    };
+    if (clientSecret) {
+      headers['mixan-client-secret'] = clientSecret;
+    }
     return new Promise((resolve) => {
       const wrappedFetch = (attempt: number) => {
         clearTimeout(timer);
-
-        this.logger(
-          `Request attempt ${attempt + 1}: ${url}`,
-          JSON.stringify(data, null, 2)
-        );
-
         fetch(url, {
-          headers: {
-            ['mixan-client-id']: this.clientId,
-            ['mixan-client-secret']: this.clientSecret,
-            'Content-Type': 'application/json',
-          },
+          headers,
           method: 'POST',
           body: JSON.stringify(data ?? {}),
           keepalive: true,
@@ -88,15 +45,13 @@ class Fetcher {
               return retry(attempt, resolve);
             }
 
-            const response = (await res.json()) as
-              | MixanErrorResponse
-              | PostResponse;
+            const response = await res.json();
 
             if (!response) {
               return resolve(null);
             }
 
-            resolve(response as PostResponse);
+            resolve(response as ResBody);
           })
           .catch(() => {
             return retry(attempt, resolve);
@@ -105,9 +60,9 @@ class Fetcher {
 
       function retry(
         attempt: number,
-        resolve: (value: PostResponse | null) => void
+        resolve: (value: ResBody | null) => void
       ) {
-        if (attempt > 3) {
+        if (attempt > 1) {
           return resolve(null);
         }
 
@@ -121,88 +76,85 @@ class Fetcher {
 
       wrappedFetch(0);
     });
-  }
+  };
 }
 
-export class Mixan {
-  private options: MixanOptions;
-  private fetch: Fetcher;
-  private logger: (...args: any[]) => void;
+export class Mixan<Options extends MixanOptions = MixanOptions> {
+  public options: Options;
+  private api: ReturnType<typeof createApi>;
   private state: MixanState = {
-    profileId: null,
     properties: {},
   };
 
-  constructor(options: NewMixanOptions) {
-    this.logger = createLogger(options.verbose ?? false);
-    this.options = {
-      verbose: false,
-      clientSecret: '',
-      ...options,
-    };
-    this.fetch = new Fetcher(this.options, this.logger);
+  constructor(options: Options) {
+    this.options = options;
+    this.api = createApi(options.url, options.clientId, options.clientSecret);
   }
 
   // Public
 
   public init(properties?: Record<string, unknown>) {
-    this.logger('Init');
     this.state.properties = properties ?? {};
   }
 
-  public setUser(payload: Omit<BatchUpdateProfilePayload, 'profileId'>) {
-    this.batcher.add({
-      type: 'update_profile',
-      payload: {
-        ...payload,
-        properties: payload.properties ?? {},
-        profileId: this.state.profileId,
-      },
-    });
+  // public setUser(payload: Omit<BatchUpdateProfilePayload, 'profileId'>) {
+  //   this.batcher.add({
+  //     type: 'update_profile',
+  //     payload: {
+  //       ...payload,
+  //       properties: payload.properties ?? {},
+  //       profileId: this.state.profileId,
+  //     },
+  //   });
+  // }
+
+  // public increment(name: string, value: number) {
+  //   this.batcher.add({
+  //     type: 'increment',
+  //     payload: {
+  //       name,
+  //       value,
+  //       profileId: this.state.profileId,
+  //     },
+  //   });
+  // }
+
+  // public decrement(name: string, value: number) {
+  //   this.batcher.add({
+  //     type: 'decrement',
+  //     payload: {
+  //       name,
+  //       value,
+  //       profileId: this.state.profileId,
+  //     },
+  //   });
+  // }
+
+  private getProfileId() {
+    if (this.state.profileId) {
+      return this.state.profileId;
+    } else if (this.options.getProfileId) {
+      this.state.profileId = this.options.getProfileId() || undefined;
+    }
   }
 
-  public increment(name: string, value: number) {
-    this.batcher.add({
-      type: 'increment',
-      payload: {
-        name,
-        value,
-        profileId: this.state.profileId,
+  public async event(name: string, properties?: Record<string, unknown>) {
+    const profileId = await this.api<PostEventPayload, string>('/event', {
+      name,
+      properties: {
+        ...this.state.properties,
+        ...(properties ?? {}),
       },
+      timestamp: this.timestamp(),
+      profileId: this.getProfileId(),
     });
-  }
 
-  public decrement(name: string, value: number) {
-    this.batcher.add({
-      type: 'decrement',
-      payload: {
-        name,
-        value,
-        profileId: this.state.profileId,
-      },
-    });
-  }
-
-  public event(name: string, properties?: Record<string, unknown>) {
-    this.fetch
-      .post('/event', {
-        name,
-        properties: {
-          ...this.state.properties,
-          ...(properties ?? {}),
-        },
-        time: this.timestamp(),
-        profileId: this.state.profileId,
-      })
-      .then((response) => {
-        if ('profileId' in response) {
-          this.options.setItem('@mixan:profileId', response.profileId);
-        }
-      });
+    if (this.options.setProfileId && profileId) {
+      this.options.setProfileId(profileId);
+    }
   }
 
   public setGlobalProperties(properties: Record<string, unknown>) {
-    this.logger('Set global properties', properties);
     this.state.properties = {
       ...this.state.properties,
       ...properties,
@@ -210,9 +162,10 @@ export class Mixan {
   }
 
   public clear() {
-    this.logger('Clear / Logout');
-    this.options.removeItem('@mixan:profileId');
-    this.state.profileId = null;
+    this.state.profileId = undefined;
+    if (this.options.removeProfileId) {
+      this.options.removeProfileId();
+    }
   }
 
   public setUserProperty(name: string, value: unknown, update = true) {

packages/types/index.ts

@@ -131,3 +131,12 @@ export interface MixanResponse<T> {
   result: T;
   status: 'ok';
 }
+
+// NEW
+
+export interface PostEventPayload {
+  name: string;
+  timestamp: string;
+  profileId?: string;
+  properties?: Record<string, unknown>;
+}

tooling/typescript/tsup.config.json

@@ -1,6 +1,6 @@
 {
-  "entry": ["index.ts"],
-  "format": ["cjs", "esm"],
+  "entry": ["index.ts", "cdn.ts"],
+  "format": ["cjs", "esm", "iife"],
   "dts": true,
   "splitting": false,
   "sourcemap": true,