mercuryworkshop-mirror/scramjet
1
0
Fork 0
mirror of https://github.com/MercuryWorkshop/scramjet.git synced 2025-05-16 07:30:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: enhance worker error message readability and details.

Browse source
This commit is contained in:
Terry 2024-11-11 13:38:51 +00:00
parent 3015dff77d
commit 4455930d28
2 changed files with 57 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/worker/error.ts
View file

@ -9,6 +9,14 @@ export function errorTemplate(trace: string, fetchedURL: string) {
reload.addEventListener("click", () => location.reload()); reload.addEventListener("click", () => location.reload());
version.textContent = ${JSON.stringify($scramjet.version.version)}; version.textContent = ${JSON.stringify($scramjet.version.version)};
build.textContent = ${JSON.stringify($scramjet.version.build)}; build.textContent = ${JSON.stringify($scramjet.version.build)};
document.getElementById('copy-button').addEventListener('click', async () => {
const text = document.getElementById('errorTrace').value;
await navigator.clipboard.writeText(text);
const btn = document.getElementById('copy-button');
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = 'Copy', 2000);
});
`; `;
return `<!DOCTYPE html> return `<!DOCTYPE html>
@ -54,6 +62,7 @@ export function errorTemplate(trace: string, fetchedURL: string) {
resize: none; resize: none;
height: 20em; height: 20em;
text-align: left; text-align: left;
color: red;
font-family: var(--font-monospace); font-family: var(--font-monospace);
} }
@ -94,10 +103,11 @@ export function errorTemplate(trace: string, fetchedURL: string) {
} }
#version-wrapper { #version-wrapper {
width: 100%; width: auto;
text-align: center; text-align: right;
position: absolute; position: absolute;
bottom: 0.2rem; top: 0.5rem;
right: 0.5rem;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--shore)!important; color: var(--shore)!important;
i { i {
@ -107,6 +117,26 @@ export function errorTemplate(trace: string, fetchedURL: string) {
} }
z-index: 101; z-index: 101;
} }
#errorTrace-wrapper {
position: relative;
width: fit-content;
}
#copy-button {
position: absolute;
top: 0.5em;
right: 0.5em;
padding: 0.23em;
cursor: pointer;
opacity: 0;
transition: opacity 0.4s;
font-size: 0.9em;
}
#errorTrace-wrapper:hover #copy-button {
opacity: 1;
}
</style> </style>
</head> </head>
<body> <body>
@ -117,8 +147,10 @@ export function errorTemplate(trace: string, fetchedURL: string) {
<!-- <p id="errorMessage">Internal Server Error</p> --> <!-- <p id="errorMessage">Internal Server Error</p> -->
<div id="info"> <div id="info">
<textarea id="errorTrace" cols="40" rows="10" readonly> <div id="errorTrace-wrapper">
</textarea> <textarea id="errorTrace" cols="40" rows="10" readonly></textarea>
<button id="copy-button" class="primary">Copy</button>
</div>
<div id="troubleshooting"> <div id="troubleshooting">
<p>Try:</p> <p>Try:</p>
<ul> <ul>

22
src/worker/fetch.ts
View file

@ -179,11 +179,29 @@ export async function swfetch(
this this
); );
} catch (err) { } catch (err) {
console.error("ERROR FROM SERVICE WORKER FETCH", err); const errorDetails = {
message: err.message,
url: request.url,
destination: request.destination,
timestamp: new Date().toISOString(),
};
if (err.stack) {
errorDetails["stack"] = err.stack;
}
console.error("ERROR FROM SERVICE WORKER FETCH: ", errorDetails);
if (!["document", "iframe"].includes(request.destination)) if (!["document", "iframe"].includes(request.destination))
return new Response(undefined, { status: 500 }); return new Response(undefined, { status: 500 });
return renderError(err, unrewriteUrl(request.url)); const formattedError = Object.entries(errorDetails)
.map(
([key, value]) =>
`${key.charAt(0).toUpperCase() + key.slice(1)}: ${value}`
)
.join("\n\n");
return renderError(formattedError, unrewriteUrl(request.url));
} }
} }