(WIP) Get custom events from meta

app/controllers/spectator_sport/dashboard/session_windows_controller.rb

@@ -5,6 +5,10 @@ def show
         @session_window = SessionWindow.find(params[:id])
       end
 
+      def details
+        @session_window = SessionWindow.find(params[:id])
+      end
+
       def destroy
         @session_window = SessionWindow.find(params[:id])
         @session_window.events.delete_all

app/models/spectator_sport/event.rb

@@ -2,5 +2,69 @@ module SpectatorSport
   class Event < ApplicationRecord
     belongs_to :session
     belongs_to :session_window
+
+    Explanation = Struct.new(:title, :details, :custom_event)
+
+    # taken from https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts
+    EVENT_TYPES = %w[DomContentLoaded Load FullSnapshot IncrementalSnapshot Meta Custom]
+
+    EVENT_SOURCES = %w[Mutation MouseMove MouseInteraction Scroll ViewportResize Input TouchMove MediaInteraction
+                       StyleSheetRule CanvasMutation Font Log Drag StyleDeclaration Selection AdoptedStyleSheet]
+
+    MOUSE_INTERACTIONS = %w[MouseUp MouseDown Click ContextMenu DblClick Focus Blur TouchStart TouchMove_Departed
+                            TouchEnd TouchCancel]
+
+    def explanation
+      explanation = Explanation.new(title, [])
+
+      if event_type == "Meta"
+        explanation.details << "visited #{event_data.dig("data", "href")}"
+      end
+
+      if event_source
+        explanation.details << "source: #{event_source}"
+      end
+
+      if event_source == "MouseInteraction"
+        mouse_interaction = MOUSE_INTERACTIONS[event_data.dig("data", "type")]
+        explanation.details << "#{mouse_interaction}"
+      end
+
+      explanation.custom_event = custom_event
+
+      explanation
+    end
+
+    def event_type
+      EVENT_TYPES[event_data["type"]]
+    end
+
+    def event_source
+      return unless event_data.dig("data", "source")
+
+      EVENT_SOURCES[event_data.dig("data", "source")]
+    end
+
+    def title
+      if event_type == "IncrementalSnapshot" && event_source == "MouseInteraction" &&
+          MOUSE_INTERACTIONS[event_data.dig("data", "type")] == "Click"
+        "Mouse Click"
+      else
+        event_type
+      end
+    end
+
+    def page
+      event_data.dig("data", "href")
+    end
+
+    def custom_event
+      Event.parse_custom_event(event_data)
+    end
+
+    def self.parse_custom_event(data)
+      pattern = /tagName"=>"meta", "attributes"=>{"name"=>"spectator_sport-event", "content"=>\"([a-z0-9]*)\"/
+      data.to_s.match(pattern)&.captures&.first
+    end
   end
 end

app/models/spectator_sport/session_window.rb

@@ -2,5 +2,9 @@ module SpectatorSport
   class SessionWindow < ApplicationRecord
     belongs_to :session
     has_many :events
+
+    def analysis
+      @analysis ||= SessionWindowAnalysis.new(self)
+    end
   end
 end

app/models/spectator_sport/session_window_analysis.rb

@@ -0,0 +1,20 @@
+module SpectatorSport
+  class SessionWindowAnalysis
+    def initialize(session_window)
+      @session_window = session_window
+    end
+
+    def visited_pages
+      @session_window.events.map { _1.page }.compact
+    end
+
+    def tags # WIP simple naive implementation of tagging sessions
+      tags = []
+      tags
+    end
+
+    def custom_events
+      @session_window.events.map { _1.explanation.custom_event }.compact.uniq
+    end
+  end
+end

app/views/spectator_sport/dashboard/session_windows/details.html.erb

@@ -0,0 +1,39 @@
+<main class="container mt-3">
+  <h1> Overview </h1>
+  Visited pages:
+  <ul>
+    <% @session_window.analysis.visited_pages.each do |page| %>
+      <li><%= page %></li>
+    <% end %>
+  </ul>
+  <p>
+    Tags: <br>
+    <%= @session_window.analysis.tags %>
+  </p>
+
+  <p>
+    Custom events:<br>
+    <%= @session_window.analysis.custom_events.join(", ") %>
+  </p>
+
+  <h1> Events </h1>
+  <% @session_window.events.each do |event| %>
+    <p style="margin-bottom: 1rem;">
+      <strong> <%= event.explanation.title %> </strong>(#<%= event.id %>)<br>
+
+      <% if event.explanation.details.present? %>
+        <em> <%= event.explanation.details.join(", ") %> </em><br>
+      <% end %>
+
+      <% if event.explanation.custom_event.present? %>
+        <em> custom event: <%= event.explanation.custom_event %> </em><br>
+      <% end %>
+      <em> at <%= event.created_at.to_fs(:datetime) %> </em>
+
+      <details open>
+        <summary> Complete data </summary>
+        <%= event.event_data %>
+      </details>
+    </p>
+  <% end %>
+</div>

app/views/spectator_sport/dashboard/session_windows/show.html.erb

@@ -1,5 +1,8 @@
 <div class="container mt-3">
   <div id="player" class="d-flex justify-content-center"></div>
+  <div class="d-flex justify-content-center pt-2">
+    <%= link_to("see technical details", details_session_window_path(@session_window)) %>
+  </div>
 </div>
 
 <script type="module">

config/dashboard_routes.rb

@@ -1,6 +1,10 @@
 SpectatorSport::Dashboard::Engine.routes.draw do
   root to: "dashboards#index"
-  resources :session_windows, only: [ :show, :destroy ]
+  resources :session_windows, only: [ :show, :destroy ] do
+    member do
+      get :details
+    end
+  end
 
   scope :frontend, controller: :frontends, defaults: { version: SpectatorSport::VERSION.tr(".", "-") } do
     get "modules/:version/:id", action: :module, as: :frontend_module, constraints: { format: "js" }

demo/public/500.html

@@ -3,6 +3,7 @@
 <head>
   <title>We're sorry, but something went wrong (500)</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="spectator_sport-event" content="error500">
   <style>
   .rails-default-error-page {
     background-color: #EFEFEF;

spec/app/models/spectator_sport/event_spec.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+describe SpectatorSport::Event, type: :model do
+  describe ".parse_custom_event" do
+    context "when data doesn't contain spectator_sport event" do
+      let(:data) do
+        { "type"=>2, "tagName"=>"meta", "attributes"=>{ "name"=>"some_other_package-event", "content"=>"error500" } }
+      end
+
+      it "doesn't find anything" do
+        expect(SpectatorSport::Event.parse_custom_event(data.to_s)).to be_nil
+      end
+    end
+
+    context "when data contains spectator_sport event" do
+      let(:data) do
+        { "type"=>2, "tagName"=>"meta", "attributes"=>{ "name"=>"spectator_sport-event", "content"=>"error500" } }
+      end
+
+      let(:complex_data) do
+        { "type"=>2, "data"=>{ "node"=>{ "type"=>0, "childNodes"=>[ { "type"=>1, "name"=>"html", "publicId"=>"", "systemId"=>"", "id"=>2 }, { "type"=>2, "tagName"=>"html", "attributes"=>{}, "childNodes"=>[ { "type"=>2, "tagName"=>"head", "attributes"=>{}, "childNodes"=>[ { "type"=>3, "textContent"=>"\n ", "id"=>5 }, { "type"=>2, "tagName"=>"title", "attributes"=>{}, "childNodes"=>[ { "type"=>3, "textContent"=>"We're sorry, but something went wrong (500)", "id"=>7 } ], "id"=>6 }, { "type"=>3, "textContent"=>"\n ", "id"=>8 }, { "type"=>2, "tagName"=>"meta", "attributes"=>{ "name"=>"viewport", "content"=>"width=device-width,initial-scale=1" }, "childNodes"=>[], "id"=>9 }, { "type"=>3, "textContent"=>"\n ", "id"=>10 }, { "type"=>2, "tagName"=>"meta", "attributes"=>{ "name"=>"spectator_sport-event", "content"=>"error500" }, "childNodes"=>[], "id"=>11 }, { "type"=>3, "textContent"=>"\n ", "id"=>12 }, { "type"=>2, "tagName"=>"style", "attributes"=>{}, "childNodes"=>[ { "type"=>3, "textContent"=>".rails-default-error-page { background-color: rgb(239, 239, 239); color: rgb(46, 47, 48); text-align: center; font-family: arial, sans-serif; margin: 0px; }.rails-default-error-page div.dialog { width: 95%; max-width: 33em; margin: 4em auto 0px; }.rails-default-error-page div.dialog > div { border-width: 4px 1px 1px; border-style: solid; border-image: none; border-color: rgb(176, 1, 0) rgb(153, 153, 153) rgb(187, 187, 187); border-top-left-radius: 9px; border-top-right-radius: 9px; background-color: white; padding: 7px 12% 0px; box-shadow: rgba(50, 50, 50, 0.17) 0px 3px 8px; }.rails-default-error-page h1 { font-size: 100%; color: rgb(115, 14, 21); line-height: 1.5em; }.rails-default-error-page div.dialog > p { margin: 0px 0px 1em; padding: 1em; background-color: rgb(247, 247, 247); border-width: 1px; border-style: solid; border-image: none; border-color: rgb(218, 218, 218) rgb(153, 153, 153) rgb(153, 153, 153); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; color: rgb(102, 102, 102); box-shadow: rgba(50, 50, 50, 0.17) 0px 3px 8px; }", "isStyle"=>true, "id"=>14 } ], "id"=>13 }, { "type"=>3, "textContent"=>"\n\n ", "id"=>15 }, { "type"=>2, "tagName"=>"script", "attributes"=>{ "defer"=>"", "src"=>"http://127.0.0.1:3000/spectator_sport/events.js" }, "childNodes"=>[], "id"=>16 }, { "type"=>3, "textContent"=>"\n", "id"=>17 } ], "id"=>4 }, { "type"=>3, "textContent"=>"\n\n", "id"=>18 }, { "type"=>2, "tagName"=>"body", "attributes"=>{ "class"=>"rails-default-error-page" }, "childNodes"=>[ { "type"=>3, "textContent"=>"\n ", "id"=>20 }, { "type"=>5, "textContent"=>" This file lives in public/500.html ", "id"=>21 }, { "type"=>3, "textContent"=>"\n ", "id"=>22 }, { "type"=>2, "tagName"=>"div", "attributes"=>{ "class"=>"dialog" }, "childNodes"=>[ { "type"=>3, "textContent"=>"\n ", "id"=>24 }, { "type"=>2, "tagName"=>"div", "attributes"=>{}, "childNodes"=>[ { "type"=>3, "textContent"=>"\n ", "id"=>26 }, { "type"=>2, "tagName"=>"h1", "attributes"=>{}, "childNodes"=>[ { "type"=>3, "textContent"=>"We're sorry, but something went wrong.", "id"=>28 } ], "id"=>27 }, { "type"=>3, "textContent"=>"\n ", "id"=>29 } ], "id"=>25 }, { "type"=>3, "textContent"=>"\n ", "id"=>30 }, { "type"=>2, "tagName"=>"p", "attributes"=>{}, "childNodes"=>[ { "type"=>3, "textContent"=>"If you are the application owner check the logs for more information.", "id"=>32 } ], "id"=>31 }, { "type"=>3, "textContent"=>"\n ", "id"=>33 } ], "id"=>23 }, { "type"=>3, "textContent"=>"\n\n\n", "id"=>34 } ], "id"=>19 } ], "id"=>3 } ], "id"=>1 }, "initialOffset"=>{ "left"=>0, "top"=>0 } }, "timestamp"=>1735497977728 }
+      end
+
+      it "finds event in page meta" do
+        expect(SpectatorSport::Event.parse_custom_event(data.to_s)).to eq "error500"
+        expect(SpectatorSport::Event.parse_custom_event(complex_data.to_s)).to eq "error500"
+      end
+    end
+  end
+end