Monitor Blazor WASM loading and report errors

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Blazor Loading</title>
	<base href="/" />
	<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
	<link href="css/site.css" rel="stylesheet" />
</head>
<body onload="myload()">
	<script>
		// keep a handle on the original browser console.error
		const mmerr = console.error;
		const xhrsend = window.XMLHttpRequest.prototype.send;

		// hook up our custom error function and mono monitor
		function myload() {
			console.error = showError;
			window.XMLHttpRequest.prototype.send = newXhrSend;
		}

		function newXhrSend(data) {
			this.addEventListener("progress", monitorXHR);
			this.addEventListener("loadend", endXHR);
			return xhrsend.apply(this, arguments);
		}

		// custom error function so we can display to the user
		function showError(e) {

			// the "file_list" will be removed by Blazor if it runs
			// so if this is missing we can stop monitoring errors

			if (document.querySelector('#file_list')) {

				// show the error message div
				let errdiv = document.querySelector("#errordiv");
				errdiv.classList.remove("d-none");

				// add the error to the list
				let errdesc = document.querySelector("#errordescription");
				errdesc.innerHTML += '<li class="list-group-item alert-danger">' + e + '</li>';

			} else {
				// call the original error function and reset it - our app should be running
				mmerr(e);
				console.error = mmerr;
			}
		}

		function monitorXHR(e) {
			try {
				const fileList = document.querySelector('#file_list');

				if (fileList) {
					// We only need to monitor files if the file_list is there
					const url = e.currentTarget.responseURL;
					var filename = url.substring(url.lastIndexOf('/') + 1);
					const pr = fileList.querySelector("li[name='" + filename + "'] > progress");
					if (pr) {
						pr.value = e.loaded;
						return;
					}
					var item = document.createElement("li");
					item.setAttribute("name", filename);
					item.classList.add("d-flex", "w-100", "p-1");
					let previous = localStorage.getItem(filename);
					if (!previous) {
						previous = 4450000;
					}
					item.innerHTML = "<span> " + filename + " </span><progress class='flex-grow-1 ml-1' min='0' max='"+previous+"' value='" + e.loaded + "'></progress>";
					fileList.appendChild(item);
				}
			} catch (e) {
				console.error(e);
			}
		}

		function endXHR(e) {
			const url = e.currentTarget.responseURL;
			var filename = url.substring(url.lastIndexOf('/') + 1);
			localStorage.setItem(filename, e.loaded);
		}
	</script>
	<app>
		<div class="content vw-100">
			<div id="errordiv" class="d-none w-100">
				<div class="container">
					<!-- Jumbotron -->
					<div class="jumbotron">
						<h1><span class="glyphicon glyphicon-fire red"></span> Error</h1>
						<p class="lead">This application is returning an internal error.</p>
						<a href="javascript:document.location.reload(true);" class="btn btn-default btn-lg text-center"><span class="green">Try This Page Again</span></a>
					</div>
				</div>
				<div class="container-fluid">
					<div class="row">
						<h2>What happened?</h2>
						<div class="col">
							<ul id="errordescription" class="list-group"></ul>
						</div>
					</div>
					<div class="row">
						<div class="col">
							<h2>What can I do?</h2>
							<p class="lead">If you're a site visitor</p>
							<p> Nothing you can do at the moment. If you need immediate assistance, please send us a tweet instead. We apologize for any inconvenience.</p>
							<p class="lead">If you're the site owner</p>
							<p>This error can only be fixed by the developer, please contact @mistermag00 on Twitter.</p>
						</div>
					</div>
				</div>
			</div>
			<ul id="file_list" class="list-group-flush w-75">
				<li class="list-group-item">Loading...</li>
			</ul>
		</div>
	</app>
	<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Blazor Loading</title>
	<base href="/" />
	<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
	<link href="css/site.css" rel="stylesheet" />
	</head>
	<body onload="myload()">
	<script>
	// keep a handle on the original browser console.error
	const mmerr = console.error;
	const xhrsend = window.XMLHttpRequest.prototype.send;

	// hook up our custom error function and mono monitor
	function myload() {
	console.error = showError;
	window.XMLHttpRequest.prototype.send = newXhrSend;
	}

	function newXhrSend(data) {
	this.addEventListener("progress", monitorXHR);
	this.addEventListener("loadend", endXHR);
	return xhrsend.apply(this, arguments);
	}

	// custom error function so we can display to the user
	function showError(e) {

	// the "file_list" will be removed by Blazor if it runs
	// so if this is missing we can stop monitoring errors

	if (document.querySelector('#file_list')) {

	// show the error message div
	let errdiv = document.querySelector("#errordiv");
	errdiv.classList.remove("d-none");

	// add the error to the list
	let errdesc = document.querySelector("#errordescription");
	errdesc.innerHTML += '<li class="list-group-item alert-danger">' + e + '</li>';

	} else {
	// call the original error function and reset it - our app should be running
	mmerr(e);
	console.error = mmerr;
	}
	}

	function monitorXHR(e) {
	try {
	const fileList = document.querySelector('#file_list');

	if (fileList) {
	// We only need to monitor files if the file_list is there
	const url = e.currentTarget.responseURL;
	var filename = url.substring(url.lastIndexOf('/') + 1);
	const pr = fileList.querySelector("li[name='" + filename + "'] > progress");
	if (pr) {
	pr.value = e.loaded;
	return;
	}
	var item = document.createElement("li");
	item.setAttribute("name", filename);
	item.classList.add("d-flex", "w-100", "p-1");
	let previous = localStorage.getItem(filename);
	if (!previous) {
	previous = 4450000;
	}
	item.innerHTML = "<span> " + filename + " </span><progress class='flex-grow-1 ml-1' min='0' max='"+previous+"' value='" + e.loaded + "'></progress>";
	fileList.appendChild(item);
	}
	} catch (e) {
	console.error(e);
	}
	}

	function endXHR(e) {
	const url = e.currentTarget.responseURL;
	var filename = url.substring(url.lastIndexOf('/') + 1);
	localStorage.setItem(filename, e.loaded);
	}
	</script>
	<app>
	<div class="content vw-100">
	<div id="errordiv" class="d-none w-100">
	<div class="container">
	<!-- Jumbotron -->
	<div class="jumbotron">
	<h1><span class="glyphicon glyphicon-fire red"></span> Error</h1>
	<p class="lead">This application is returning an internal error.</p>
	<a href="javascript:document.location.reload(true);" class="btn btn-default btn-lg text-center"><span class="green">Try This Page Again</span></a>
	</div>
	</div>
	<div class="container-fluid">
	<div class="row">
	<h2>What happened?</h2>
	<div class="col">
	<ul id="errordescription" class="list-group"></ul>
	</div>
	</div>
	<div class="row">
	<div class="col">
	<h2>What can I do?</h2>
	<p class="lead">If you're a site visitor</p>
	<p> Nothing you can do at the moment. If you need immediate assistance, please send us a tweet instead. We apologize for any inconvenience.</p>
	<p class="lead">If you're the site owner</p>
	<p>This error can only be fixed by the developer, please contact @mistermag00 on Twitter.</p>
	</div>
	</div>
	</div>
	</div>
	<ul id="file_list" class="list-group-flush w-75">
	<li class="list-group-item">Loading...</li>
	</ul>
	</div>
	</app>
	<script src="_framework/blazor.webassembly.js"></script>
	</body>
	</html>