fix(insights): Fix user and replay columns not displaying properly in Webvitals EAP (#91572)

Fixes and issue where user and replay columns on the EAP dataset in
Webvitals wasn't displaying properly. This is because there no longer
exists a field that coalesces on multiple `user.*` columns in the api,
so we handle this in the frontend by querying all user columns and
coalesce ourselves. Same for replay ids.

Author: edwardgou-sentry

static/app/views/insights/browser/webVitals/queries/useSpanSamplesWebVitalsQuery.tsx

@@ -104,8 +104,12 @@ export function useSpanSamplesWebVitalsQuery({
         SpanIndexedField.TOTAL_SCORE,
         SpanIndexedField.TRACE,
         SpanIndexedField.PROFILE_ID,
-        SpanIndexedField.REPLAY,
-        SpanIndexedField.USER_DISPLAY,
+        SpanIndexedField.REPLAY_ID,
+        SpanIndexedField.REPLAYID,
+        SpanIndexedField.USER_EMAIL,
+        SpanIndexedField.USER_USERNAME,
+        SpanIndexedField.USER_ID,
+        SpanIndexedField.USER_IP,
         SpanIndexedField.PROJECT,
         SpanIndexedField.SPAN_DESCRIPTION,
         SpanIndexedField.TIMESTAMP,
@@ -126,8 +130,12 @@ export function useSpanSamplesWebVitalsQuery({
           return {
             ...row,
             [`measurements.${webVital}`]: row[ratioField] > 0 ? row[field] : undefined,
-            'user.display': row[SpanIndexedField.USER_DISPLAY],
-            replayId: row[SpanIndexedField.REPLAY],
+            'user.display':
+              row[SpanIndexedField.USER_EMAIL] ??
+              row[SpanIndexedField.USER_USERNAME] ??
+              row[SpanIndexedField.USER_ID] ??
+              row[SpanIndexedField.USER_IP],
+            replayId: row[SpanIndexedField.REPLAY_ID] ?? row[SpanIndexedField.REPLAYID],
             'profile.id': row[SpanIndexedField.PROFILE_ID],
             totalScore: Math.round((row[`measurements.score.total`] ?? 0) * 100),
             inpScore: Math.round((row[SpanIndexedField.INP_SCORE_RATIO] ?? 0) * 100),

static/app/views/insights/browser/webVitals/views/pageOverview.spec.tsx

@@ -146,8 +146,12 @@ describe('PageOverview', function () {
               'measurements.score.total',
               'trace',
               'profile_id',
-              'replay',
-              'user.display',
+              'replay.id',
+              'replayId',
+              'user.email',
+              'user.username',
+              'user.id',
+              'user.ip',
               'project',
               'span.description',
               'timestamp',
@@ -197,8 +201,12 @@ describe('PageOverview', function () {
               'measurements.score.total',
               'trace',
               'profile_id',
-              'replay',
-              'user.display',
+              'replay.id',
+              'replayId',
+              'user.email',
+              'user.username',
+              'user.id',
+              'user.ip',
               'project',
               'span.description',
               'timestamp',

static/app/views/insights/types.tsx

@@ -340,6 +340,7 @@ export enum SpanIndexedField {
   RELEASE = 'release',
   TRANSACTION = 'transaction',
   ORIGIN_TRANSACTION = 'origin.transaction',
+  REPLAYID = 'replayId',
   REPLAY_ID = 'replay.id',
   REPLAY = 'replay', // Field alias that coalesces `replay.id` and `replayId`
   BROWSER_NAME = 'browser.name',
@@ -434,6 +435,7 @@ export type SpanIndexedResponse = {
   [SpanIndexedField.HTTP_RESPONSE_CONTENT_LENGTH]: string;
   [SpanIndexedField.ORIGIN_TRANSACTION]: string;
   [SpanIndexedField.REPLAY_ID]: string;
+  [SpanIndexedField.REPLAYID]: string;
   [SpanIndexedField.REPLAY]: string;
   [SpanIndexedField.BROWSER_NAME]: string;
   [SpanIndexedField.USER]: string;