Web Vitals support

[tombruijn]

As discussed in https://3.basecamp.com/4738529/buckets/18166704/messages/3942605857
Research if we can add Web Vital support in the JavaScript libraries.

[wesoudshoorn]

What could be useful
The Web Vital package can track web vitals from your browser and send them to an endpoint. We currently already do something like this through our Next.js integration. Apparently, Next.js has built-in support for this.

Showing metrics on a dashboard
This was a dashboard created from a blog post on our blog. It graphs the web vitals over time, which can be very useful for debugging front-end performance.

What we're missing ourselves: Samples
When making AppSignal.com faster, it's easy to get metrics like these over time (Vercel has an analytics product that does this). The missing link is getting some type of sample for a request with bad Web Vitals. We're now being old there are requests which take 5S to show the first content, but we don't know what browser/country/connection is being used.

It would be awesome if there's some way to also load samples into AppSignal of the requests with the slowest web vitals.

Other products that do something with Web Vitals
https://www.debugbear.com/
https://www.speedlify.dev/
https://calibreapp.com/
https://speedcurve.com/

[matsimitsu]

The missing link is getting some type of sample for a request with bad Web Vitals.

The JS integration is currently not setup to collect samples, I'm also not entirely sure what it should collect. But we can update the integration to emit samples if needed, and have the public endpoint collect them. Note that the public endpoint s limited in what it accepts size-wise for samples. Samples with 10k events will be rejected by the endpoint, for example.

[matsimitsu]

Our public endpoint already accepts web-vitals btw, on /metrics/webvitals in the following format:

[
    {
        "id": "1596275342516-3380393974949",
        "label": "custom",
        "name": "Next.js-hydration",
        "startTime": 1135,
        "value": 12,
    },
    {
        "id": "1596275342519-1731783822324",
        "label": "web-vital",
        "name": "FCP",
        "startTime": 1171.295000007376,
        "value": 1171.295000007376
    }
]

[tombruijn]

https://app.intercom.com/a/apps/yzor8gyw/inbox/inbox/540709/conversations/16410700078716