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