Skip to content

fix(utils): Handle when requests get aborted in fetch instrumentation #13202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 5, 2024
Merged

fix(utils): Handle when requests get aborted in fetch instrumentation #13202

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7da58d1
fix(utils): Handle when requests get aborted
AbhiPrasad Aug 2, 2024
6cdcd73
test: Add browser integration test for AbortController
chargome Aug 5, 2024
ac407b3
unflake
lforst Aug 5, 2024
a7c8c1b
Merge remote-tracking branch 'origin/develop' into abhi-fetch-abort-c…
lforst Aug 5, 2024
43c6200
Assert on console log
lforst Aug 5, 2024
cd5e89d
this time actually
lforst Aug 5, 2024
62f5fbd
skip non-tracing tests
lforst Aug 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions ...rowser-integration-tests/suites/integrations/httpclient/fetch/withAbortController/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import * as Sentry from '@sentry/browser';

window.Sentry = Sentry;

Sentry.init({
dsn: 'https://[email protected]/1337',
integrations: [Sentry.browserTracingIntegration()],
tracesSampleRate: 1,
});
28 changes: 28 additions & 0 deletions ...ser-integration-tests/suites/integrations/httpclient/fetch/withAbortController/subject.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
let controller;

const startFetch = e => {
controller = new AbortController();
const { signal } = controller;

fetch('http://localhost:7654/foo', { signal })
.then(response => response.json())
.then(data => {
console.log('Fetch succeeded:', data);
})
.catch(err => {
if (err.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.error('Fetch error:', err);
}
});
};

const abortFetch = e => {
if (controller) {
controller.abort();
}
};

document.querySelector('[data-test-id=start-button]').addEventListener('click', startFetch);
document.querySelector('[data-test-id=abort-button]').addEventListener('click', abortFetch);
10 changes: 10 additions & 0 deletions ...-integration-tests/suites/integrations/httpclient/fetch/withAbortController/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button data-test-id="start-button">Start fetch</button>
<button data-test-id="abort-button">Abort fetch</button>
</body>
</html>
37 changes: 37 additions & 0 deletions ...rowser-integration-tests/suites/integrations/httpclient/fetch/withAbortController/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { expect } from '@playwright/test';
import type { Event as SentryEvent } from '@sentry/types';
import { sentryTest } from '../../../../../utils/fixtures';
import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';

sentryTest('should handle aborted fetch calls', async ({ getLocalTestPath, page }) => {
const url = await getLocalTestPath({ testDir: __dirname });

await page.route('**/foo', async route => {
setTimeout(() => {
route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ message: 'This is the server response' }),
});
}, 2000);
});

await page.goto(url);

await page.locator('[data-test-id=start-button]').click();
await page.waitForTimeout(500);
await page.locator('[data-test-id=abort-button]').click();
const eventData = await getFirstSentryEnvelopeRequest<SentryEvent>(page);

// assert that fetch calls do not return undefined
const fetchBreadcrumbs = eventData.breadcrumbs?.filter(
({ category, data }) => category === 'fetch' && data === undefined,
);
expect(fetchBreadcrumbs).toHaveLength(0);

// assert that fetch call has been aborted
const abortedBreadcrumb = eventData.breadcrumbs?.filter(
({ category, message }) => category === 'console' && message === 'Fetch aborted',
);
expect(abortedBreadcrumb).toHaveLength(1);
});
Loading