diff --git a/.size-limit.js b/.size-limit.js index 7ecd54ab92f4..7bab8160966b 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -40,7 +40,7 @@ module.exports = [ path: 'packages/browser/build/npm/esm/index.js', import: createImport('init', 'browserTracingIntegration'), gzip: true, - limit: '37.5 KB', + limit: '38 KB', }, { name: '@sentry/browser (incl. Tracing, Replay)', diff --git a/dev-packages/browser-integration-tests/suites/errors/fetch/init.js b/dev-packages/browser-integration-tests/suites/errors/fetch/init.js new file mode 100644 index 000000000000..ce283e32d303 --- /dev/null +++ b/dev-packages/browser-integration-tests/suites/errors/fetch/init.js @@ -0,0 +1,13 @@ +import * as Sentry from '@sentry/browser'; + +window.Sentry = Sentry; + +Sentry.init({ + dsn: 'https://public@dsn.ingest.sentry.io/1337', + transportOptions: { + fetchOptions: { + // See: https://github.com/microsoft/playwright/issues/34497 + keepalive: false, + }, + }, +}); diff --git a/dev-packages/browser-integration-tests/suites/errors/fetch/subject.js b/dev-packages/browser-integration-tests/suites/errors/fetch/subject.js new file mode 100644 index 000000000000..8bae73df7b31 --- /dev/null +++ b/dev-packages/browser-integration-tests/suites/errors/fetch/subject.js @@ -0,0 +1,45 @@ +// Based on possible TypeError exceptions from https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch + +// Network error (e.g. ad-blocked, offline, page does not exist, ...) +window.networkError = () => { + fetch('http://sentry-test-external.io/does-not-exist'); +}; + +window.networkErrorSubdomain = () => { + fetch('http://subdomain.sentry-test-external.io/does-not-exist'); +}; + +// Invalid header also produces TypeError +window.invalidHeaderName = () => { + fetch('http://sentry-test-external.io/invalid-header-name', { headers: { 'C ontent-Type': 'text/xml' } }); +}; + +// Invalid header value also produces TypeError +window.invalidHeaderValue = () => { + fetch('http://sentry-test-external.io/invalid-header-value', { headers: ['Content-Type', 'text/html', 'extra'] }); +}; + +// Invalid URL scheme +window.invalidUrlScheme = () => { + fetch('blub://sentry-test-external.io/invalid-scheme'); +}; + +// URL includes credentials +window.credentialsInUrl = () => { + fetch('https://user:password@sentry-test-external.io/credentials-in-url'); +}; + +// Invalid mode +window.invalidMode = () => { + fetch('https://sentry-test-external.io/invalid-mode', { mode: 'navigate' }); +}; + +// Invalid request method +window.invalidMethod = () => { + fetch('http://sentry-test-external.io/invalid-method', { method: 'CONNECT' }); +}; + +// No-cors mode with cors-required method +window.noCorsMethod = () => { + fetch('http://sentry-test-external.io/no-cors-method', { mode: 'no-cors', method: 'PUT' }); +}; diff --git a/dev-packages/browser-integration-tests/suites/errors/fetch/test.ts b/dev-packages/browser-integration-tests/suites/errors/fetch/test.ts new file mode 100644 index 000000000000..f9b59dd07f60 --- /dev/null +++ b/dev-packages/browser-integration-tests/suites/errors/fetch/test.ts @@ -0,0 +1,288 @@ +import { expect } from '@playwright/test'; +import { sentryTest } from '../../../utils/fixtures'; +import { envelopeRequestParser, waitForErrorRequest } from '../../../utils/helpers'; + +sentryTest('handles fetch network errors @firefox', async ({ getLocalTestUrl, page, browserName }) => { + const url = await getLocalTestUrl({ testDir: __dirname }); + const reqPromise = waitForErrorRequest(page); + await page.goto(url); + await page.evaluate('networkError()'); + + const eventData = envelopeRequestParser(await reqPromise); + + const errorMap: Record = { + chromium: 'Failed to fetch (sentry-test-external.io)', + webkit: 'Load failed (sentry-test-external.io)', + firefox: 'NetworkError when attempting to fetch resource. (sentry-test-external.io)', + }; + + const error = errorMap[browserName]; + + expect(eventData.exception?.values).toHaveLength(1); + expect(eventData.exception?.values?.[0]).toMatchObject({ + type: 'TypeError', + value: error, + mechanism: { + handled: false, + type: 'onunhandledrejection', + }, + }); +}); + + +sentryTest('handles fetch network errors on subdomains @firefox', async ({ getLocalTestUrl, page, browserName }) => { + const url = await getLocalTestUrl({ testDir: __dirname }); + const reqPromise = waitForErrorRequest(page); + await page.goto(url); + await page.evaluate('networkErrorSubdomain()'); + + const eventData = envelopeRequestParser(await reqPromise); + + const errorMap: Record = { + chromium: 'Failed to fetch (subdomain.sentry-test-external.io)', + webkit: 'Load failed (subdomain.sentry-test-external.io)', + firefox: 'NetworkError when attempting to fetch resource. (subdomain.sentry-test-external.io)', + }; + + const error = errorMap[browserName]; + + expect(eventData.exception?.values).toHaveLength(1); + expect(eventData.exception?.values?.[0]).toMatchObject({ + type: 'TypeError', + value: error, + mechanism: { + handled: false, + type: 'onunhandledrejection', + }, + }); +}); + +sentryTest('handles fetch invalid header name errors @firefox', async ({ getLocalTestUrl, page, browserName }) => { + const url = await getLocalTestUrl({ testDir: __dirname }); + const reqPromise = waitForErrorRequest(page); + await page.goto(url); + await page.evaluate('invalidHeaderName()'); + + const eventData = envelopeRequestParser(await reqPromise); + + const errorMap: Record = { + chromium: "Failed to execute 'fetch' on 'Window': Invalid name", + webkit: "Invalid header name: 'C ontent-Type'", + firefox: 'Window.fetch: c ontent-type is an invalid header name.', + }; + + const error = errorMap[browserName]; + + expect(eventData.exception?.values).toHaveLength(1); + expect(eventData.exception?.values?.[0]).toMatchObject({ + type: 'TypeError', + value: error, + mechanism: { + handled: false, + type: 'onunhandledrejection', + }, + stacktrace: { + frames: expect.any(Array), + }, + }); +}); + +sentryTest('handles fetch invalid header value errors @firefox', async ({ getLocalTestUrl, page, browserName }) => { + const url = await getLocalTestUrl({ testDir: __dirname }); + const reqPromise = waitForErrorRequest(page); + await page.goto(url); + await page.evaluate('invalidHeaderValue()'); + + const eventData = envelopeRequestParser(await reqPromise); + + const errorMap: Record = { + chromium: + "Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': The provided value cannot be converted to a sequence.", + webkit: 'Value is not a sequence', + firefox: + "Window.fetch: Element of sequence> branch of (sequence> or record) can't be converted to a sequence.", + }; + + const error = errorMap[browserName]; + + expect(eventData.exception?.values).toHaveLength(1); + expect(eventData.exception?.values?.[0]).toMatchObject({ + type: 'TypeError', + value: error, + mechanism: { + handled: false, + type: 'onunhandledrejection', + }, + stacktrace: { + frames: expect.any(Array), + }, + }); +}); + +sentryTest('handles fetch invalid URL scheme errors @firefox', async ({ getLocalTestUrl, page, browserName }) => { + await page.route('http://sentry-test-external.io/**', route => { + return route.fulfill({ + status: 200, + }); + }); + + const url = await getLocalTestUrl({ testDir: __dirname }); + const reqPromise = waitForErrorRequest(page); + await page.goto(url); + await page.evaluate('invalidUrlScheme()'); + + const eventData = envelopeRequestParser(await reqPromise); + + const errorMap: Record = { + chromium: 'Failed to fetch (sentry-test-external.io)', + webkit: 'Load failed (sentry-test-external.io)', + firefox: 'NetworkError when attempting to fetch resource. (sentry-test-external.io)', + }; + + const error = errorMap[browserName]; + + /** + * This kind of error does show a helpful warning in the console, e.g.: + * Fetch API cannot load blub://sentry-test-external.io/invalid-scheme. URL scheme "blub" is not supported. + * But it seems we cannot really access this in the SDK :( + */ + + expect(eventData.exception?.values).toHaveLength(1); + expect(eventData.exception?.values?.[0]).toMatchObject({ + type: 'TypeError', + value: error, + mechanism: { + handled: false, + type: 'onunhandledrejection', + }, + stacktrace: { + frames: expect.any(Array), + }, + }); +}); + +sentryTest('handles fetch credentials in url errors @firefox', async ({ getLocalTestUrl, page, browserName }) => { + const url = await getLocalTestUrl({ testDir: __dirname }); + const reqPromise = waitForErrorRequest(page); + await page.goto(url); + await page.evaluate('credentialsInUrl()'); + + const eventData = envelopeRequestParser(await reqPromise); + + const errorMap: Record = { + chromium: + "Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials: https://user:password@sentry-test-external.io/credentials-in-url", + webkit: 'URL is not valid or contains user credentials.', + firefox: + 'Window.fetch: https://user:password@sentry-test-external.io/credentials-in-url is an url with embedded credentials.', + }; + + const error = errorMap[browserName]; + + expect(eventData.exception?.values).toHaveLength(1); + expect(eventData.exception?.values?.[0]).toMatchObject({ + type: 'TypeError', + value: error, + mechanism: { + handled: false, + type: 'onunhandledrejection', + }, + stacktrace: { + frames: expect.any(Array), + }, + }); +}); + +sentryTest('handles fetch invalid mode errors @firefox', async ({ getLocalTestUrl, page, browserName }) => { + const url = await getLocalTestUrl({ testDir: __dirname }); + const reqPromise = waitForErrorRequest(page); + await page.goto(url); + await page.evaluate('invalidMode()'); + + const eventData = envelopeRequestParser(await reqPromise); + + const errorMap: Record = { + chromium: + "Failed to execute 'fetch' on 'Window': Cannot construct a Request with a RequestInit whose mode member is set as 'navigate'.", + webkit: 'Request constructor does not accept navigate fetch mode.', + firefox: 'Window.fetch: Invalid request mode navigate.', + }; + + const error = errorMap[browserName]; + + expect(eventData.exception?.values).toHaveLength(1); + expect(eventData.exception?.values?.[0]).toMatchObject({ + type: 'TypeError', + value: error, + mechanism: { + handled: false, + type: 'onunhandledrejection', + }, + stacktrace: { + frames: expect.any(Array), + }, + }); +}); + +sentryTest('handles fetch invalid request method errors @firefox', async ({ getLocalTestUrl, page, browserName }) => { + const url = await getLocalTestUrl({ testDir: __dirname }); + const reqPromise = waitForErrorRequest(page); + await page.goto(url); + await page.evaluate('invalidMethod()'); + + const eventData = envelopeRequestParser(await reqPromise); + + const errorMap: Record = { + chromium: "Failed to execute 'fetch' on 'Window': 'CONNECT' HTTP method is unsupported.", + webkit: 'Method is forbidden.', + firefox: 'Window.fetch: Invalid request method CONNECT.', + }; + + const error = errorMap[browserName]; + + expect(eventData.exception?.values).toHaveLength(1); + expect(eventData.exception?.values?.[0]).toMatchObject({ + type: 'TypeError', + value: error, + mechanism: { + handled: false, + type: 'onunhandledrejection', + }, + stacktrace: { + frames: expect.any(Array), + }, + }); +}); + +sentryTest( + 'handles fetch no-cors mode with cors-required method errors @firefox', + async ({ getLocalTestUrl, page, browserName }) => { + const url = await getLocalTestUrl({ testDir: __dirname }); + const reqPromise = waitForErrorRequest(page); + await page.goto(url); + await page.evaluate('noCorsMethod()'); + + const eventData = envelopeRequestParser(await reqPromise); + + const errorMap: Record = { + chromium: "Failed to execute 'fetch' on 'Window': 'PUT' is unsupported in no-cors mode.", + webkit: 'Method must be GET, POST or HEAD in no-cors mode.', + firefox: 'Window.fetch: Invalid request method PUT.', + }; + + const error = errorMap[browserName]; + + expect(eventData.exception?.values).toHaveLength(1); + expect(eventData.exception?.values?.[0]).toMatchObject({ + type: 'TypeError', + value: error, + mechanism: { + handled: false, + type: 'onunhandledrejection', + }, + stacktrace: { + frames: expect.any(Array), + }, + }); + }, +); diff --git a/packages/core/src/utils-hoist/instrument/fetch.ts b/packages/core/src/utils-hoist/instrument/fetch.ts index f3eee711d26d..71c5148fae9c 100644 --- a/packages/core/src/utils-hoist/instrument/fetch.ts +++ b/packages/core/src/utils-hoist/instrument/fetch.ts @@ -107,6 +107,25 @@ function instrumentFetch(onFetchResolved?: (response: Response) => void, skipNat addNonEnumerableProperty(error, 'framesToPop', 1); } + // We enhance the not-so-helpful "Failed to fetch" error messages with the host + // Possible messages we handle here: + // * "Failed to fetch" (chromium) + // * "Load failed" (webkit) + // * "NetworkError when attempting to fetch resource." (firefox) + if ( + error instanceof TypeError && + (error.message === 'Failed to fetch' || + error.message === 'Load failed' || + error.message === 'NetworkError when attempting to fetch resource.') + ) { + try { + const url = new URL(handlerData.fetchData.url); + error.message = `${error.message} (${url.host})`; + } catch { + // ignore it if errors happen here + } + } + // NOTE: If you are a Sentry user, and you are seeing this stack frame, // it means the sentry.javascript SDK caught an error invoking your application code. // This is expected behavior and NOT indicative of a bug with sentry.javascript.