GoogleChrome / web-vitals

Essential metrics for a healthy site.
https://web.dev/vitals
Apache License 2.0
7.47k stars 410 forks source link

TypeError: Cannot read properties of undefined (reading 'processingEnd') #496

Closed nordfjord closed 2 months ago

nordfjord commented 2 months ago

We're getting an error in production because group is undefined

Screenshot 2024-06-12 at 10 10 15

I took a quick look at the code and it seems like it's related to this piece of code https://github.com/GoogleChrome/web-vitals/blob/9ef33074f7a5c03f687f5685a57b1fa998d540e5/src/attribution/onINP.ts#L245

Map#get returns T | undefined and it's being marked as non-nullable in the code. In production we're definitely hitting the case of it returning undefined. Maybe a proper null check is in order?

tunetheweb commented 2 months ago

We've had another report of this too and are investigating.

Can you confirm:

nordfjord commented 2 months ago

Version is web-vitals@4.0.1.

here's the report on browser stats

Screenshot 2024-06-12 at 10 15 24
tunetheweb commented 2 months ago

And all those browser are seeing this issue?

nordfjord commented 2 months ago

yes! This is the spread that's reporting this error specifically

tunetheweb commented 2 months ago

How common is this do you know?

And would you be able to run a custom build to help us track it down?

nordfjord commented 2 months ago

How common is this do you know?

And would you be able to run a custom build to help us track it down?

About 5% of our users seem to experience it, and yes, I can run a custom build

tunetheweb commented 2 months ago

We released a debug version here: https://unpkg.com/web-vitals@4.2.0-debug.0/dist/web-vitals.attribution.js

You should be able to install using npm install web-vitals@debug

We basically added the below code. It will still cause an error (but this time by explicitly raising an exception) as we haven't fixed the issue, but we're hoping it will give us more information in that exception when that happens.

There is also a chance this issue is fixed as we refactored some of this code. So if you do not see errors with this code then you can try the latest production version (4.1.1) and see if that's the same.

Let us know how you get on and if you could share some error messages we can look further.

  if (!group) {
    // @ts-ignore
    const obj = {
      reportTime: performance.now(),
      navigationType: metric.navigationType,
      entries: metric.entries.map((e) => {
        return Object.assign({interactionId: e.interactionId}, e.toJSON());
      }),
      value: metric.value,
      delta: metric.delta,
    };
    // This should never happen, so throw an error to figure out why.
    throw new Error(`Missing group: ${JSON.stringify(obj)}`);
  }
philipwalton commented 2 months ago

There is also a chance this issue is fixed as we refactored some of this code. So if you do not see errors with this code then you can try the latest production version (4.1.1) and see if that's the same.

Quick clarification, the most recent changes from #495 have not yet been released into any stable version, but we think there's a chance they might fix (or at least improve) the issue. So if you try out the debug build and stop seeing errors, we'll make sure to publish a version 4.2.0 ASAP with that fix.

nordfjord commented 2 months ago

Thanks! I've submitted the PR on my side and expect it to go out in the morning

tunetheweb commented 2 months ago

Any update @nordfjord ? did the patch go out and are you still seeing the errors?

nordfjord commented 2 months ago

@tunetheweb, patch went out yesterday and I've not seen the error yet, keeping an eye out and will let you know how if that changes

nordfjord commented 2 months ago

Happy to report I've not seen this error crop up in the last 2 days. So I think it's safe to mark as fixed and cut a release for 4.2.0!

tunetheweb commented 2 months ago

FYI we released 4.2.0 yesterday. Thanks for your help with testing!