fix(replay): Add error boundary for "Tags" tab (#91854)

The replay "Tags" tab is crashing because `user.geo` is an object, but
the component expects a string. This PR just adds an error boundary so
that only the un-renderable row is affected.

Fixes JAVASCRIPT-30NR

Author: billyvg

static/app/components/replays/replayTagsTableRow.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import type {LocationDescriptor} from 'history';
 
 import {Tooltip} from 'sentry/components/core/tooltip';
+import ErrorBoundary from 'sentry/components/errorBoundary';
 import {AnnotatedText} from 'sentry/components/events/meta/annotatedText';
 import {KeyValueTableRow} from 'sentry/components/keyValueTable';
 import Link from 'sentry/components/links/link';
@@ -108,21 +109,23 @@ function ReplayTagsTableRow({name, values, generateUrl}: Props) {
         </StyledTooltip>
       }
       value={
-        <ValueContainer>
-          <StyledTooltip
-            disabled={releaseKeys.includes(name)}
-            overlayStyle={
-              expandedViewKeys.includes(name) ? {textAlign: 'left'} : undefined
-            }
-            title={
-              expandedViewKeys.includes(name) ? renderValueList(values) : renderTagValue
-            }
-            isHoverable
-            showOnlyOnOverflow
-          >
-            {renderTagValue}
-          </StyledTooltip>
-        </ValueContainer>
+        <ErrorBoundary mini>
+          <ValueContainer>
+            <StyledTooltip
+              disabled={releaseKeys.includes(name)}
+              overlayStyle={
+                expandedViewKeys.includes(name) ? {textAlign: 'left'} : undefined
+              }
+              title={
+                expandedViewKeys.includes(name) ? renderValueList(values) : renderTagValue
+              }
+              isHoverable
+              showOnlyOnOverflow
+            >
+              {renderTagValue}
+            </StyledTooltip>
+          </ValueContainer>
+        </ErrorBoundary>
       }
     />
   );

static/app/views/replays/detail/tagPanel/index.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import type {LocationDescriptor} from 'history';
 
 import EmptyMessage from 'sentry/components/emptyMessage';
+import ErrorBoundary from 'sentry/components/errorBoundary';
 import {KeyValueTable} from 'sentry/components/keyValueTable';
 import Placeholder from 'sentry/components/placeholder';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
@@ -73,29 +74,31 @@ export default function TagPanel() {
   const filteredTags = Object.entries(items);
 
   return (
-    <PaddedFluidHeight>
-      <TagFilters tags={tags} {...filterProps} />
-      <TabItemContainer>
-        <StyledPanel>
-          <FluidPanel>
-            {filteredTags.length ? (
-              <KeyValueTable noMargin>
-                {filteredTags.map(([key, values]) => (
-                  <ReplayTagsTableRow
-                    key={key}
-                    name={key}
-                    values={values}
-                    generateUrl={key.includes('sdk.replay.') ? undefined : generateUrl}
-                  />
-                ))}
-              </KeyValueTable>
-            ) : (
-              <EmptyMessage>{t('No tags for this replay were found.')}</EmptyMessage>
-            )}
-          </FluidPanel>
-        </StyledPanel>
-      </TabItemContainer>
-    </PaddedFluidHeight>
+    <ErrorBoundary mini>
+      <PaddedFluidHeight>
+        <TagFilters tags={tags} {...filterProps} />
+        <TabItemContainer>
+          <StyledPanel>
+            <FluidPanel>
+              {filteredTags.length ? (
+                <KeyValueTable noMargin>
+                  {filteredTags.map(([key, values]) => (
+                    <ReplayTagsTableRow
+                      key={key}
+                      name={key}
+                      values={values}
+                      generateUrl={key.includes('sdk.replay.') ? undefined : generateUrl}
+                    />
+                  ))}
+                </KeyValueTable>
+              ) : (
+                <EmptyMessage>{t('No tags for this replay were found.')}</EmptyMessage>
+              )}
+            </FluidPanel>
+          </StyledPanel>
+        </TabItemContainer>
+      </PaddedFluidHeight>
+    </ErrorBoundary>
   );
 }