web & sdk: improved sdk (better failover and batching)

2024-01-12 11:31:46 +01:00
parent 8e7558790e
commit 5b5ad23f66
26 changed files with 1266 additions and 377 deletions
--- a/apps/web/src/components/Syntax.tsx
+++ b/apps/web/src/components/Syntax.tsx
@@ -9,5 +9,9 @@ interface SyntaxProps {
 }

 export default function Syntax({ code }: SyntaxProps) {
-  return <SyntaxHighlighter style={docco}>{code}</SyntaxHighlighter>;
+  return (
+    <SyntaxHighlighter wrapLongLines style={docco}>
+      {code}
+    </SyntaxHighlighter>
+  );
 }
--- a/apps/web/src/components/clients/table.tsx
+++ b/apps/web/src/components/clients/table.tsx
@@ -23,17 +23,26 @@ export const columns: ColumnDef<IClientWithProject>[] = [
    accessorKey: 'id',
    header: 'Client ID',
  },
+  {
+    accessorKey: 'cors',
+    header: 'Cors',
+  },
  {
    accessorKey: 'secret',
    header: 'Secret',
-    cell: () => <div className="italic text-muted-foreground">Hidden</div>,
+    cell: (info) =>
+      info.getValue() ? (
+        <div className="italic text-muted-foreground">Hidden</div>
+      ) : (
+        'None'
+      ),
  },
  {
    accessorKey: 'createdAt',
    header: 'Created at',
    cell({ row }) {
      const date = row.original.createdAt;
-      return <div>{formatDate(date)}</div>;
+      return formatDate(date);
    },
  },
  {
--- a/apps/web/src/components/forms/InputWithLabel.tsx
+++ b/apps/web/src/components/forms/InputWithLabel.tsx
@@ -9,9 +9,9 @@ type InputWithLabelProps = InputProps & {
 };

 export const InputWithLabel = forwardRef<HTMLInputElement, InputWithLabelProps>(
-  ({ label, ...props }, ref) => {
+  ({ label, className, ...props }, ref) => {
    return (
-      <div>
+      <div className={className}>
        <Label htmlFor={label} className="block mb-2">
          {label}
        </Label>
--- a/apps/web/src/modals/AddClient.tsx
+++ b/apps/web/src/modals/AddClient.tsx
@@ -1,8 +1,10 @@
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Combobox } from '@/components/ui/combobox';
 import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { toast } from '@/components/ui/use-toast';
 import { useOrganizationParams } from '@/hooks/useOrganizationParams';
 import { useRefetchActive } from '@/hooks/useRefetchActive';
@@ -11,7 +13,7 @@ import { clipboard } from '@/utils/clipboard';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Copy } from 'lucide-react';
 import dynamic from 'next/dynamic';
-import { Controller, useForm } from 'react-hook-form';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';

 import { popModal } from '.';
@@ -21,6 +23,8 @@ const Syntax = dynamic(import('@/components/Syntax'));

 const validator = z.object({
  name: z.string().min(1, 'Required'),
+  cors: z.string().min(1, 'Required'),
+  withCors: z.boolean(),
  projectId: z.string().min(1, 'Required'),
 });

@@ -46,12 +50,29 @@ export default function CreateProject() {
    resolver: zodResolver(validator),
    defaultValues: {
      name: '',
+      cors: '*',
      projectId: '',
+      withCors: true,
    },
  });

+  const withCors = useWatch({
+    control,
+    name: 'withCors',
+  });
+
  if (mutation.isSuccess && mutation.data) {
-    const { clientId, clientSecret } = mutation.data;
+    const { clientId, clientSecret, cors } = mutation.data;
+    const snippet = clientSecret
+      ? `const mixan = new Mixan({
+  clientId: "${clientId}",
+  // Avoid using this on web, rely on cors settings instead
+  // Mostly for react-native and node/backend
+  clientSecret: "${clientSecret}",
+})`
+      : `const mixan = new Mixan({
+  clientId: "${clientId}",
+})`;
    return (
      <ModalContent>
        <ModalHeader title="Client created 🚀" />
@@ -60,6 +81,13 @@ export default function CreateProject() {
          so keep it safe 🫣
        </p>

+        <button className="mt-4 text-left" onClick={() => clipboard(cors)}>
+          <Label>Cors settings</Label>
+          <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
+            {cors}
+            <Copy size={16} />
+          </div>
+        </button>
        <button className="mt-4 text-left" onClick={() => clipboard(clientId)}>
          <Label>Client ID</Label>
          <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
@@ -67,25 +95,22 @@ export default function CreateProject() {
            <Copy size={16} />
          </div>
        </button>
-        <button
-          className="mt-4 text-left"
-          onClick={() => clipboard(clientSecret)}
-        >
-          <Label>Client Secret</Label>
-          <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
-            {clientSecret}
-            <Copy size={16} />
-          </div>
-        </button>
+        {clientSecret && (
+          <button
+            className="mt-4 text-left"
+            onClick={() => clipboard(clientSecret)}
+          >
+            <Label>Client Secret</Label>
+            <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
+              {clientSecret}
+              <Copy size={16} />
+            </div>
+          </button>
+        )}
        <div className="mt-4">
          <Label>Code snippet</Label>
-          <div className="overflow-x-auto [&_pre]:!rounded [&_pre]:!bg-gray-100 [&_pre]:text-sm">
-            <Syntax
-              code={`const mixan = new Mixan({
-  clientId: "${clientId}",
-  clientSecret: "${clientSecret}",
-})`}
-            />
+          <div className="[&_pre]:!rounded [&_pre]:!bg-gray-100 [&_pre]:text-sm">
+            <Syntax code={snippet} />
          </div>
        </div>

@@ -114,6 +139,36 @@ export default function CreateProject() {
          {...register('name')}
          className="mb-4"
        />
+
+        <Controller
+          name="withCors"
+          control={control}
+          render={({ field }) => (
+            <label className="flex items-center gap-2 text-sm font-medium leading-none mb-4">
+              <Checkbox
+                ref={field.ref}
+                onBlur={field.onBlur}
+                defaultChecked={field.value}
+                onCheckedChange={(checked) => {
+                  field.onChange(checked);
+                }}
+              />
+              Auth with cors settings
+            </label>
+          )}
+        />
+        {withCors && (
+          <>
+            <InputWithLabel
+              label="Cors"
+              placeholder="Cors"
+              {...register('cors')}
+            />
+            <div className="text-xs text-muted-foreground mb-4 mt-1">
+              Restrict access by domain names (include https://)
+            </div>
+          </>
+        )}
        <Controller
          control={control}
          name="projectId"
--- a/apps/web/src/modals/EditClient.tsx
+++ b/apps/web/src/modals/EditClient.tsx
@@ -19,6 +19,7 @@ interface EditClientProps {
 const validator = z.object({
  id: z.string().min(1),
  name: z.string().min(1),
+  cors: z.string().min(1),
 });

 type IForm = z.infer<typeof validator>;
@@ -43,6 +44,7 @@ export default function EditClient({ id }: EditClientProps) {
    defaultValues: {
      id: '',
      name: '',
+      cors: '',
    },
  });

@@ -60,7 +62,18 @@ export default function EditClient({ id }: EditClientProps) {
          mutation.mutate(values);
        })}
      >
-        <InputWithLabel label="Name" placeholder="Name" {...register('name')} />
+        <div className="flex flex-col gap-4">
+          <InputWithLabel
+            label="Name"
+            placeholder="Name"
+            {...register('name')}
+          />
+          <InputWithLabel
+            label="Cors"
+            placeholder="Cors"
+            {...register('cors')}
+          />
+        </div>
        <ButtonContainer>
          <Button type="button" variant="outline" onClick={() => popModal()}>
            Cancel
--- a/apps/web/src/pages/api/sdk/batch.ts
+++ b/apps/web/src/pages/api/sdk/batch.ts
@@ -0,0 +1,238 @@
+import { validateSdkRequest } from '@/server/auth';
+import { db } from '@/server/db';
+import { createError, handleError } from '@/server/exceptions';
+import { tickProfileProperty } from '@/server/services/profile.service';
+import { Prisma } from '@prisma/client';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { mergeDeepRight } from 'ramda';
+
+import type { BatchPayload } from '@mixan/types';
+
+interface Request extends NextApiRequest {
+  body: BatchPayload[];
+}
+
+export const config = {
+  api: {
+    responseLimit: false,
+  },
+};
+
+export default async function handler(req: Request, res: NextApiResponse) {
+  if (req.method == 'OPTIONS') {
+    await validateSdkRequest(req, res);
+    return res.status(200).json({});
+  }
+
+  if (req.method !== 'POST') {
+    return handleError(res, createError(405, 'Method not allowed'));
+  }
+
+  const time = Date.now();
+
+  try {
+    // Check client id & secret
+    const projectId = await validateSdkRequest(req, res);
+
+    const profileIds = new Set<string>(
+      req.body
+        .map((item) => item.payload.profileId)
+        .filter((id): id is string => typeof id === 'string' && id.length > 0)
+    );
+
+    if (profileIds.size === 0) {
+      return res.status(400).json({ status: 'error' });
+    }
+
+    const profiles = await db.profile.findMany({
+      where: {
+        id: {
+          in: Array.from(profileIds),
+        },
+      },
+    });
+
+    // eslint-disable-next-line no-inner-declarations
+    async function getProfile(profileId: string) {
+      const profile = profiles.find((profile) => profile.id === profileId);
+      if (profile) {
+        return profile;
+      }
+
+      const created = await db.profile.create({
+        data: {
+          id: profileId,
+          properties: {},
+          project_id: projectId,
+        },
+      });
+
+      profiles.push(created);
+
+      return created;
+    }
+
+    const mergedBody: BatchPayload[] = req.body.reduce((acc, item) => {
+      const canMerge =
+        item.type === 'update_profile' || item.type === 'update_session';
+
+      if (!canMerge) {
+        return [...acc, item];
+      }
+
+      const match = acc.findIndex(
+        (i) =>
+          i.type === item.type && i.payload.profileId === item.payload.profileId
+      );
+
+      if (acc[match]) {
+        acc[match]!.payload = mergeDeepRight(acc[match]!.payload, item.payload);
+      } else {
+        acc.push(item);
+      }
+
+      return acc;
+    }, [] as BatchPayload[]);
+
+    const failedEvents: BatchPayload[] = [];
+
+    for (const item of mergedBody) {
+      try {
+        const { type, payload } = item;
+        const profile = await getProfile(payload.profileId);
+        switch (type) {
+          case 'create_profile': {
+            profile.properties = {
+              ...(typeof profile.properties === 'object'
+                ? profile.properties ?? {}
+                : {}),
+              ...(payload.properties ?? {}),
+            };
+            await db.profile.update({
+              where: {
+                id: payload.profileId,
+              },
+              data: {
+                properties: profile.properties,
+              },
+            });
+            break;
+          }
+          case 'update_profile': {
+            profile.properties = {
+              ...(typeof profile.properties === 'object'
+                ? profile.properties ?? {}
+                : {}),
+              ...(payload.properties ?? {}),
+            };
+            await db.profile.update({
+              where: {
+                id: payload.profileId,
+              },
+              data: {
+                external_id: payload.id,
+                email: payload.email,
+                first_name: payload.first_name,
+                last_name: payload.last_name,
+                avatar: payload.avatar,
+                properties: profile.properties,
+              },
+            });
+            break;
+          }
+          case 'set_profile_property': {
+            if (
+              typeof (profile.properties as Record<string, unknown>)[
+                payload.name
+              ] === 'undefined'
+            ) {
+              (profile.properties as Record<string, unknown>)[payload.name] =
+                payload.value;
+
+              await db.profile.update({
+                where: {
+                  id: payload.profileId,
+                },
+                data: {
+                  // @ts-expect-error
+                  properties: profile.properties,
+                },
+              });
+            }
+            break;
+          }
+          case 'increment': {
+            await tickProfileProperty({
+              profileId: payload.profileId,
+              name: payload.name,
+              tick: payload.value,
+            });
+            break;
+          }
+          case 'decrement': {
+            await tickProfileProperty({
+              profileId: payload.profileId,
+              name: payload.name,
+              tick: -Math.abs(payload.value),
+            });
+            break;
+          }
+          case 'event': {
+            await db.event.create({
+              data: {
+                name: payload.name,
+                properties: payload.properties,
+                createdAt: payload.time,
+                project_id: projectId,
+                profile_id: payload.profileId,
+              },
+            });
+            break;
+          }
+          case 'update_session': {
+            const session = await db.event.findFirst({
+              where: {
+                profile_id: payload.profileId,
+                project_id: projectId,
+                name: 'session_start',
+              },
+              orderBy: {
+                createdAt: 'desc',
+              },
+            });
+            if (session) {
+              await db.$executeRawUnsafe(
+                `UPDATE events SET properties = '${JSON.stringify(
+                  payload.properties
+                )}' || properties WHERE "createdAt" >= '${session.createdAt.toISOString()}' AND profile_id = '${
+                  payload.profileId
+                }'`
+              );
+            }
+            break;
+          }
+        }
+      } catch (error) {
+        console.log(`Failed to create "${item.type}"`);
+        console.log('  > Payload:', item.payload);
+        console.log('  > Error:', error);
+        failedEvents.push(item);
+      }
+    } // end for
+
+    await db.eventFailed.createMany({
+      data: failedEvents.map((item) => ({
+        data: item as Record<string, any>,
+      })),
+    });
+
+    console.log('Batch took', Date.now() - time, 'ms', {
+      events: req.body.length,
+      combined: mergedBody.length,
+    });
+
+    res.status(200).json({ status: 'ok' });
+  } catch (error) {
+    handleError(res, error);
+  }
+}
--- a/apps/web/src/pages/api/sdk/events.ts
+++ b/apps/web/src/pages/api/sdk/events.ts
@@ -11,7 +11,8 @@ interface Request extends NextApiRequest {

 export default async function handler(req: Request, res: NextApiResponse) {
  if (req.method == 'OPTIONS') {
-    return res.status(202).json({});
+    await validateSdkRequest(req, res);
+    return res.status(200).json({});
  }

  if (req.method !== 'POST') {
@@ -20,7 +21,7 @@ export default async function handler(req: Request, res: NextApiResponse) {

  try {
    // Check client id & secret
-    const projectId = await validateSdkRequest(req);
+    const projectId = await validateSdkRequest(req, res);

    await db.event.createMany({
      data: req.body.map((event) => ({
--- a/apps/web/src/pages/api/sdk/profiles/[profileId]/decrement.ts
+++ b/apps/web/src/pages/api/sdk/profiles/[profileId]/decrement.ts
@@ -11,7 +11,8 @@ interface Request extends NextApiRequest {

 export default async function handler(req: Request, res: NextApiResponse) {
  if (req.method == 'OPTIONS') {
-    return res.status(202).json({});
+    await validateSdkRequest(req, res);
+    return res.status(200).json({});
  }

  if (req.method !== 'PUT') {
@@ -20,7 +21,7 @@ export default async function handler(req: Request, res: NextApiResponse) {

  try {
    // Check client id & secret
-    await validateSdkRequest(req);
+    await validateSdkRequest(req, res);

    const profileId = req.query.profileId as string;

--- a/apps/web/src/pages/api/sdk/profiles/[profileId]/increment.ts
+++ b/apps/web/src/pages/api/sdk/profiles/[profileId]/increment.ts
@@ -11,7 +11,8 @@ interface Request extends NextApiRequest {

 export default async function handler(req: Request, res: NextApiResponse) {
  if (req.method == 'OPTIONS') {
-    return res.status(202).json({});
+    await validateSdkRequest(req, res);
+    return res.status(200).json({});
  }

  if (req.method !== 'PUT') {
@@ -20,7 +21,7 @@ export default async function handler(req: Request, res: NextApiResponse) {

  try {
    // Check client id & secret
-    await validateSdkRequest(req);
+    await validateSdkRequest(req, res);

    const profileId = req.query.profileId as string;

--- a/apps/web/src/pages/api/sdk/profiles/[profileId]/index.ts
+++ b/apps/web/src/pages/api/sdk/profiles/[profileId]/index.ts
@@ -12,7 +12,8 @@ interface Request extends NextApiRequest {

 export default async function handler(req: Request, res: NextApiResponse) {
  if (req.method == 'OPTIONS') {
-    return res.status(202).json({});
+    await validateSdkRequest(req, res);
+    return res.status(200).json({});
  }

  if (req.method !== 'PUT' && req.method !== 'POST') {
@@ -21,7 +22,7 @@ export default async function handler(req: Request, res: NextApiResponse) {

  try {
    // Check client id & secret
-    await validateSdkRequest(req);
+    await validateSdkRequest(req, res);

    const profileId = req.query.profileId as string;
    const profile = await getProfile(profileId);
--- a/apps/web/src/pages/api/sdk/profiles/index.ts
+++ b/apps/web/src/pages/api/sdk/profiles/index.ts
@@ -4,16 +4,20 @@ import { createError, handleError } from '@/server/exceptions';
 import type { NextApiRequest, NextApiResponse } from 'next';
 import randomAnimalName from 'random-animal-name';

+import type {
+  CreateProfilePayload,
+  CreateProfileResponse,
+  ProfilePayload,
+} from '@mixan/types';
+
 interface Request extends NextApiRequest {
-  body: {
-    id?: string;
-    properties?: Record<string, any>;
-  };
+  body: ProfilePayload | CreateProfilePayload;
 }

 export default async function handler(req: Request, res: NextApiResponse) {
  if (req.method == 'OPTIONS') {
-    return res.status(202).json({});
+    await validateSdkRequest(req, res);
+    return res.status(200).json({});
  }

  if (req.method !== 'POST') {
@@ -22,12 +26,15 @@ export default async function handler(req: Request, res: NextApiResponse) {

  try {
    // Check client id & secret
-    const projectId = await validateSdkRequest(req);
+    const projectId = await validateSdkRequest(req, res);
+
+    // Providing an `ID` is deprecated, should be removed in the future
+    const profileId = 'id' in req.body ? req.body.id : undefined;
+    const { properties } = req.body ?? {};

-    const { id, properties } = req.body ?? {};
    const profile = await db.profile.create({
      data: {
-        id,
+        id: profileId,
        external_id: null,
        email: null,
        first_name: randomAnimalName(),
@@ -40,7 +47,8 @@ export default async function handler(req: Request, res: NextApiResponse) {
      },
    });

-    res.status(200).json({ id: profile.id });
+    const response: CreateProfileResponse = { id: profile.id };
+    res.status(200).json(response);
  } catch (error) {
    handleError(res, error);
  }
--- a/apps/web/src/server/api/routers/client.ts
+++ b/apps/web/src/server/api/routers/client.ts
@@ -59,6 +59,7 @@ export const clientRouter = createTRPCRouter({
        name: z.string(),
        projectId: z.string(),
        organizationSlug: z.string(),
+        withCors: z.boolean().default(true),
      })
    )
    .mutation(async ({ input }) => {
@@ -69,13 +70,14 @@ export const clientRouter = createTRPCRouter({
          organization_id: organization.id,
          project_id: input.projectId,
          name: input.name,
-          secret: await hashPassword(secret),
+          secret: input.withCors ? null : await hashPassword(secret),
        },
      });

      return {
-        clientSecret: secret,
+        clientSecret: input.withCors ? null : secret,
        clientId: client.id,
+        cors: client.cors,
      };
    }),
  remove: protectedProcedure
--- a/apps/web/src/server/auth.ts
+++ b/apps/web/src/server/auth.ts
@@ -1,6 +1,10 @@
 import { db } from '@/server/db';
 import { verifyPassword } from '@/server/services/hash.service';
-import type { GetServerSidePropsContext, NextApiRequest } from 'next';
+import type {
+  GetServerSidePropsContext,
+  NextApiRequest,
+  NextApiResponse,
+} from 'next';
 import { getServerSession } from 'next-auth';
 import type { DefaultSession, NextAuthOptions } from 'next-auth';
 import Credentials from 'next-auth/providers/credentials';
@@ -98,7 +102,10 @@ export const getServerAuthSession = (ctx: {
  return getServerSession(ctx.req, ctx.res, authOptions);
 };

-export async function validateSdkRequest(req: NextApiRequest): Promise<string> {
+export async function validateSdkRequest(
+  req: NextApiRequest,
+  res: NextApiResponse
+): Promise<string> {
  const clientId = req?.headers['mixan-client-id'] as string | undefined;
  const clientSecret = req.headers['mixan-client-secret'] as string | undefined;

@@ -106,10 +113,6 @@ export async function validateSdkRequest(req: NextApiRequest): Promise<string> {
    throw createError(401, 'Misisng client id');
  }

-  if (!clientSecret) {
-    throw createError(401, 'Misisng client secret');
-  }
-
  const client = await db.client.findUnique({
    where: {
      id: clientId,
@@ -120,8 +123,12 @@ export async function validateSdkRequest(req: NextApiRequest): Promise<string> {
    throw createError(401, 'Invalid client id');
  }

-  if (!(await verifyPassword(clientSecret, client.secret))) {
-    throw createError(401, 'Invalid client secret');
+  if (client.secret) {
+    if (!(await verifyPassword(clientSecret || '', client.secret))) {
+      throw createError(401, 'Invalid client secret');
+    }
+  } else if (client.cors !== '*') {
+    res.setHeader('Access-Control-Allow-Origin', client.cors);
  }

  return client.project_id;