fix: filter CSS related 499 chunk errors (#6417)

* add in css errors

* rm console

* change code

src/tracing/errors.test.ts

@@ -58,11 +58,22 @@ describe('filterKnownErrors', () => {
       expect(filterKnownErrors(ERROR, { originalException })).toBeNull()
     })
 
+    it('filters 499 error coded CSS chunk error', () => {
+      jest.spyOn(window.performance, 'getEntriesByType').mockReturnValue([
+        {
+          name: 'https://app.uniswap.org/static/css/12.d5b3cfe3.chunk.css',
+          responseStatus: 499,
+        } as PerformanceEntry,
+      ])
+      const originalException = new Error('Loading CSS chunk 12 failed. (./static/css/12.d5b3cfe3.chunk.css)')
+      expect(filterKnownErrors(ERROR, { originalException })).toBeNull()
+    })
+
     it('keeps error when status is different than 499', () => {
       jest.spyOn(window.performance, 'getEntriesByType').mockReturnValue([
         {
           name: 'https://app.uniswap.org/static/js/20.d55382e0.chunk.js',
-          responseStatus: 200,
+          responseStatus: 400,
         } as PerformanceEntry,
       ])
       const originalException = new Error(
@@ -71,6 +82,17 @@ describe('filterKnownErrors', () => {
       expect(filterKnownErrors(ERROR, { originalException })).not.toBeNull()
     })
 
+    it('keeps CSS error when status is different than 499', () => {
+      jest.spyOn(window.performance, 'getEntriesByType').mockReturnValue([
+        {
+          name: 'https://app.uniswap.org/static/css/12.d5b3cfe3.chunk.css',
+          responseStatus: 400,
+        } as PerformanceEntry,
+      ])
+      const originalException = new Error('Loading CSS chunk 12 failed. (./static/css/12.d5b3cfe3.chunk.css)')
+      expect(filterKnownErrors(ERROR, { originalException })).not.toBeNull()
+    })
+
     it('filters out error when resource is missing', () => {
       jest.spyOn(window.performance, 'getEntriesByType').mockReturnValue([])
       const originalException = new Error(

src/tracing/errors.ts

@@ -29,6 +29,19 @@ export function beforeSend(event: ErrorEvent, hint: EventHint) {
   return filterKnownErrors(event, hint)
 }
 
+function shouldFilterChunkError(asset?: string) {
+  const entries = [...(performance?.getEntriesByType('resource') ?? [])]
+  const resource = entries?.find(({ name }) => name === asset)
+  const status = resource?.responseStatus
+
+  /*
+   * If the status if 499, then we ignore.
+   * If there's no status (meaning the browser doesn't support `responseStatus`) then we also ignore.
+   * These errors are likely also 499 errors, and we can catch any spikes in non-499 chunk errors via other browsers.
+   */
+  return !status || status === 499
+}
+
 /**
  * Filters known (ignorable) errors out before sending them to Sentry.
  * Intended as a {@link ClientOptions.beforeSend} callback. Returning null filters the error from Sentry.
@@ -56,18 +69,13 @@ export const filterKnownErrors: Required<ClientOptions>['beforeSend'] = (event:
      */
     if (error.message.match(/Loading chunk \d+ failed\. \(error: .+\.chunk\.js\)/)) {
       const asset = error.message.match(/https?:\/\/.+?\.chunk\.js/)?.[0]
-      const entries = [...(performance?.getEntriesByType('resource') ?? [])]
-      const resource = entries?.find(({ name }) => name === asset)
-      const status = resource?.responseStatus
+      if (shouldFilterChunkError(asset)) return null
+    }
 
-      /*
-       * If the status if 499, then we ignore.
-       * If there's no status (meaning the browser doesn't support `responseStatus`) then we also ignore.
-       * These errors are likely also 499 errors, and we can catch any spikes in non-499 chunk errors via other browsers.
-       */
-      if (!status || status === 499) {
-        return null
-      }
+    if (error.message.match(/Loading CSS chunk \d+ failed\. \(.+\.chunk\.css\)/)) {
+      const relativePath = error.message.match(/\/static\/css\/.*\.chunk\.css/)?.[0]
+      const asset = `https://app.uniswap.org${relativePath}`
+      if (shouldFilterChunkError(asset)) return null
     }
 
     /*