Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(crbug/371503351): repros for crbug.com/371503351 (Reduce network… #91

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(crbug/371503351): repros for crbug.com/371503351 (Reduce network… #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions src/crbug-371503351.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-371503351.js" defer></script>
<title>Repro for crbug.com/371503351 (Reduce network error noise in the DevTools Console)</title>
</head>
<body>
<h1>Repro for crbug.com/371503351 (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>
67 changes: 67 additions & 0 deletions src/crbug-371503351.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
const CORS_ERROR_URL = "http://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);
}
1 change: 1 addition & 0 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-371503351.html">Repro for crbug.com/371503351 (Reduce network error noise in the DevTools Console)</a></li>
</ul>
</p>

Expand Down
Loading