fix(replay): Expand replay user.geo tag if an object is found (#91885)

This is a followup on #91869 and
#91854 to fix
[JAVASCRIPT-30NR](https://sentry.io/organizations/sentry/issues/?project=11276&query=JAVASCRIPT-30NR)

Now we're taking special care to unpack the `user.geo.*` fields and show
them as individual tags:
<img width="605" alt="SCR-20250519-kmta"
src="https://github.com/user-attachments/assets/ebb74fbf-0a21-4f67-8f21-c4e6a2fcf16d"
/>

---

I tried using [`flattie`](https://www.npmjs.com/package/flattie) which
is already part of our package.json but it was recursing into our arrays
which we expect as the final values from the db. Dealing with that would
require a manual recursive pass, which defeats the purpose.

Author: ryan953

static/app/utils/replays/replayDataUtils.tsx

@@ -1,4 +1,5 @@
 import invariant from 'invariant';
+import isPlainObject from 'lodash/isPlainObject';
 import {duration} from 'moment-timezone';
 
 import {deviceNameMapper} from 'sentry/components/deviceName';
@@ -10,13 +11,23 @@ const defaultValues = {
   has_viewed: false,
 };
 
-export function mapResponseToReplayRecord(apiResponse: any): ReplayRecord {
-  // Marshal special fields into tags
-  const user = Object.fromEntries(
-    Object.entries(apiResponse.user)
+function mapUser(user: any): ReplayRecord['tags'] {
+  return Object.fromEntries(
+    Object.entries(user)
       .filter(([key, value]) => key !== 'display_name' && value)
-      .map(([key, value]) => [`user.${key}`, [value]])
+      .flatMap(([key, value]) => {
+        if (isPlainObject(value)) {
+          return Object.entries(value as Record<PropertyKey, unknown>).map(
+            ([subKey, subValue]) => [`user.${key}.${subKey}`, [String(subValue)]]
+          );
+        }
+        return [[`user.${key}`, [String(value)]]];
+      })
   );
+}
+
+export function mapResponseToReplayRecord(apiResponse: any): ReplayRecord {
+  // Marshal special fields into tags
   const unorderedTags: ReplayRecord['tags'] = {
     ...apiResponse.tags,
     ...(apiResponse.browser?.name ? {'browser.name': [apiResponse.browser.name]} : {}),
@@ -40,7 +51,7 @@ export function mapResponseToReplayRecord(apiResponse: any): ReplayRecord {
     ...(apiResponse.os?.version ? {'os.version': [apiResponse.os.version]} : {}),
     ...(apiResponse.sdk?.name ? {'sdk.name': [apiResponse.sdk.name]} : {}),
     ...(apiResponse.sdk?.version ? {'sdk.version': [apiResponse.sdk.version]} : {}),
-    ...user,
+    ...mapUser(apiResponse.user ?? {}),
   };
 
   // Stringify everything, so we don't try to render objects or something strange

static/app/views/replays/types.tsx

@@ -1,5 +1,14 @@
 import type {Duration} from 'moment-timezone';
 
+type Geo = Record<string, string>;
+// Geo could be this, not sure:
+// {
+//   city?: string;
+//   country_code?: string;
+//   region?: string;
+//   subdivision?: string;
+// };
+
 // Keep this in sync with the backend blueprint
 // "ReplayRecord" is distinct from the common: "replay = new ReplayReader()"
 export type ReplayRecord = {
@@ -78,6 +87,7 @@ export type ReplayRecord = {
     id: null | string;
     ip: null | string;
     username: null | string;
+    geo?: Geo;
   };
   /**
    * The number of dead clicks associated with the replay.