-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(utils): Handle when requests get aborted in fetch instrumentation (…
…#13202) Co-authored-by: Charly Gomez <charly.gomez@sentry.io> Co-authored-by: Luca Forstner <luca.forstner@sentry.io>
- Loading branch information
1 parent
9289200
commit 957324e
Showing
7 changed files
with
169 additions
and
36 deletions.
There are no files selected for viewing
8 changes: 8 additions & 0 deletions
8
...rowser-integration-tests/suites/integrations/httpclient/fetch/withAbortController/init.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import * as Sentry from '@sentry/browser'; | ||
|
||
window.Sentry = Sentry; | ||
|
||
Sentry.init({ | ||
dsn: 'https://public@dsn.ingest.sentry.io/1337', | ||
tracesSampleRate: 1, | ||
}); |
36 changes: 36 additions & 0 deletions
36
...ser-integration-tests/suites/integrations/httpclient/fetch/withAbortController/subject.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
let controller; | ||
|
||
const startFetch = e => { | ||
controller = new AbortController(); | ||
const { signal } = controller; | ||
|
||
Sentry.startSpan( | ||
{ | ||
name: 'with-abort-controller', | ||
forceTransaction: true, | ||
}, | ||
async () => { | ||
await 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
10
...-integration-tests/suites/integrations/httpclient/fetch/withAbortController/template.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
41 changes: 41 additions & 0 deletions
41
...rowser-integration-tests/suites/integrations/httpclient/fetch/withAbortController/test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import { expect } from '@playwright/test'; | ||
import type { Event as SentryEvent } from '@sentry/types'; | ||
import { sentryTest } from '../../../../../utils/fixtures'; | ||
import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../../utils/helpers'; | ||
|
||
sentryTest('should handle aborted fetch calls', async ({ getLocalTestPath, page }) => { | ||
if (shouldSkipTracingTest()) { | ||
sentryTest.skip(); | ||
} | ||
|
||
const url = await getLocalTestPath({ testDir: __dirname }); | ||
|
||
await page.route('**/foo', async () => { | ||
// never fulfil this route because we abort the request as part of the test | ||
}); | ||
|
||
const transactionEventPromise = getFirstSentryEnvelopeRequest<SentryEvent>(page); | ||
|
||
const hasAbortedFetchPromise = new Promise<void>(resolve => { | ||
page.on('console', msg => { | ||
if (msg.type() === 'log' && msg.text() === 'Fetch aborted') { | ||
resolve(); | ||
} | ||
}); | ||
}); | ||
|
||
await page.goto(url); | ||
|
||
await page.locator('[data-test-id=start-button]').click(); | ||
await page.locator('[data-test-id=abort-button]').click(); | ||
|
||
const transactionEvent = await transactionEventPromise; | ||
|
||
// assert that fetch calls do not return undefined | ||
const fetchBreadcrumbs = transactionEvent.breadcrumbs?.filter( | ||
({ category, data }) => category === 'fetch' && data === undefined, | ||
); | ||
expect(fetchBreadcrumbs).toHaveLength(0); | ||
|
||
await expect(hasAbortedFetchPromise).resolves.toBeUndefined(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters