Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions .changeset/flat-trainers-fold.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/kit': patch
---

fix: prevent false positive warnings for fetch in Firefox and Safari
12 changes: 5 additions & 7 deletions packages/kit/src/runtime/client/fetcher.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,12 @@ if (DEV) {
// We use just the filename as the method name sometimes does not appear on the CI.
const url = input instanceof Request ? input.url : input.toString();
const stack_array = /** @type {string} */ (new Error().stack).split('\n');
// We need to do some Firefox-specific cutoff because it (impressively) maintains the stack
// across events and for example traces a `fetch` call triggered from a button back
// to the creation of the event listener and the element creation itself,
// We need to do a cutoff because Safari and Firefox maintain the stack
// across events and for example traces a `fetch` call triggered from a button
// back to the creation of the event listener and the element creation itself,
// where at some point client.js will show up, leading to false positives.
const firefox_cutoff = stack_array.findIndex((a) => a.includes('*listen@'));
const stack = stack_array
.slice(0, firefox_cutoff !== -1 ? firefox_cutoff : undefined)
.join('\n');
const cutoff = stack_array.findIndex((a) => a.includes('load@') || a.includes('at load'));
const stack = stack_array.slice(0, cutoff + 2).join('\n');

const heuristic = can_inspect_stack_trace
? stack.includes('src/runtime/client/client.js')
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script>
import { page } from '$app/stores';
import { onMount } from 'svelte';

let answer = 0;

onMount(async () => {
const res = await fetch(`${$page.url.origin}/load/window-fetch/data.json`);
({ answer } = await res.json());
});
</script>

<h1>{answer}</h1>
21 changes: 21 additions & 0 deletions packages/kit/test/apps/basics/test/cross-platform/client.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -742,3 +742,24 @@ test.describe('Interactivity', () => {
expect(errored).toBe(false);
});
});

test.describe('Load', () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't sure where to put this test, or how best to describe it. Open to suggestions.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this seems like as good a place as any 👍

if (process.env.DEV) {
test('using window.fetch does not cause false-positive warning', async ({ page, baseURL }) => {
/** @type {string[]} */
const warnings = [];
page.on('console', (msg) => {
if (msg.type() === 'warning') {
warnings.push(msg.text());
}
});

await page.goto('/load/window-fetch/outside-load');
expect(await page.textContent('h1')).toBe('42');

expect(warnings).not.toContain(
`Loading ${baseURL}/load/window-fetch/data.json using \`window.fetch\`. For best results, use the \`fetch\` that is passed to your \`load\` function: https://kit.svelte.dev/docs/load#making-fetch-requests`
);
});
}
});