From 67afad1ca109851bc7ff7ac173c8f9a748e1cd2a Mon Sep 17 00:00:00 2001 From: Benedikt Meurer Date: Sat, 21 Dec 2024 13:23:11 +0100 Subject: [PATCH] feat(crbug/371503691): repros for crbug.com/371503691 --- src/crbug-371503691.html | 54 ++++++++++++++++++++++++++++++++ src/crbug-371503691.js | 67 ++++++++++++++++++++++++++++++++++++++++ src/index.html | 1 + 3 files changed, 122 insertions(+) create mode 100644 src/crbug-371503691.html create mode 100644 src/crbug-371503691.js diff --git a/src/crbug-371503691.html b/src/crbug-371503691.html new file mode 100644 index 0000000..60f29a6 --- /dev/null +++ b/src/crbug-371503691.html @@ -0,0 +1,54 @@ + + + + + + + Repro for crbug.com/371503691 (Reduce network error noise in the DevTools Console) + + +

Repro for crbug.com/371503691 (Reduce network error noise in the DevTools Console)

+ +

+ This demo page contains a bunch of examples for error messages generated + by XMLHttpRequest or fetch APIs + (Design Document). +

+ +

Steps

+ +

+ Open the Console panel in DevTools, click on the appropriate buttons + below, and observe the messages logged to the console. +

+ +

CORS error scenarios

+ + +

404 error response scenarios

+ + +

Other demos

+
    +
  1. crbug-124534.glitch.me
    2. +
  2. cors-errors.glitch.me
    3. +
  3. jec-cors-demo.glitch.me
    4. +
+ + diff --git a/src/crbug-371503691.js b/src/crbug-371503691.js new file mode 100644 index 0000000..2f9eceb --- /dev/null +++ b/src/crbug-371503691.js @@ -0,0 +1,67 @@ +const CORS_ERROR_URL = "https://www.example.com"; + +async function corsUncaughtFetch() { + return await fetch(CORS_ERROR_URL); +} + +async function corsCaughtFetch() { + try { + await corsUncaughtFetch(); + } catch (e) { + return console.log("Caught error from fetch", e); + } +} + +function corsUncaughtXHRSync() { + const xhr = new XMLHttpRequest(); + xhr.open("GET", CORS_ERROR_URL, false); + xhr.send(); +} + +function corsCaughtXHRSync() { + try { + corsUncaughtXHRSync(); + } catch (e) { + console.log("Caught error from synchronous XHR", e); + } +} + +function corsXHRAsyncWithoutError() { + const xhr = new XMLHttpRequest(); + xhr.open("GET", CORS_ERROR_URL); + xhr.send(); + return xhr; +} + +function corsXHRAsyncWithError() { + const xhr = corsXHRAsyncWithoutError(); + xhr.onerror = function onerror(event) { + console.log("Error handler triggered from asynchronous XHR", event); + }; +} + +const HTTP_404_URL = `${document.location.origin}/this-document-does-not-exist`; + +async function http404FetchWithoutOkOrStatusOrStatusTextRead() { + const response = await fetch(HTTP_404_URL); + return response; +} + +async function http404FetchWithOkRead() { + const response = await http404FetchWithoutOkOrStatusOrStatusTextRead(); + if (response.ok) { + console.log("fetch response was ok"); + } else { + console.log("fetch response was not ok"); + } +} + +async function http404FetchWithStatusRead() { + const response = await http404FetchWithoutOkOrStatusOrStatusTextRead(); + console.log("fetch response status is", response.status); +} + +async function http404FetchWithStatusTextRead() { + const response = await http404FetchWithoutOkOrStatusOrStatusTextRead(); + console.log("fetch response statusText is", response.statusText); +} diff --git a/src/index.html b/src/index.html index d6b554b..c54eba4 100644 --- a/src/index.html +++ b/src/index.html @@ -44,6 +44,7 @@

DevTools Debugging Stories

  • Repro for crbug.com/1401339
  • Repro for crbug.com/1408032
  • Repro for crbug.com/333756098
    • +
  • Repro for crbug.com/371503691 (Reduce network error noise in the DevTools Console)