build: send url without hash to sentry (#6352)

* build: send url without hash to sentry

* comments

* Update src/tracing/index.ts
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* Update src/tracing/index.ts
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* add test

* move files around

src/tracing/errors.ts

@@ -6,6 +6,20 @@ function isEthersRequestError(error: Error): error is Error & { requestBody: str
   return 'requestBody' in error && typeof (error as unknown as Record<'requestBody', unknown>).requestBody === 'string'
 }
 
+export function beforeSend(event: ErrorEvent, hint: EventHint) {
+  /*
+   * Since the interface currently uses HashRouter, URLs will have a # before the path.
+   * This leads to issues when we send the URL into Sentry, as the path gets parsed as a "fragment".
+   * Instead, this logic removes the # part of the URL.
+   * See https://romain-clement.net/articles/sentry-url-fragments/#url-fragments
+   **/
+  if (event.request?.url) {
+    event.request.url = event.request.url.replace('/#', '')
+  }
+
+  return filterKnownErrors(event, hint)
+}
+
 /**
  * Filters known (ignorable) errors out before sending them to Sentry.
  * Intended as a {@link ClientOptions.beforeSend} callback. Returning null filters the error from Sentry.

src/tracing/index.ts

@@ -7,7 +7,7 @@ import { SharedEventName } from '@uniswap/analytics-events'
 import { isSentryEnabled } from 'utils/env'
 import { getEnvName, isProductionEnv } from 'utils/env'
 
-import { filterKnownErrors } from './errors'
+import { beforeSend } from './errors'
 
 export { trace } from './trace'
 
@@ -30,7 +30,7 @@ Sentry.init({
       startTransactionOnPageLoad: true,
     }),
   ],
-  beforeSend: filterKnownErrors,
+  beforeSend,
 })
 
 initializeAnalytics(AMPLITUDE_DUMMY_KEY, OriginApplication.INTERFACE, {

src/tracing/trace.test.ts

@@ -2,9 +2,11 @@ import '@sentry/tracing' // required to populate Sentry.startTransaction, which
 
 import * as Sentry from '@sentry/react'
 import { Transaction } from '@sentry/tracing'
+import { ErrorEvent, EventHint } from '@sentry/types'
 import assert from 'assert'
 import { mocked } from 'test-utils/mocked'
 
+import { beforeSend } from './errors'
 import { trace } from './trace'
 
 jest.mock('@sentry/react', () => {
@@ -85,6 +87,41 @@ describe('trace', () => {
     })
   })
 
+  describe('beforeSend', () => {
+    it('handles no path', async () => {
+      const errorEvent: ErrorEvent = {
+        type: undefined,
+        request: {
+          url: 'https://app.uniswap.org',
+        },
+      }
+      const eventHint: EventHint = {}
+      expect((beforeSend(errorEvent, eventHint) as ErrorEvent)?.request?.url).toEqual('https://app.uniswap.org')
+    })
+
+    it('handles hash with path', async () => {
+      const errorEvent: ErrorEvent = {
+        type: undefined,
+        request: {
+          url: 'https://app.uniswap.org/#/pools',
+        },
+      }
+      const eventHint: EventHint = {}
+      expect((beforeSend(errorEvent, eventHint) as ErrorEvent)?.request?.url).toEqual('https://app.uniswap.org/pools')
+    })
+
+    it('handles just hash', async () => {
+      const errorEvent: ErrorEvent = {
+        type: undefined,
+        request: {
+          url: 'https://app.uniswap.org/#',
+        },
+      }
+      const eventHint: EventHint = {}
+      expect((beforeSend(errorEvent, eventHint) as ErrorEvent)?.request?.url).toEqual('https://app.uniswap.org')
+    })
+  })
+
   describe('setTraceStatus', () => {
     it('sets a transaction status with a string', async () => {
       await trace('test', ({ setTraceStatus }) => {