Adding frontend metrics

[mcottontensor]

Relevant components:

• Scalable Pixel Streaming Frontend library
• Examples
• Docs

Problem statement:

Lack of metrics

Solution

Adds a bunch of metrics that are collected over a session and posts them to Buccaneer, a push gateway for Prometheus to scrape and store for Grafana to visualise.

Documentation

Test Plan and Compatibility

[lukehb]

Some minor feedback about restructuring and providing some more info here and there.

Some additional changes to the PR description so it can stand on its own without you needing to explain it when you are busy on other tasks, can I ask you add the following to the PR description:

• Problem statement more detailed (bringing over parts of the spec description)
• Create a diagram in PR description that describes the components of the final system and how they interplay (basically an architecture diagram).
• Given a brief explanation of how stats are stored and how they are labelled per application/session.
• Limitations and next steps, e.g. what can it not do? Also what would have to happen to land it as part of SPS (e.g. SPSFramework would have to stand up components X, Y, Z and expose and stable endpoint to push to).
• How to run what is here today using the docker compose and the steps to see stats show up in the dashboard
• Screenshot of the final result

[lukehb]

Does this capture the stats if the UE side or the SS side terminates? E.g. Websocket disconnect case? If not can you try to capture the case where the session ends but the browser has not navigated away.

[lukehb]

It might as simple as something like

this.stream.addEventListener('webRtcDisconnected', () => this.endSession(sessionId) );

[lukehb]

Additionally, can we add a special stat to track websocket disconnect (or better yet, to track session end reason)

[mcottontensor]

So that's similar to something I've been thinking about today. Things like loading time, user agent and this aren't reported currently because they're not ongoing gauge metrics like bit rate etc. They're more like events. Well this disconnect event is, but user agent and loading time are one time metrics. I'm not sure how they should be handled.
I know the buccaneer setup uses loki for event like stats that show up as annotations on the grafana graphs.. but is that how we want to handle each of these stats? As events?

[lukehb]

Would be good have stat operations for min, max, stddev too.

[lukehb]

I am thinking of bitrate for example where we would be interested in knowing not just the average but the best/worst and spread too.