Cloudflare Web Analytics JavaScript beacon exceptions with legacy browsers

We have a website that gets a lot of traffic from a diverse range of legacy browsers and devices, especially from developing countries.

We’re using the automatic setup which inserts the JavaScript beacon onto the site. We also use Sentry for catching frontend exceptions and errors.

We’ve noticed the Cloudflare Web Analytics JS library throws a number of errors on some legacy clients related to the Performance API.

For example here are some stack traces

TypeError: undefined is not an object (evaluating 'performance.getEntriesByName("first-contentful-paint")[0]')
  at ? (/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194:1:18680)
TypeError: undefined is not an object (evaluating 'performance.getEntriesByType("paint").filter')
  at t(/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194:1:2477)
  at d(/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194:1:6015)
  at j(/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194:1:9603)
  at ? (/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194:1:17609)
  at s(./node_modules/@sentry/tracing/esm/transaction.js:127:57)

I’ve taken a look at the minified beacon JS code and I can see for example there are checks for the Performance API, but not if performance.getEntriesByType("paint") returns an object.

My theory is that these legacy browsers do not support the PerformancePaintTiming or Paint Timing API which has a different compatibility matrix to the generic Performance API PerformancePaintTiming - Web APIs | MDN

I think the code should be updated to handle the condition where performance.getEntriesByType("paint") or performance.getEntriesByName("first-contentful-paint") does not return.

Hi, Thank you for your feedback. We will have a fix ready for the next release and update on you once we release the next version of the Beacon script.

1 Like

Thanks. Any ideas when the next release is due?