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
+
+ - crbug-124534.glitch.me
+ - cors-errors.glitch.me
+ - jec-cors-demo.glitch.me
+
+
+
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)