Skip to content

Instantly share code, notes, and snippets.

@SQL-MisterMagoo
Last active March 19, 2020 19:30
Show Gist options
  • Save SQL-MisterMagoo/5d857941f884eb1a2d80e72b1044e292 to your computer and use it in GitHub Desktop.
Save SQL-MisterMagoo/5d857941f884eb1a2d80e72b1044e292 to your computer and use it in GitHub Desktop.
Monitor Blazor WASM loading and report errors
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment