Fix blank page from stale cached assets; surface errors
A browser or CDN holding an assets/app.js from before the shell's element IDs were renamed runs it against the newer index.php, where it grabs btn-logout/btn-rescan/nav-user/nav-username/app — all now null — and throws before it can unhide #app-shell. The result is a blank page whose only clue is a TypeError in the console. - index.php: asset() stamps local css/js with the file mtime, so a deploy is a new URL and a stale copy can't be paired with a newer shell. - index.php: install an error handler ahead of every other script (capture phase, so failed resource loads are caught too) that paints uncaught errors, rejections and load failures into a #boot-error panel. It works even when app.js itself is what failed, which is this case. - includes/db.php: add a register_shutdown_function fatal handler, since set_exception_handler never sees parse errors, exhausted memory or a failed require — those were ending requests with an empty body. Both handlers flush partial output and answer in JSON; display_errors stays off so a warning can't corrupt a JSON body. - New optional DEBUG config flag adds exception type, file:line and trace to those responses. config.php is gitignored, so installs without the setting default to false. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014oyi9DMdhALrGz989MNNZJ
This commit is contained in:
@@ -1,4 +1,21 @@
|
||||
<?php /* CourseHub SPA shell — all data flows through api/ via fetch. */ ?>
|
||||
<?php
|
||||
/* CourseHub SPA shell — all data flows through api/ via fetch. */
|
||||
|
||||
/**
|
||||
* Version a local asset by its mtime.
|
||||
*
|
||||
* Browsers and CDNs (Cloudflare in front of this app) cache assets/*.css|js
|
||||
* indefinitely otherwise, and a stale app.js against a newer shell fails hard:
|
||||
* it grabs element IDs that no longer exist, throws before it can unhide the
|
||||
* shell, and leaves a blank page with nothing in the markup to explain it.
|
||||
* Stamping the mtime means a deploy is a new URL, so that can't happen.
|
||||
*/
|
||||
function asset(string $path): string
|
||||
{
|
||||
$mtime = @filemtime(__DIR__ . '/' . $path);
|
||||
return $path . '?v=' . ($mtime ?: '0');
|
||||
}
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@@ -10,7 +27,38 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/plyr@3.7.8/dist/plyr.css" rel="stylesheet">
|
||||
<link href="assets/style.css" rel="stylesheet">
|
||||
<link href="<?= asset('assets/style.css') ?>" rel="stylesheet">
|
||||
|
||||
<!-- Installed before every other script so it can report failures in them
|
||||
(including assets/app.js itself). Without it a JS error leaves the shell
|
||||
hidden and the page simply blank, with the reason only in the console. -->
|
||||
<script>
|
||||
(function () {
|
||||
var box = null;
|
||||
function report(kind, detail) {
|
||||
if (!box) {
|
||||
box = document.createElement('pre');
|
||||
box.id = 'boot-error';
|
||||
box.textContent = 'CourseHub failed to start.\n\n';
|
||||
(document.body || document.documentElement).appendChild(box);
|
||||
}
|
||||
box.textContent += kind + ': ' + detail + '\n';
|
||||
}
|
||||
// Capture phase, because resource load failures don't bubble.
|
||||
window.addEventListener('error', function (e) {
|
||||
var el = e.target;
|
||||
if (el && el !== window && (el.src || el.href)) {
|
||||
report('Failed to load', el.src || el.href);
|
||||
} else {
|
||||
report('Error', (e.message || e.error) +
|
||||
' (' + (e.filename || '?') + ':' + (e.lineno || '?') + ')');
|
||||
}
|
||||
}, true);
|
||||
window.addEventListener('unhandledrejection', function (e) {
|
||||
report('Unhandled rejection', (e.reason && e.reason.message) || e.reason);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -80,6 +128,6 @@
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/plyr@3.7.8/dist/plyr.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.2/lib/anime.min.js"></script>
|
||||
<script src="assets/app.js"></script>
|
||||
<script src="<?= asset('assets/app.js') ?>"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user