diff --git a/.changeset/flat-trainers-fold.md b/.changeset/flat-trainers-fold.md new file mode 100644 index 000000000000..ce979520e626 --- /dev/null +++ b/.changeset/flat-trainers-fold.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +fix: prevent false positive warnings for fetch in Firefox and Safari diff --git a/packages/kit/src/runtime/client/fetcher.js b/packages/kit/src/runtime/client/fetcher.js index e73da8f2ca51..df709d1f3968 100644 --- a/packages/kit/src/runtime/client/fetcher.js +++ b/packages/kit/src/runtime/client/fetcher.js @@ -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') diff --git a/packages/kit/test/apps/basics/src/routes/load/window-fetch/outside-load/+page.svelte b/packages/kit/test/apps/basics/src/routes/load/window-fetch/outside-load/+page.svelte new file mode 100644 index 000000000000..dda0ecac5d6e --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/load/window-fetch/outside-load/+page.svelte @@ -0,0 +1,13 @@ + + +

{answer}

diff --git a/packages/kit/test/apps/basics/test/cross-platform/client.test.js b/packages/kit/test/apps/basics/test/cross-platform/client.test.js index 4fbf66f32949..34de866b9c2d 100644 --- a/packages/kit/test/apps/basics/test/cross-platform/client.test.js +++ b/packages/kit/test/apps/basics/test/cross-platform/client.test.js @@ -754,3 +754,24 @@ test.describe('Interactivity', () => { expect(errored).toBe(false); }); }); + +test.describe('Load', () => { + 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` + ); + }); + } +});