feat(js,react): send package version in header (#310)

* feat(js,react): send package version in header

* feat: use package name from package.json

* test: package and version regex

workspaces/e2e/tests/events.spec.ts

@@ -46,8 +46,10 @@ const run = (packageName: string) => {
     await expect(page.getByText("Workflow block", { exact: true })).toBeVisible();
     const req = page.waitForRequest((req) => {
       const body = req.postDataJSON();
+      const headers = req.headers();
       return (
         req.url() === "https://api.flows-cloud.com/v2/sdk/events" &&
+        /@flows\/[^@]*@\d+\.\d+.\d+/.test(headers["x-flows-version"] ?? "") &&
         body.organizationId === "orgId" &&
         body.userId === "testUserId" &&
         body.environment === "prod" &&

workspaces/e2e/tests/init.spec.ts

@@ -14,8 +14,10 @@ const run = (packageName: string) => {
     });
     const blocksReq = page.waitForRequest((req) => {
       const body = req.postDataJSON();
+      const headers = req.headers();
       return (
         req.url() === "https://api.flows-cloud.com/v2/sdk/blocks" &&
+        /@flows\/[^@]*@\d+\.\d+.\d+/.test(headers["x-flows-version"] ?? "") &&
         body.organizationId === "orgId" &&
         body.userId === "testUserId" &&
         body.environment === "prod" &&
@@ -32,8 +34,10 @@ const run = (packageName: string) => {
     });
     const blocksReq = page.waitForRequest((req) => {
       const body = req.postDataJSON();
+      const headers = req.headers();
       return (
         req.url() === "https://custom.api.flows.com/v2/sdk/blocks" &&
+        (headers["x-flows-version"] ?? "").startsWith("@flows/") &&
         body.organizationId === "orgId" &&
         body.userId === "testUserId" &&
         body.environment === "prod" &&

workspaces/js/src/lib/api.ts

@@ -1,5 +1,6 @@
 import { type EventRequest, getApi } from "@flows/shared";
 import { config } from "../store";
+import { packageAndVersion } from "./constants";
 
 type SendEventProps = Pick<
   EventRequest,
@@ -10,7 +11,7 @@ export const sendEvent = async (props: SendEventProps): Promise<void> => {
   const configuration = config.value;
   if (!configuration) return;
   const { environment, organizationId, userId, apiUrl } = configuration;
-  await getApi(apiUrl).sendEvent({
+  await getApi(apiUrl, packageAndVersion).sendEvent({
     ...props,
     environment,
     organizationId,

workspaces/js/src/lib/blocks.ts

@@ -1,6 +1,7 @@
 import { type BlockUpdatesPayload, getApi, log, type UserProperties } from "@flows/shared";
 import { blocks } from "../store";
 import { websocket } from "./websocket";
+import { packageAndVersion } from "./constants";
 
 interface Props {
   apiUrl: string;
@@ -19,7 +20,7 @@ export const connectToWebsocketAndFetchBlocks = (props: Props): void => {
   })();
 
   const fetchBlocks = (): void => {
-    void getApi(apiUrl)
+    void getApi(apiUrl, packageAndVersion)
       .getBlocks({ ...params, userProperties: props.userProperties })
       .then((res) => {
         blocks.value = res.blocks;

workspaces/js/src/lib/constants.ts

@@ -0,0 +1,3 @@
+import { version, name } from "../../package.json";
+
+export const packageAndVersion = `${name}@${version}`;

workspaces/react/src/hooks/use-blocks.ts

@@ -7,6 +7,7 @@ import {
   type TourStep,
   type BlockUpdatesPayload,
 } from "@flows/shared";
+import { packageAndVersion } from "../lib/constants";
 import { useWebsocket } from "./use-websocket";
 
 interface Props {
@@ -37,7 +38,7 @@ export const useBlocks = ({
 
   // TODO: call fetchBlocks on reconnect
   const fetchBlocks = useCallback(() => {
-    void getApi(apiUrl)
+    void getApi(apiUrl, packageAndVersion)
       .getBlocks({ ...params, userProperties: userPropertiesRef.current })
       .then((res) => {
         setBlocks(res.blocks);

workspaces/react/src/lib/api.ts

@@ -1,5 +1,6 @@
 import { getApi, type EventRequest } from "@flows/shared";
 import { globalConfig } from "./store";
+import { packageAndVersion } from "./constants";
 
 type SendEventProps = Pick<
   EventRequest,
@@ -9,7 +10,7 @@ type SendEventProps = Pick<
 export const sendEvent = async (props: SendEventProps): Promise<void> => {
   const { apiUrl, environment, organizationId, userId } = globalConfig;
   if (!apiUrl || !environment || !organizationId || !userId) return;
-  await getApi(apiUrl).sendEvent({
+  await getApi(apiUrl, packageAndVersion).sendEvent({
     ...props,
     environment,
     organizationId,

workspaces/react/src/lib/constants.ts

@@ -0,0 +1,3 @@
+import { version, name } from "../../package.json";
+
+export const packageAndVersion = `${name}@${version}`;

workspaces/shared/src/api.ts

@@ -2,12 +2,13 @@ import { type Block } from "./types";
 
 const f = <T>(
   url: string,
-  { body, method }: { method?: string; body?: unknown } = {},
+  { body, method, version }: { method?: string; body?: unknown; version: string },
 ): Promise<T> =>
   fetch(url, {
     method,
     headers: {
       "Content-Type": "application/json",
+      "x-flows-version": version,
     },
     body: body ? JSON.stringify(body) : undefined,
   }).then(async (res) => {
@@ -43,8 +44,9 @@ export interface EventRequest {
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type -- ignore
-export const getApi = (apiUrl: string) => ({
+export const getApi = (apiUrl: string, version: string) => ({
   getBlocks: (body: GetBlocksRequest) =>
-    f<BlocksResponse>(`${apiUrl}/v2/sdk/blocks`, { method: "POST", body }),
-  sendEvent: (body: EventRequest) => f(`${apiUrl}/v2/sdk/events`, { method: "POST", body }),
+    f<BlocksResponse>(`${apiUrl}/v2/sdk/blocks`, { method: "POST", body, version }),
+  sendEvent: (body: EventRequest) =>
+    f(`${apiUrl}/v2/sdk/events`, { method: "POST", body, version }),
 });