diff --git a/web/src/composables/useSessionReplay.ts b/web/src/composables/useSessionReplay.ts index 4bdfd84c25..2048b188f0 100644 --- a/web/src/composables/useSessionReplay.ts +++ b/web/src/composables/useSessionReplay.ts @@ -90,6 +90,9 @@ const defaultObject = { city: "", country: "", session_id: "", + timestamp: 0, + type: "", + time_spent: 0, }, }, }; diff --git a/web/src/views/RUM/SessionViewer.vue b/web/src/views/RUM/SessionViewer.vue index 1ce0abcefb..7840c00bce 100644 --- a/web/src/views/RUM/SessionViewer.vue +++ b/web/src/views/RUM/SessionViewer.vue @@ -36,11 +36,11 @@ along with this program. If not, see . style="font-size: 20px" > - {{ getSessionDetails.ip }} + {{ sessionDetails.ip }}
- {{ getSessionDetails.date }} + {{ sessionDetails.date }}
@@ -58,7 +58,7 @@ along with this program. If not, see . @@ -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) &&