Merge branch 'limit-graphql-requests-in-performance-bar' into 'master'

Limit number of GraphQL requests tracked in performance bar to 10

See merge request gitlab-org/gitlab!59158

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);
+    });
+  });
 });