Restrict resource capturing to max resource upload limit (#1898)

amandeepsingh333 · web-flow · commit 9ff3ac317c0c · 2025-04-17T13:18:55.000+05:30
* limited resources to max limit

* coverage

* resolved

* resolved comments

* changed logic
diff --git a/packages/core/src/discovery.js b/packages/core/src/discovery.js
@@ -451,6 +451,12 @@ export function createDiscoveryQueue(percy) {
                 return resource;
               },
               saveResource: r => {
+                const limitResources = process.env.LIMIT_SNAPSHOT_RESOURCES || false;
+                const MAX_RESOURCES = Number(process.env.MAX_SNAPSHOT_RESOURCES) || 749;
+                if (limitResources && snapshot.resources.size >= MAX_RESOURCES) {
+                  percy.log.debug(`Skipping resource ${r.url} — resource limit reached`);
+                  return;
+                }
                 snapshot.resources.set(r.url, r);
                 if (!snapshot.discovery.disableCache) {
                   cache.set(r.url, r);
diff --git a/packages/core/test/discovery.test.js b/packages/core/test/discovery.test.js
@@ -51,11 +51,17 @@ describe('Discovery', () => {
       return [201, { data: { id: '4567' } }];
     });
 
+    const dynamicImageRoutes = {};
+    for (let i = 0; i < 800; i++) {
+      dynamicImageRoutes[`/dynamic/image-${i}.png`] = () => [200, 'image/png', pixel];
+    }
+
     server = await createTestServer({
       '/': () => [200, 'text/html', testDOM],
       '/style.css': () => [200, 'text/css', testCSS],
       '/img.gif': () => [200, 'image/gif', pixel],
-      '/font.woff': () => [200, 'font/woff', '<font>']
+      '/font.woff': () => [200, 'font/woff', '<font>'],
+      ...dynamicImageRoutes
     });
 
     percy = await Percy.start({
@@ -1377,6 +1383,63 @@ describe('Discovery', () => {
     });
   });
 
+  describe('Discovery with resource limit flag', () => {
+    const testDOM1 = dedent`
+      <html>
+        <head>
+          <link href="style.css" rel="stylesheet"/>
+        </head>
+        <body>
+          <p>Hello Percy!</p>
+          <img src="img.gif" decoding="async"/>
+          ${Array.from({ length: 800 }, (_, i) =>
+            `<img src="/dynamic/image-${i}.png" />`
+          ).join('\n')}
+        </body>
+      </html>
+    `;
+    it('limits resources when the flags are set', async () => {
+      percy.loglevel('debug');
+      process.env.LIMIT_SNAPSHOT_RESOURCES = true;
+      process.env.MAX_SNAPSHOT_RESOURCES = 1;
+      await percy.snapshot({
+        name: 'test snapshot',
+        url: 'http://localhost:8000',
+        domSnapshot: testDOM1
+      });
+
+      await percy.idle();
+      expect(captured[0].length).toBeLessThanOrEqual(2); // 1 root + 1 non root
+      expect(logger.stderr).toContain(jasmine.stringMatching(/resource limit reached/));
+    });
+
+    it('does not limit resources when the limit flag is not set', async () => {
+      delete process.env.LIMIT_SNAPSHOT_RESOURCES;
+      await percy.snapshot({
+        name: 'test snapshot',
+        url: 'http://localhost:8000',
+        domSnapshot: testDOM1
+      });
+      await percy.idle();
+      expect(captured[0].length).toBeGreaterThanOrEqual(1);
+      expect(logger.stderr).not.toContain(jasmine.stringMatching(/resource limit reached/));
+      delete process.env.MAX_SNAPSHOT_RESOURCES;
+    });
+
+    it('limit resources when flag is set but for default limit', async () => {
+      percy.loglevel('debug');
+      process.env.LIMIT_SNAPSHOT_RESOURCES = true;
+      await percy.snapshot({
+        name: 'test snapshot',
+        url: 'http://localhost:8000',
+        domSnapshot: testDOM1
+      });
+      await percy.idle();
+      expect(captured[0].length).toBeLessThanOrEqual(750);
+      expect(logger.stderr).toContain(jasmine.stringMatching(/resource limit reached/));
+    });
+  });
+
   describe('discovery retry', () => {
     let Page;
     let fastCount;
