fix: user and locations details on session viewer page (#2052)

web/src/composables/useSessionReplay.ts

@@ -90,6 +90,9 @@ const defaultObject = {
       city: "",
       country: "",
       session_id: "",
+      timestamp: 0,
+      type: "",
+      time_spent: 0,
     },
   },
 };

web/src/views/RUM/SessionViewer.vue

@@ -36,11 +36,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           style="font-size: 20px"
         >
           <q-icon name="language" size="20px" class="q-pr-xs" />
-          {{ getSessionDetails.ip }}
+          {{ sessionDetails.ip }}
         </div>
         <div class="text-caption ellipsis q-pr-xs row items-center q-mr-md">
           <q-icon name="calendar_month" size="16px" class="q-pr-xs" />
-          {{ getSessionDetails.date }}
+          {{ sessionDetails.date }}
         </div>
       </div>
       <q-separator class="full-width q-mt-sm" />
@@ -58,7 +58,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <q-separator vertical class="full-height" />
         <PlayerEventsSidebar
           :events="segmentEvents"
-          :sessionDetails="getSessionDetails"
+          :sessionDetails="sessionDetails"
           @event-emitted="handleSidebarEvent"
         />
       </div>
@@ -110,6 +110,17 @@ const session_end_time = 1692884769270;
 
 const getSessionId = computed(() => router.currentRoute.value.params.id);
 
+const sessionDetails = ref({
+  date: "",
+  browser: "",
+  os: "",
+  ip: "",
+  user_email: "",
+  city: "",
+  country: "",
+  id: "",
+});
+
 onBeforeMount(async () => {
   sessionId.value = router.currentRoute.value.params.id as string;
   await getSession();
@@ -117,8 +128,8 @@ onBeforeMount(async () => {
   getSessionEvents();
 });
 
-const getSessionDetails = computed(() => {
-  return {
+const getSessionDetails = () => {
+  sessionDetails.value = {
     date: getFormattedDate(sessionState.data.selectedSession?.start_time),
     browser: sessionState.data.selectedSession?.browser,
     os: sessionState.data.selectedSession?.os,
@@ -128,17 +139,23 @@ const getSessionDetails = computed(() => {
     country: sessionState.data.selectedSession?.country || "Unknown",
     id: sessionState.data.selectedSession?.session_id,
   };
-});
+};
 
 const getSession = () => {
   return new Promise((resolve) => {
     let geoFields = "";
 
-    if (performanceState.data.streams["_sessionreplay"]["geo_info_country"]) {
+    if (
+      performanceState.data.streams["_sessionreplay"]["schema"][
+        "geo_info_country"
+      ]
+    ) {
       geoFields += "min(geo_info_city) as city,";
     }
 
-    if (performanceState.data.streams["_sessionreplay"]["geo_info_city"]) {
+    if (
+      performanceState.data.streams["_sessionreplay"]["schema"]["geo_info_city"]
+    ) {
       geoFields += "min(geo_info_country) as country,";
     }
 
@@ -166,12 +183,16 @@ const getSession = () => {
         if (res.data.hits.length === 0) {
           return;
         }
+
         sessionState.data.selectedSession = {
+          ...sessionState.data.selectedSession,
           ...res.data.hits[0],
           type: res.data.hits[0].source,
           time_spent: res.data.hits[0].end_time - res.data.hits[0].start_time,
           timestamp: res.data.hits[0].zo_sql_timestamp,
         };
+
+        getSessionDetails();
       })
       .finally(() => {
         isLoading.value.pop();
@@ -260,6 +281,13 @@ const getSessionEvents = () => {
     })
     .then((res) => {
       const events = ["action", "view", "error"];
+
+      if (
+        !sessionDetails.value.user_email ||
+        sessionDetails.value.user_email === "Unknown User"
+      )
+        sessionDetails.value.user_email = res.data.hits[0].usr_email;
+
       segmentEvents.value = res.data.hits.filter((hit: any) => {
         return (
           !!events.includes(hit.type) &&