Skip to content

Commit 0292938

Browse files
bmeurerbmeurer
committed
feat(crbug/371503691): repros for crbug.com/371503691
1 parent 45889f7 commit 0292938

File tree

3 files changed

+129
-0
lines changed

3 files changed

+129
-0
lines changed

‎src/crbug-371503691.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<style>
6+
li > button {
7+
margin-bottom: 5px;
8+
}
9+
</style>
10+
<script type="application/javascript" src="crbug-371503691.js" defer></script>
11+
<title>Repro for crbug.com/371503691 (Reduce network error noise in the DevTools Console)</title>
12+
</head>
13+
<body>
14+
<h1>Repro for crbug.com/371503691 (Reduce network error noise in the DevTools Console)</h1>
15+
16+
<p>
17+
This demo page contains a bunch of examples for error messages generated
18+
by <code>XMLHttpRequest</code> or <code>fetch</code> APIs
19+
(<a href="https://goo.gle/devtools-reduce-network-noise-design">Design Document</a>).
20+
</p>
21+
22+
<h2>Steps</h2>
23+
24+
<p>
25+
Open the Console panel in DevTools, click on the appropriate buttons
26+
below, and observe the messages logged to the console.
27+
</p>
28+
29+
<h3>CORS error scenarios</h3>
30+
<ul>
31+
<li><button onclick="corsCaughtFetch()">Caught <code>fetch</code> CORS error</button></li>
32+
<li><button onclick="corsUncaughtFetch()">Uncaught <code>fetch</code> CORS error</button></li>
33+
<li><button onclick="corsUncaughtFetchSameOrigin()">Uncaught <code>fetch</code> <code>"same-origin"</code> early CORS error</button></li>
34+
<li><button onclick="corsCaughtXHRSync()">Caught sync <code>XMLHttpRequest</code> CORS error</button></li>
35+
<li><button onclick="corsUncaughtXHRSync()">Uncaught sync <code>XMLHttpRequest</code> CORS error</button></li>
36+
<li><button onclick="corsXHRAsyncWithError()">Async <code>XMLHttpRequest</code> w/ <code>onerror</code> CORS error</button></li>
37+
<li><button onclick="corsXHRAsyncWithoutError()">Async <code>XMLHttpRequest</code> w/o <code>onerror</code> CORS error</button></li>
38+
</ul>
39+
40+
<h3>404 error response scenarios</h3>
41+
<ul>
42+
<li><button onclick="http404FetchWithOkRead()"><code>fetch</code> 404 response w/ reading <code>ok</code></li>
43+
<li><button onclick="http404FetchWithStatusRead()"><code>fetch</code> 404 response w/ reading <code>status</code></li>
44+
<li><button onclick="http404FetchWithStatusTextRead()"><code>fetch</code> 404 response w/ reading <code>statusText</code></li>
45+
<li><button onclick="http404FetchWithoutOkOrStatusOrStatusTextRead()"><code>fetch</code> 404 response w/o reading <code>ok</code>, <code>status</code>, or <code>statusText</code></li>
46+
</ul>
47+
48+
<h2>Other demos</h2>
49+
<ol>
50+
<li><a href="https://crbug-124534.glitch.me/">crbug-124534.glitch.me</a></li>
51+
<li><a href="https://cors-errors.glitch.me/">cors-errors.glitch.me</a></li>
52+
<li><a href="https://jec-cors-demo.glitch.me/">jec-cors-demo.glitch.me</a></li>
53+
</ol>
54+
</body>
55+
</html>

‎src/crbug-371503691.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const CORS_ERROR_URL = "https://www.example.com";
2+
3+
async function corsUncaughtFetch() {
4+
return await fetch(CORS_ERROR_URL);
5+
}
6+
7+
async function corsUncaughtFetchSameOrigin() {
8+
return await fetch(CORS_ERROR_URL, {
9+
mode: "same-origin"
10+
});
11+
}
12+
13+
async function corsCaughtFetch() {
14+
try {
15+
await corsUncaughtFetch();
16+
} catch (e) {
17+
return console.log("Caught error from fetch", e);
18+
}
19+
}
20+
21+
function corsUncaughtXHRSync() {
22+
const xhr = new XMLHttpRequest();
23+
xhr.open("GET", CORS_ERROR_URL, false);
24+
xhr.send();
25+
}
26+
27+
function corsCaughtXHRSync() {
28+
try {
29+
corsUncaughtXHRSync();
30+
} catch (e) {
31+
console.log("Caught error from synchronous XHR", e);
32+
}
33+
}
34+
35+
function corsXHRAsyncWithoutError() {
36+
const xhr = new XMLHttpRequest();
37+
xhr.open("GET", CORS_ERROR_URL);
38+
xhr.send();
39+
return xhr;
40+
}
41+
42+
function corsXHRAsyncWithError() {
43+
const xhr = corsXHRAsyncWithoutError();
44+
xhr.onerror = function onerror(event) {
45+
console.log("Error handler triggered from asynchronous XHR", event);
46+
};
47+
}
48+
49+
const HTTP_404_URL = `${document.location.origin}/this-document-does-not-exist`;
50+
51+
async function http404FetchWithoutOkOrStatusOrStatusTextRead() {
52+
const response = await fetch(HTTP_404_URL);
53+
return response;
54+
}
55+
56+
async function http404FetchWithOkRead() {
57+
const response = await http404FetchWithoutOkOrStatusOrStatusTextRead();
58+
if (response.ok) {
59+
console.log("fetch response was ok");
60+
} else {
61+
console.log("fetch response was not ok");
62+
}
63+
}
64+
65+
async function http404FetchWithStatusRead() {
66+
const response = await http404FetchWithoutOkOrStatusOrStatusTextRead();
67+
console.log("fetch response status is", response.status);
68+
}
69+
70+
async function http404FetchWithStatusTextRead() {
71+
const response = await http404FetchWithoutOkOrStatusOrStatusTextRead();
72+
console.log("fetch response statusText is", response.statusText);
73+
}

‎src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ <h1>DevTools Debugging Stories</h1>
4444
<li><a href="crbug-1401339.html">Repro for crbug.com/1401339</a></li>
4545
<li><a href="crbug-1408032.html">Repro for crbug.com/1408032</a></li>
4646
<li><a href="crbug-333756098.html">Repro for crbug.com/333756098</a></li>
47+
<li><a href="crbug-371503691.html">Repro for crbug.com/371503691 (Reduce network error noise in the DevTools Console)</a></li>
4748
</ul>
4849
</p>
4950

0 commit comments

Comments
 (0)