fix: add null safety to WebVitals comparators #1238
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
BYK
force-pushed
the
fix/webvitals-comparator-null-safety
branch
from
ac59ec9 to
3c9b569
Compare
![sentry[bot]](https://avatars.githubusercontent.com/u/1396951?s=60&v=4){kind=small}
| return updatedEvent as unknown as SentryEventWithPerformanceData; | ||
| }) | ||
| .filter(event => event.measurements["score.total"] != null) |
There was a problem hiding this comment.
Bug: Direct navigation to a non-pageload event detail page in WebVitalsDetail.tsx causes a crash due to unguarded access to score measurements which are not populated.
Severity: HIGH | Confidence: High
🔍 Detailed Analysis
The WebVitalsDetail.tsx component can crash if a user navigates directly to a detail page for an event that is not a 'pageload' event or lacks a measurements object. The list view in index.tsx correctly filters for event?.contexts?.trace?.op === 'pageload', but the detail page does not. When an invalid event is loaded directly via URL, normalizePerformanceScore is called but fails to add the expected score.* measurements. The component then attempts to access properties like measurements['score.fcp'].value, resulting in a TypeError because the score object is undefined.
💡 Suggested Fix
In WebVitalsDetail.tsx, before rendering the details, add checks to ensure that the loaded event is a 'pageload' event and that the necessary measurements and score.* properties exist after normalization. This will prevent the component from attempting to access properties on undefined objects.
🤖 Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location:
packages/spotlight/src/ui/telemetry/components/insights/webVitals/index.tsx#L56-L58
Potential issue: The `WebVitalsDetail.tsx` component can crash if a user navigates
directly to a detail page for an event that is not a 'pageload' event or lacks a
`measurements` object. The list view in `index.tsx` correctly filters for
`event?.contexts?.trace?.op === 'pageload'`, but the detail page does not. When an
invalid event is loaded directly via URL, `normalizePerformanceScore` is called but
fails to add the expected `score.*` measurements. The component then attempts to access
properties like `measurements['score.fcp'].value`, resulting in a `TypeError` because
the score object is undefined.
Did we get this right? 👍 / 👎 to inform future reviews.
Reference ID: 8311977
Summary
Adds a null safety filter to the WebVitals component to prevent
TypeError: Cannot read properties of undefined (reading 'value')when sorting events that don't have score measurements after normalization.Changes
Filters out events without a valid
score.totalafternormalizePerformanceScore()runs. This ensures the comparators never encounter events with missing measurements.Fixes SPOTLIGHT-ELECTRON-4X
Fixes SPOTLIGHT-ELECTRON-4Q