fix(browser): Wait until response has finished streaming before calling fetch handlers

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/get/subject.js

@@ -1,3 +1,5 @@
-fetch('http://localhost:7654/foo').then(() => {
- Sentry.captureException('test error');
-});
+fetch('http://localhost:7654/foo')
+ .then(res => res.text())
+ .then(() => {
+ Sentry.captureException('test error');
+ });

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/getWithRequestObj/subject.js

@@ -1,3 +1,5 @@
-fetch(new Request('http://localhost:7654/foo')).then(() => {
- Sentry.captureException('test error');
-});
+fetch(new Request('http://localhost:7654/foo'))
+ .then(res => res.text())
+ .then(() => {
+ Sentry.captureException('test error');
+ });

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/post/subject.js

@@ -6,6 +6,8 @@ fetch('http://localhost:7654/foo', {
  'Content-Type': 'application/json',
  Cache: 'no-cache',
  },
-}).then(() => {
- Sentry.captureException('test error');
-});
+})
+ .then(res => res.text())
+ .then(() => {
+ Sentry.captureException('test error');
+ });

dev-packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureRequestBody/test.ts

@@ -42,10 +42,12 @@ sentryTest('captures text request body', async ({ getLocalTestPath, page, browse
  fetch('http://localhost:7654/foo', {
  method: 'POST',
  body: 'input body',
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 
@@ -122,10 +124,12 @@ sentryTest('captures JSON request body', async ({ getLocalTestPath, page, browse
  fetch('http://localhost:7654/foo', {
  method: 'POST',
  body: '{"foo":"bar"}',
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 
@@ -206,10 +210,12 @@ sentryTest('captures non-text request body', async ({ getLocalTestPath, page, br
  fetch('http://localhost:7654/foo', {
  method: 'POST',
  body: body,
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 
@@ -286,10 +292,12 @@ sentryTest('captures text request body when matching relative URL', async ({ get
  fetch('/foo', {
  method: 'POST',
  body: 'input body',
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 
@@ -364,10 +372,12 @@ sentryTest('does not capture request body when URL does not match', async ({ get
  fetch('http://localhost:7654/bar', {
  method: 'POST',
  body: 'input body',
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 

dev-packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureRequestHeaders/test.ts

@@ -38,14 +38,14 @@ sentryTest.skip('handles empty/missing request headers', async ({ getLocalTestPa
  await page.goto(url);
 
  await page.evaluate(() => {
- /* eslint-disable */
  fetch('http://localhost:7654/foo', {
  method: 'POST',
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
- /* eslint-enable */
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  });
 
  const request = await requestPromise;
@@ -121,10 +121,12 @@ sentryTest('captures request headers as POJO', async ({ getLocalTestPath, page,
  'X-Custom-Header': 'foo',
  'X-Test-Header': 'test-value',
  },
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 
@@ -206,10 +208,12 @@ sentryTest('captures request headers on Request', async ({ getLocalTestPath, pag
  },
  });
  /* eslint-disable */
- fetch(request).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ fetch(request)
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 
@@ -291,10 +295,12 @@ sentryTest('captures request headers as Headers instance', async ({ getLocalTest
  fetch('http://localhost:7654/foo', {
  method: 'POST',
  headers,
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 
@@ -375,10 +381,12 @@ sentryTest('does not captures request headers if URL does not match', async ({ g
  'X-Custom-Header': 'foo',
  'X-Test-Header': 'test-value',
  },
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 

dev-packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureRequestSize/test.ts

@@ -42,10 +42,12 @@ sentryTest.skip('captures request body size when body is sent', async ({ getLoca
  fetch('http://localhost:7654/foo', {
  method: 'POST',
  body: '{"foo":"bar"}',
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 
@@ -129,10 +131,12 @@ sentryTest('captures request size from non-text request body', async ({ getLocal
  fetch('http://localhost:7654/foo', {
  method: 'POST',
  body: blob,
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 

dev-packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureResponseBody/test.ts

@@ -42,10 +42,12 @@ sentryTest('captures text response body', async ({ getLocalTestPath, page, brows
  /* eslint-disable */
  fetch('http://localhost:7654/foo', {
  method: 'POST',
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 
@@ -124,10 +126,12 @@ sentryTest('captures JSON response body', async ({ getLocalTestPath, page, brows
  /* eslint-disable */
  fetch('http://localhost:7654/foo', {
  method: 'POST',
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 
@@ -206,10 +210,12 @@ sentryTest('captures non-text response body', async ({ getLocalTestPath, page, b
  /* eslint-disable */
  fetch('http://localhost:7654/foo', {
  method: 'POST',
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 
@@ -288,10 +294,12 @@ sentryTest.skip('does not capture response body when URL does not match', async
  /* eslint-disable */
  fetch('http://localhost:7654/bar', {
  method: 'POST',
- }).then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ })
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  /* eslint-enable */
  });
 

dev-packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureResponseHeaders/test.ts

@@ -38,10 +38,12 @@ sentryTest('handles empty headers', async ({ getLocalTestPath, page, browserName
  await page.goto(url);
 
  await page.evaluate(() => {
- fetch('http://localhost:7654/foo').then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ fetch('http://localhost:7654/foo')
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  });
 
  const request = await requestPromise;
@@ -112,10 +114,12 @@ sentryTest('captures response headers', async ({ getLocalTestPath, page }) => {
  await page.goto(url);
 
  await page.evaluate(() => {
- fetch('http://localhost:7654/foo').then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ fetch('http://localhost:7654/foo')
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  });
 
  const request = await requestPromise;
@@ -192,10 +196,12 @@ sentryTest('does not capture response headers if URL does not match', async ({ g
  await page.goto(url);
 
  await page.evaluate(() => {
- fetch('http://localhost:7654/bar').then(() => {
- // @ts-expect-error Sentry is a global
- Sentry.captureException('test error');
- });
+ fetch('http://localhost:7654/bar')
+ .then(res => res.text())
+ .then(() => {
+ // @ts-expect-error Sentry is a global
+ Sentry.captureException('test error');
+ });
  });
 
  const request = await requestPromise;