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>