Following the instructions on how to send results to an analytics endpoint gives an error

[markushav]

In the README.md the example on how to send the results to an analytics endpoint gives TypeError: Converting circular structure to JSON. The problem is in the PerformanceEntries which cannot be converted to JSON, since they include DOM Elements. I found in the typescript definition that the PerformanceEntries have a toJSON() function (which actually has any type definition), but it doesn't help.

Please provide usable examples on how to correctly handle and send all the data to an analytics endpoint or remove the broken example and provide detailed information about what data should and could be sent to an analytics endpoint.

The problematic example I'm referring to in the README.md:

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

[makbol]

Updated example in PR above (#81) has been changed back to what it was before but I recently encountered problem. Observed on Chrome Mobile WebView v83.0.4103 on Android.

@philipwalton can you please reopen the issue?