From 05be247946e51a0e3cdee3750c3fe9d3501c239d Mon Sep 17 00:00:00 2001
From: Timo <16718859+toger5@users.noreply.github.com>
Date: Tue, 3 Jan 2023 17:09:21 +0100
Subject: [PATCH] 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    |  6 +-----
 src/PosthogEvents.ts       | 19 +++++++++++--------
 src/room/GroupCallView.tsx | 11 +++++++++--
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/PosthogAnalytics.ts b/src/PosthogAnalytics.ts
index 9e5b245..4e59805 100644
--- a/src/PosthogAnalytics.ts
+++ b/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
diff --git a/src/PosthogEvents.ts b/src/PosthogEvents.ts
index c30cc3d..1e5162f 100644
--- a/src/PosthogEvents.ts
+++ b/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 }
+    );
   }
 }
 
diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index 27b907c..9f5979d 100644
--- a/src/room/GroupCallView.tsx
+++ b/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);
     }