feat: event version, location, targetElement

workspaces/js/src/cloud/api.ts

@@ -31,6 +31,9 @@ export const api = (baseUrl: string) => ({
     stepIndex?: string;
     stepHash?: string;
     flowHash: string;
+    sdkVersion: string;
+    targetElement?: string;
+    location: string;
   }): Promise<{ id: string }> =>
     f(`${baseUrl}/sdk/events`, {
       method: "POST",

workspaces/js/src/cloud/index.ts

@@ -4,6 +4,7 @@ import type { DebugEvent, FlowsCloudOptions, TrackingEvent } from "../types";
 import { hash } from "../utils";
 import { log } from "../log";
 import { validateFlowsOptions, validateCloudFlowsOptions } from "../validation";
+import { version } from "../lib/version";
 import { api } from "./api";
 import { loadStyle } from "./style";
 
@@ -42,7 +43,7 @@ export const init = async (options: FlowsCloudOptions): Promise<void> => {
   const saveEvent = async (
     event: DebugEvent | TrackingEvent,
   ): Promise<{ referenceId: string } | undefined> => {
-    const { flowHash, flowId, type, projectId = "", stepIndex, stepHash, userId } = event;
+    const { flowHash, flowId, type, projectId = "", stepIndex, stepHash, userId, location } = event;
 
     return api(apiUrl)
       .sendEvent({
@@ -54,6 +55,9 @@ export const init = async (options: FlowsCloudOptions): Promise<void> => {
         stepHash,
         stepIndex: stepIndex?.toString(),
         userHash: userId ? await hash(userId) : undefined,
+        sdkVersion: version,
+        targetElement: "targetElement" in event ? event.targetElement : undefined,
+        location,
       })
       .then((res) => ({ referenceId: res.id }))
       .catch((err) => {

workspaces/js/src/cloud/style.ts

@@ -1,4 +1,4 @@
-import { version } from "../../package.json";
+import { version } from "../lib/version";
 
 export const loadStyle = ({ apiUrl, projectId }: { apiUrl: string; projectId: string }): void => {
   const styleEl =

workspaces/js/src/flow-state.ts

@@ -60,7 +60,7 @@ export class FlowState {
     });
   }
   async debug(
-    props: Pick<DebugEvent, "type" | "referenceId">,
+    props: Pick<DebugEvent, "type" | "referenceId" | "targetElement">,
   ): Promise<{ referenceId: string } | undefined> {
     if (!this.flow || this.flow.draft) return;
 
@@ -76,7 +76,10 @@ export class FlowState {
     const step = this.currentStep;
     if (step && isTooltipStep(step) && !this.tooltipErrorPromise)
       this.tooltipErrorPromise = window.setTimeout(() => {
-        this.tooltipErrorPromise = this.debug({ type: "tooltipError" });
+        this.tooltipErrorPromise = this.debug({
+          type: "tooltipError",
+          targetElement: step.targetElement,
+        });
       }, 1000);
 
     return this;

workspaces/js/src/flows-context.ts

@@ -1,3 +1,4 @@
+import { validateFlow } from "./validation";
 import { FlowState } from "./flow-state";
 import { getPathname } from "./lib/location";
 import type {
@@ -14,6 +15,7 @@ import type {
   IdentifyUserOptions,
   SeenFlow,
 } from "./types";
+import { log } from "./log";
 
 interface PersistentState {
   expiresAt: string | null;
@@ -127,6 +129,13 @@ export class FlowsContext {
   };
 
   addFlowData(flow: Flow): this {
+    const validationResult = validateFlow(flow);
+    if (validationResult.error)
+      log.error(
+        `Error validating flow at: flow.${validationResult.error.path.join(".")} with value:`,
+        validationResult.error.value,
+      );
+    if (!validationResult.valid) return this;
     if (!this.flowsById) this.flowsById = {};
     this.flowsById[flow.id] = flow;
     this.startInstancesFromLocalStorage();

workspaces/js/src/lib/version.ts

@@ -0,0 +1,3 @@
+import { version as v } from "../../package.json";
+
+export const version = v;

workspaces/js/src/types/options.ts

@@ -34,6 +34,7 @@ export interface DebugEvent extends Omit<TrackingEvent, "type"> {
    * referenceId of the event that the current event is invalidating.
    */
   referenceId?: string;
+  targetElement?: string;
 }
 export type Debug = (event: DebugEvent) => Promise<{ referenceId: string } | undefined>;