Are WebVitals results cached?

[brunolm]

I have in my app/layout.tsx file

<AxiomWebVitals />

This seems to work, I can see on my dashboard I have results like:

{
  "platform": {
    "environment": "development",
    "source": "web-vital"
  },
  "source": "web-vital",
  "webVital": {
    "delta": 171.39999999850988,
    "entries": [
      {
        "workerStart": 0,
        "type": "navigate",
        "deliveryType": "",
        "notRestoredReasons": null,
        "domInteractive": 741.8999999985099,
        "loadEventEnd": 1938.8999999985099,
        "serverTiming": [],
        "initiatorType": "navigation",
        "name": "http://localhost:3000/contents/xxxxxxxxx",
        "decodedBodySize": 1283136,
        "responseEnd": 628.1000000014901,
        "renderBlockingStatus": "non-blocking",
        "secureConnectionStart": 0,
        "fetchStart": 7.899999998509884,
        "redirectCount": 0,
        "unloadEventEnd": 0,
        "startTime": 0,
        "domainLookupEnd": 41.899999998509884,
        "criticalCHRestart": 0,
        "domContentLoadedEventStart": 741.8999999985099,
        "encodedBodySize": 306259,
        "transferSize": 306559,
        "redirectStart": 0,
        "responseStart": 171.39999999850988,
        "domainLookupStart": 41.899999998509884,
        "domComplete": 1938.6000000014901,
        "unloadEventStart": 0,
        "firstInterimResponseStart": 0,
        "activationStart": 0,
        "nextHopProtocol": "http/1.1",
        "responseStatus": 200,
        "connectEnd": 42.100000001490116,
        "entryType": "navigation",
        "requestStart": 42.100000001490116,
        "redirectEnd": 0,
        "loadEventStart": 1938.800000000745,
        "domContentLoadedEventEnd": 742.3999999985099,
        "duration": 1938.8999999985099,
        "connectStart": 41.899999998509884
      }
    ],
    "id": "v3-1725908568868-8518415623847",
    "name": "TTFB",
    "navigationType": "navigate",
    "rating": "good",
    "route": "/contents/xxxxxxxxx",
    "value": 171.39999999850988
  }
}

However, what I'm seeing is that is I navigate to this page multiple times or refresh this page, this number never changes

"domInteractive": 741.8999999985099,

Isn't it supposed to probably be different each request?

Am I going wrong about it? I want to build a dashboard with information that gives me insights about the application performance. What'd be the best way to go about it?

[dasfmi]

You are right about it. It shouldn't be cached. One thing we noticed before is that when you load a page for the firs time, you get webVitals and correct path but when you navigate the route path doesn't change.

Can you give useReportWebVitals() a try, with perhaps logging to console and see if you face the same issue?

[gabrielelpidio]

@brunolm Hello! This should be resolved now in 1.9.1.

What was happening was:

When you go from path to path on next, it does what is called "Soft navigation" basically SPA navigation, so metrics are not measured there; however, in the <AxiomWebVitals/> component, the path reference wasn't stabilized, so every time a path changed it sent out a new event with the same metrics that were measured on the page load or last "hard navigation", hence, the ingestion of duplicate metrics between path changes.

By stabilizing the path reference, metrics should only be sent when they are being measured (First page load or hard navigation)