send posthog callEnded events instantly in embedded mode (prohibit missing events) (#816)

Signed-off-by: Timo K <timok@element.io>
Co-authored-by: Timo K <timok@element.io>

src/PosthogAnalytics.ts

@@ -54,10 +54,6 @@ export interface IPosthogEvent {
   $set_once?: void;
 }
 
-export interface IPostHogEventOptions {
-  timestamp?: Date;
-}
-
 export enum Anonymity {
   Disabled,
   Anonymous,
@@ -373,7 +369,7 @@ export class PosthogAnalytics {
 
   public async trackEvent<E extends IPosthogEvent>(
     { eventName, ...properties }: E,
-    options?: IPostHogEventOptions
+    options?: CaptureOptions
   ): Promise<void> {
     if (this.identificationPromise) {
       // only make calls to posthog after the identificaion is done

src/PosthogEvents.ts

@@ -45,14 +45,17 @@ export class CallEndedTracker {
     );
   }
 
-  track(callId: string, callParticipantsNow: number) {
-    PosthogAnalytics.instance.trackEvent<CallEnded>({
-      eventName: "CallEnded",
-      callId: callId,
-      callParticipantsMax: this.cache.maxParticipantsCount,
-      callParticipantsOnLeave: callParticipantsNow,
-      callDuration: (Date.now() - this.cache.startTime.getTime()) / 1000,
-    });
+  track(callId: string, callParticipantsNow: number, sendInstantly: boolean) {
+    PosthogAnalytics.instance.trackEvent<CallEnded>(
+      {
+        eventName: "CallEnded",
+        callId: callId,
+        callParticipantsMax: this.cache.maxParticipantsCount,
+        callParticipantsOnLeave: callParticipantsNow,
+        callDuration: (Date.now() - this.cache.startTime.getTime()) / 1000,
+      },
+      { send_instantly: sendInstantly }
+    );
   }
 }
 

src/room/GroupCallView.tsx

@@ -176,7 +176,7 @@ export function GroupCallView({
   const [left, setLeft] = useState(false);
   const history = useHistory();
 
-  const onLeave = useCallback(() => {
+  const onLeave = useCallback(async () => {
     setLeft(true);
 
     let participantCount = 0;
@@ -184,13 +184,20 @@ export function GroupCallView({
       participantCount += deviceMap.size;
     }
 
+    // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
+    // therefore we want the event to be sent instantly without getting queued/batched.
+    const sendInstantly = !!widget;
     PosthogAnalytics.instance.eventCallEnded.track(
       groupCall.groupCallId,
-      participantCount
+      participantCount,
+      sendInstantly
     );
 
     leave();
     if (widget) {
+      // we need to wait until the callEnded event is tracked. Otherwise the iFrame gets killed before tracking the event.
+      await new Promise((resolve) => window.setTimeout(resolve, 500)); // 500ms
+      PosthogAnalytics.instance.logout();
       widget.api.transport.send(ElementWidgetActions.HangupCall, {});
       widget.api.setAlwaysOnScreen(false);
     }