fix(replay): Fixes type error if same param is in url (#68851)

There are edge cases where getParamValue() will have a return type of
string[] due to `location.query[key]` which caused the type error. This
edge case happens when the same key is in the URL more than once, which
could happen if someone pastes the url twice.
We are expecting a string from this function, so if
`location.query[key]` is an array, we will just return the first value
in the array.

Fixes JAVASCRIPT-2SFK

Author: c298lee

static/app/utils/useUrlParams.spec.tsx

@@ -8,14 +8,15 @@ import useUrlParams from './useUrlParams';
 jest.mock('react-router');
 jest.mock('sentry/utils/useLocation');
 
-type Query = {limit: string; page: string};
+type Query = {array: string[]; limit: string; page: string};
 
 describe('useUrlParams', () => {
   beforeEach(() => {
     jest.mocked(browserHistory.getCurrentLocation).mockReturnValue({
       query: {
         page: '3',
         limit: '50',
+        array: ['first', 'second'],
       },
     } as Location<Query>);
   });
@@ -25,6 +26,7 @@ describe('useUrlParams', () => {
 
     expect(result.current.getParamValue('page')).toBe('3');
     expect(result.current.getParamValue('limit')).toBe('50');
+    expect(result.current.getParamValue('array')).toBe('first');
     expect(result.current.getParamValue('foo')).toBeUndefined();
   });
 
@@ -54,6 +56,7 @@ describe('useUrlParams', () => {
 
     expect(browserHistory.push).toHaveBeenCalledWith({
       query: {
+        array: ['first', 'second'],
         page: '4',
         limit: '50',
       },
@@ -69,6 +72,7 @@ describe('useUrlParams', () => {
 
     expect(browserHistory.push).toHaveBeenCalledWith({
       query: {
+        array: ['first', 'second'],
         page: '4',
         limit: '50',
       },

static/app/utils/useUrlParams.tsx

@@ -20,7 +20,10 @@ function useUrlParams(defaultKey?: string, defaultValue?: string) {
   const getParamValue = useCallback(
     (key: string) => {
       const location = browserHistory.getCurrentLocation();
-      return location.query[key] ?? defaultValue;
+      // location.query.key can return string[] but we expect a singular value from this function, so we return the first string (this is picked arbitrarily) if it's string[]
+      return Array.isArray(location.query[key])
+        ? location.query[key]?.at(0) ?? defaultValue
+        : location.query[key] ?? defaultValue;
     },
     [defaultValue]
   );