feat(crbug/371503691): repros for crbug.com/371503691

ChromeDevTools · Dec 23, 2024 · 67afad1 · 67afad1
1 parent 45889f7
commit 67afad1
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 0 deletions.
diff --git a/src/crbug-371503691.html b/src/crbug-371503691.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      li > button {
+        margin-bottom: 5px;
+      }
+    </style>
+    <script type="application/javascript" src="crbug-371503691.js" defer></script>
+    <title>Repro for crbug.com/371503691 (Reduce network error noise in the DevTools Console)</title>
+  </head>
+  <body>
+    <h1>Repro for crbug.com/371503691 (Reduce network error noise in the DevTools Console)</h1>
+
+    <p>
+      This demo page contains a bunch of examples for error messages generated
+      by <code>XMLHttpRequest</code> or <code>fetch</code> APIs
+      (<a href="https://goo.gle/devtools-reduce-network-noise-design">Design Document</a>).
+    </p>
+
+    <h2>Steps</h2>
+
+    <p>
+      Open the Console panel in DevTools, click on the appropriate buttons
+      below, and observe the messages logged to the console.
+    </p>
+
+    <h3>CORS error scenarios</h3>
+    <ul>
+      <li><button onclick="corsCaughtFetch()">Caught <code>fetch</code> CORS error</button></li>
+      <li><button onclick="corsUncaughtFetch()">Uncaught <code>fetch</code> CORS error</button></li>
+      <li><button onclick="corsCaughtXHRSync()">Caught sync <code>XMLHttpRequest</code> CORS error</button></li>
+      <li><button onclick="corsUncaughtXHRSync()">Uncaught sync <code>XMLHttpRequest</code> CORS error</button></li>
+      <li><button onclick="corsXHRAsyncWithError()">Async <code>XMLHttpRequest</code> w/ <code>onerror</code> CORS error</button></li>
+      <li><button onclick="corsXHRAsyncWithoutError()">Async <code>XMLHttpRequest</code> w/o <code>onerror</code> CORS error</button></li>
+    </ul>
+
+    <h3>404 error response scenarios</h3>
+    <ul>
+      <li><button onclick="http404FetchWithOkRead()"><code>fetch</code> 404 response w/ reading <code>ok</code></li>
+      <li><button onclick="http404FetchWithStatusRead()"><code>fetch</code> 404 response w/ reading <code>status</code></li>
+      <li><button onclick="http404FetchWithStatusTextRead()"><code>fetch</code> 404 response w/ reading <code>statusText</code></li>
+      <li><button onclick="http404FetchWithoutOkOrStatusOrStatusTextRead()"><code>fetch</code> 404 response w/o reading <code>ok</code>, <code>status</code>, or <code>statusText</code></li>
+    </ul>
+
+    <h2>Other demos</h2>
+    <ol>
+      <li><a href="https://crbug-124534.glitch.me/">crbug-124534.glitch.me</a></li>
+      <li><a href="https://cors-errors.glitch.me/">cors-errors.glitch.me</a></li>
+      <li><a href="https://jec-cors-demo.glitch.me/">jec-cors-demo.glitch.me</a></li>
+    </ol>
+  </body>
+</html>
diff --git a/src/crbug-371503691.js 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
@@ -44,6 +44,7 @@ <h1>DevTools Debugging Stories</h1>
       <li><a href="crbug-1401339.html">Repro for crbug.com/1401339</a></li>
       <li><a href="crbug-1408032.html">Repro for crbug.com/1408032</a></li>
       <li><a href="crbug-333756098.html">Repro for crbug.com/333756098</a></li>
+      <li><a href="crbug-371503691.html">Repro for crbug.com/371503691 (Reduce network error noise in the DevTools Console)</a></li>
     </ul>
     </p>