Limit number of GraphQL requests tracked in performance bar to 10

Previously, we only tracked up to 2 requests to the same URL in the
performance bar. For GraphQL, we removed that limit as the URL is the
same for all GraphQL requests, and we didn't want to miss anything that
was genuinely new.

However, with no limit, if we poll using GraphQL then we'll end up with
this store increasing forever. So we set a higher - but still reasonable
- limit of 10 GraphQL requests to be stored in the performance bar.
Other requests can still be added manually by request ID as normal.

app/assets/javascripts/performance_bar/stores/performance_bar_store.js

@@ -47,10 +47,15 @@ export default class PerformanceBarStore {
   }
 
   canTrackRequest(requestUrl) {
-    return (
-      requestUrl.endsWith('/api/graphql') ||
-      this.requests.filter((request) => request.url === requestUrl).length < 2
-    );
+    // We want to store at most 2 unique requests per URL, as additional
+    // requests to the same URL probably aren't very interesting.
+    //
+    // GraphQL requests are the exception: because all GraphQL requests
+    // go to the same URL, we set a higher limit of 10 to allow
+    // capturing different queries a page may make.
+    const requestsLimit = requestUrl.endsWith('/api/graphql') ? 10 : 2;
+
+    return this.requests.filter((request) => request.url === requestUrl).length < requestsLimit;
   }
 
   static truncateUrl(requestUrl) {

changelogs/unreleased/limit-graphql-requests-in-performance-bar.yml

+---
+title: Limit number of GraphQL requests tracked in performance bar to 10
+merge_request: 59158
+author:
+type: performance

spec/frontend/performance_bar/stores/performance_bar_store_spec.js

@@ -59,4 +59,44 @@ describe('PerformanceBarStore', () => {
       expect(store.findRequest('id').details.test.calls).toEqual(123);
     });
   });
+
+  describe('canTrackRequest', () => {
+    let store;
+
+    beforeEach(() => {
+      store = new PerformanceBarStore();
+    });
+
+    it('limits to 10 requests for GraphQL', () => {
+      expect(store.canTrackRequest('https://gitlab.com/api/graphql')).toBe(true);
+
+      store.addRequest('0', 'https://gitlab.com/api/graphql');
+      store.addRequest('1', 'https://gitlab.com/api/graphql');
+      store.addRequest('2', 'https://gitlab.com/api/graphql');
+      store.addRequest('3', 'https://gitlab.com/api/graphql');
+      store.addRequest('4', 'https://gitlab.com/api/graphql');
+      store.addRequest('5', 'https://gitlab.com/api/graphql');
+      store.addRequest('6', 'https://gitlab.com/api/graphql');
+      store.addRequest('7', 'https://gitlab.com/api/graphql');
+      store.addRequest('8', 'https://gitlab.com/api/graphql');
+
+      expect(store.canTrackRequest('https://gitlab.com/api/graphql')).toBe(true);
+
+      store.addRequest('9', 'https://gitlab.com/api/graphql');
+
+      expect(store.canTrackRequest('https://gitlab.com/api/graphql')).toBe(false);
+    });
+
+    it('limits to 2 requests for all other URLs', () => {
+      expect(store.canTrackRequest('https://gitlab.com/api/v4/users/1')).toBe(true);
+
+      store.addRequest('a', 'https://gitlab.com/api/v4/users/1');
+
+      expect(store.canTrackRequest('https://gitlab.com/api/v4/users/1')).toBe(true);
+
+      store.addRequest('b', 'https://gitlab.com/api/v4/users/1');
+
+      expect(store.canTrackRequest('https://gitlab.com/api/v4/users/1')).toBe(false);
+    });
+  });
 });