huge error screen cleanup

This commit is contained in:
Percs 2024-05-07 19:56:02 -05:00
parent 1d38959da1
commit ab4e2f91c0

View file

@ -285,7 +285,7 @@ class UVServiceWorker extends Ultraviolet.EventEmitter {
console.error(err); console.error(err);
return renderError(err, fetchedURL, this.address); return renderError(err, fetchedURL);
} }
} }
static Ultraviolet = Ultraviolet; static Ultraviolet = Ultraviolet;
@ -390,178 +390,75 @@ class HookEvent {
/** /**
* *
* @param {string} fetchedURL
* @param {string} bareServer
* @returns
*/
function hostnameErrorTemplate(fetchedURL, bareServer) {
const parsedFetchedURL = new URL(fetchedURL);
const script =
`remoteHostname.textContent = ${JSON.stringify(
parsedFetchedURL.hostname
)};` +
`bareServer.href = ${JSON.stringify(bareServer)};` +
`uvHostname.textContent = ${JSON.stringify(location.hostname)};` +
`reload.addEventListener("click", () => location.reload());` +
`uvVersion.textContent = ${JSON.stringify(
process.env.ULTRAVIOLET_VERSION
)};`;
return (
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
"<meta charset='utf-8' />" +
'<title>Error</title>' +
'<style>' +
'* { background-color: white }' +
'</style>' +
'</head>' +
'<body>' +
'<h1>This site cant be reached</h1>' +
'<hr />' +
'<p><b id="remoteHostname"></b>s server IP address could not be found.</p>' +
'<p>Try:</p>' +
'<ul>' +
'<li>Verifying you entered the correct address</li>' +
'<li>Clearing the site data</li>' +
'<li>Contacting <b id="uvHostname"></b>\'s administrator</li>' +
"<li>Verifying the <a id='bareServer' title='Bare server'>Bare server</a> isn't censored</li>" +
'</ul>' +
'<button id="reload">Reload</button>' +
'<hr />' +
'<p><i>Ultraviolet v<span id="uvVersion"></span></i></p>' +
`<script src="${
'data:application/javascript,' + encodeURIComponent(script)
}"></script>` +
'</body>' +
'</html>'
);
}
/**
*
* @param {string} title
* @param {string} code
* @param {string} id
* @param {string} message
* @param {string} trace * @param {string} trace
* @param {string} fetchedURL * @param {string} fetchedURL
* @param {string} bareServer
* @returns * @returns
*/ */
function errorTemplate( function errorTemplate(
title,
code,
id,
message,
trace, trace,
fetchedURL, fetchedURL,
bareServer
) { ) {
// produced by bare-server-node
if (message === 'The specified host could not be resolved.')
return hostnameErrorTemplate(fetchedURL, bareServer);
// turn script into a data URI so we don't have to escape any HTML values // turn script into a data URI so we don't have to escape any HTML values
const script = const script = `
`errorTitle.textContent = ${JSON.stringify(title)};` + errorTrace.value = ${JSON.stringify(trace)};
`errorCode.textContent = ${JSON.stringify(code)};` + fetchedURL.textContent = ${JSON.stringify(fetchedURL)};
(id ? `errorId.textContent = ${JSON.stringify(id)};` : '') + for (const node of document.querySelectorAll("#uvHostname")) node.textContent = ${JSON.stringify(
`errorMessage.textContent = ${JSON.stringify(message)};` +
`errorTrace.value = ${JSON.stringify(trace)};` +
`fetchedURL.textContent = ${JSON.stringify(fetchedURL)};` +
`bareServer.href = ${JSON.stringify(bareServer)};` +
`for (const node of document.querySelectorAll("#uvHostname")) node.textContent = ${JSON.stringify(
location.hostname location.hostname
)};` + )};
`reload.addEventListener("click", () => location.reload());` + reload.addEventListener("click", () => location.reload());
`uvVersion.textContent = ${JSON.stringify( uvVersion.textContent = ${JSON.stringify(
process.env.ULTRAVIOLET_VERSION process.env.ULTRAVIOLET_VERSION
)};`; )};
`
return ( return (
'<!DOCTYPE html>' + `<!DOCTYPE html>
'<html>' + <html>
'<head>' + <head>
"<meta charset='utf-8' />" + <meta charset='utf-8' />
'<title>Error</title>' + <title>Error</title>
'<style>' + <style>
'* { background-color: white }' + * { background-color: white }
'</style>' + </style>
'</head>' + </head>
'<body>' + <body>
"<h1 id='errorTitle'></h1>" + <h1 id='errorTitle'>Error processing your request</h1>
'<hr />' + <hr />
'<p>Failed to load <b id="fetchedURL"></b></p>' + <p>Failed to load <b id="fetchedURL"></b></p>
'<p id="errorMessage"></p>' + <p id="errorMessage">Internal Server Error</p>
'<table><tbody>' + <textarea id="errorTrace" cols="40" rows="10" readonly></textarea>
'<tr><td>Code:</td><td id="errorCode"></td></tr>' + <p>Try:</p>
(id ? '<tr><td>ID:</td><td id="errorId"></td></tr>' : '') + <ul>
'</tbody></table>' + <li>Checking your internet connection</li>
'<textarea id="errorTrace" cols="40" rows="10" readonly></textarea>' + <li>Verifying you entered the correct address</li>
'<p>Try:</p>' + <li>Clearing the site data</li>
'<ul>' + <li>Contacting <b id="uvHostname"></b>'s administrator</li>
'<li>Checking your internet connection</li>' + <li>Verify the server isn't censored</li>
'<li>Verifying you entered the correct address</li>' + </ul>
'<li>Clearing the site data</li>' + <p>If you're the administrator of <b id="uvHostname"></b>, try:</p>
'<li>Contacting <b id="uvHostname"></b>\'s administrator</li>' + <ul>
"<li>Verify the <a id='bareServer' title='Bare server'>Bare server</a> isn't censored</li>" + <li>Restarting your server</li>
'</ul>' + <li>Updating Ultraviolet</li>
'<p>If you\'re the administrator of <b id="uvHostname"></b>, try:</p>' + <li>Troubleshooting the error on the <a href="https://github.com/titaniumnetwork-dev/Ultraviolet" target="_blank">GitHub repository</a></li>
'<ul>' + </ul>
'<li>Restarting your Bare server</li>' + <button id="reload">Reload</button>
'<li>Updating Ultraviolet</li>' + <hr />
'<li>Troubleshooting the error on the <a href="https://github.com/titaniumnetwork-dev/Ultraviolet" target="_blank">GitHub repository</a></li>' + <p><i>Ultraviolet v<span id="uvVersion"></span></i></p>
'</ul>' + <script src="${
'<button id="reload">Reload</button>' +
'<hr />' +
'<p><i>Ultraviolet v<span id="uvVersion"></span></i></p>' +
`<script src="${
'data:application/javascript,' + encodeURIComponent(script) 'data:application/javascript,' + encodeURIComponent(script)
}"></script>` + }"></script>
'</body>' + </body>
'</html>' </html>
`
); );
} }
/**
* @typedef {import("@mercuryworkshop/bare-mux").BareError} BareError
*/
/**
*
* @param {unknown} err
* @returns {err is BareError}
*/
function isBareError(err) {
return err instanceof Error && typeof err.body === 'object';
}
/** /**
* *
* @param {unknown} err * @param {unknown} err
* @param {string} fetchedURL * @param {string} fetchedURL
* @param {string} bareServer
*/ */
function renderError(err, fetchedURL, bareServer) { function renderError(err, fetchedURL) {
/**
* @type {number}
*/
let status;
/**
* @type {string}
*/
let title;
/**
* @type {string}
*/
let code;
let id = '';
/**
* @type {string}
*/
let message;
let headers = { let headers = {
'content-type': 'text/html', 'content-type': 'text/html',
}; };
@ -569,31 +466,13 @@ function renderError(err, fetchedURL, bareServer) {
headers['Cross-Origin-Embedder-Policy'] = 'require-corp'; headers['Cross-Origin-Embedder-Policy'] = 'require-corp';
} }
if (isBareError(err)) {
status = err.status;
title = 'Error communicating with the Bare server';
message = err.body.message;
code = err.body.code;
id = err.body.id;
} else {
status = 500;
title = 'Error processing your request';
message = 'Internal Server Error';
code = err instanceof Error ? err.name : 'UNKNOWN';
}
return new Response( return new Response(
errorTemplate( errorTemplate(
title,
code,
id,
message,
String(err), String(err),
fetchedURL, fetchedURL
bareServer
), ),
{ {
status, status: 500,
headers: headers headers: headers
} }
); );