Thoughts about custom events, metadata, and labeling/tagging/searching

[bensheldon]

I've been thinking about how to support custom rrweb events, tracking metadata about a request or just content on the page, and ultimately associating those with recordings (and/or timestamps in a recording).

I'm partial to something simple like Turbo Attributes and Meta Tags in which the metadata is embedded into the HTML of webpage.

e.g. embedding something like

• <div data-spectator-event="custom_event_name"></div> would create an event whenever that element became visible (either on page load, or if it was hidden and then revealed; maybe something could even be done with Intersection Observer to add an event when it is in the browser viewport), or
• <div data-spectator-label="custom_label_to_apply_to_recording"></div> would apply a label to the recording

I dunno, those are what I'm thinking about. The rationale for it is:

• I don't want to necessitate anyone write javascript to interact with the recorder
• I want to make sure that it's easy for someone to add a label/metadata to their static HTML error pages (public/404.html)

[janpeterka]

I agree with using html as a way to define this, not javascript.

I can imagine multiple scenarios when you want to add custom event, and propose what ergonomics would I like.

• on page load -> it seems cleanest to have meta tag for that, like <meta name="spectator_sport-event" content="name-of-event"> or similar, ideally generated by some helper spectator_sport_event :name-of-event
• on some part of page shown -> maybe have data-spectator_sport-event="name-of-event" attribute?
• on some action (button click) -> also data attribute?

However, I'm not sure how complicated this would be, and how much overhead would it add (especially as we can expect turbo-driven pages with dynamically changing content`. So maybe the last scenario (action) is too complicated and not that useful?

[bensheldon]

on some action (button click) -> also data attribute?

That's really interesting! Just noodling on it, I wonder about a syntax something like Stimulus's Actions

Something like:

<button data-spectator-event="click->event_name">Submit</button>

I wonder if we'd want to support any arbitrary javascript/dom event, or provide our own list (cause I imagine we'd want some Spectator Sport specific ones like "enters-viewport" and stuff.

[bensheldon]

Aside: I also think that the simplest and least javascript-heavy solution to implement would be best, or at least the compromise to balance against 😰

[janpeterka]

I have no idea about how this would be actually implemented (I tried to understand the current javascript and failed horribly), so I won't be much help in deciding that :sweat_smile:

And yes, I'm definitely influenced by stimulus, so I like that code :grin:

On the other hand, maybe solution which is based solely on loaded page (eg. could be in meta), will solve 90% of usecases?