chore(backend): integrate screen view event with session replay

backend/api/measure/app.go

@@ -1553,6 +1553,7 @@ func (a *App) GetSessionEvents(ctx context.Context, sessionId uuid.UUID) (*Sessi
 		`toString(navigation.to)`,
 		`toString(navigation.from)`,
 		`toString(navigation.source)`,
+		`toString(screen_view.name) `,
 	}
 
 	stmt := sqlf.From("default.events")
@@ -1601,6 +1602,7 @@ func (a *App) GetSessionEvents(ctx context.Context, sessionId uuid.UUID) (*Sessi
 		var trimMemory event.TrimMemory
 		var cpuUsage event.CPUUsage
 		var navigation event.Navigation
+		var screenView event.ScreenView
 
 		var coldLaunchDuration uint32
 		var warmLaunchDuration uint32
@@ -1804,6 +1806,9 @@ func (a *App) GetSessionEvents(ctx context.Context, sessionId uuid.UUID) (*Sessi
 			&navigation.To,
 			&navigation.From,
 			&navigation.Source,
+
+			// screen view
+			&screenView.Name,
 		}
 
 		if err := rows.Scan(dest...); err != nil {
@@ -1892,6 +1897,9 @@ func (a *App) GetSessionEvents(ctx context.Context, sessionId uuid.UUID) (*Sessi
 		case event.TypeNavigation:
 			ev.Navigation = &navigation
 			session.Events = append(session.Events, ev)
+		case event.TypeScreenView:
+			ev.ScreenView = &screenView
+			session.Events = append(session.Events, ev)
 		default:
 			continue
 		}
@@ -4641,6 +4649,7 @@ func GetSession(c *gin.Context) {
 		event.TypeException,
 		event.TypeANR,
 		event.TypeHttp,
+		event.TypeScreenView,
 	}
 
 	eventMap := session.EventsOfTypes(typeList...)
@@ -4674,6 +4683,13 @@ func GetSession(c *gin.Context) {
 		threads.Organize(event.TypeNavigation, threadedNavs)
 	}
 
+	screenViewEvents := eventMap[event.TypeScreenView]
+	if len(screenViewEvents) > 0 {
+		screenViews := replay.ComputeScreenViews(screenViewEvents)
+		threadedScreenViews := replay.GroupByThreads(screenViews)
+		threads.Organize(event.TypeScreenView, threadedScreenViews)
+	}
+
 	logEvents := eventMap[event.TypeString]
 	if len(logEvents) > 0 {
 		logs := replay.ComputeLogString(logEvents)

backend/api/replay/screen_view.go

@@ -0,0 +1,45 @@
+package replay
+
+import (
+	"backend/api/event"
+	"time"
+)
+
+// ScreenView represents screen view events suitable
+// for session replay.
+type ScreenView struct {
+	EventType     string `json:"event_type"`
+	ThreadName    string `json:"thread_name"`
+	UserTriggered bool   `json:"user_triggered"`
+	*event.ScreenView
+	Timestamp time.Time `json:"timestamp"`
+}
+
+// ComputeScreemViews computes screen view events
+// for session replay.
+func ComputeScreenViews(events []event.EventField) (result []ThreadGrouper) {
+	for _, event := range events {
+		sv := ScreenView{
+			event.Type,
+			event.Attribute.ThreadName,
+			event.UserTriggered,
+			event.ScreenView,
+			event.Timestamp,
+		}
+		result = append(result, sv)
+	}
+
+	return
+}
+
+// GetThreadName provides the name of the thread
+// where screen view took place.
+func (sv ScreenView) GetThreadName() string {
+	return sv.ThreadName
+}
+
+// GetTimestamp provides the timestamp of
+// the screen view took place.
+func (sv ScreenView) GetTimestamp() time.Time {
+	return sv.Timestamp
+}

frontend/dashboard/app/components/session_replay_event_accordion.tsx

@@ -48,7 +48,7 @@ export default function SessionReplayEventAccordion({
       return "bg-emerald-200 hover:bg-emerald-300 active:bg-emerald-400 focus-visible:outline-emerald-300"
     }
 
-    if (eventType === "navigation") {
+    if (eventType === "navigation" || eventType === "screen_view") {
       return "bg-fuchsia-200 hover:bg-fuchsia-300 active:bg-fuchsia-400 focus-visible:outline-fuchsia-300"
     }
 
@@ -124,6 +124,10 @@ export default function SessionReplayEventAccordion({
       return 'System: Trim Memory'
     }
 
+    if (eventType === "screen_view") {
+      return 'Screen View: ' + eventDetails.name
+    }
+
     return eventType
   }