Merge pull request #16 from gennaroterry/main

fix: Improve srcset rewriter to handle descriptors correctly.
MercuryWorkshop · Nov 17, 2024 · f0ee177 · f0ee177
2 parents a3a8eba + 5742a13
commit f0ee177
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 17 deletions.
diff --git a/src/shared/rewriters/html.ts b/src/shared/rewriters/html.ts
@@ -52,10 +52,13 @@ export function rewriteHtml(
 
 		const script = (src) => new Element("script", { src });
 
+		// for compatibility purpose
+		const base64Injected = bytesToBase64(new TextEncoder().encode(injected));
+
 		head.children.unshift(
 			script($scramjet.config.files.wasm),
 			script($scramjet.config.files.shared),
-			script("data:application/javascript;base64," + btoa(injected)),
+			script("data:application/javascript;base64," + base64Injected),
 			script($scramjet.config.files.client)
 		);
 	}
@@ -283,17 +286,20 @@ function traverseParsedHtml(
 }
 
 export function rewriteSrcset(srcset: string, meta: URLMeta) {
-	const urls = srcset.split(/ [0-9]+x,? ?/g);
-	if (!urls) return "";
-	const sufixes = srcset.match(/ [0-9]+x,? ?/g);
-	if (!sufixes) return "";
-	const rewrittenUrls = urls.map((url, i) => {
-		if (url && sufixes[i]) {
-			return rewriteUrl(url, meta) + sufixes[i];
-		}
+	const sources = srcset.split(",").map((src) => src.trim());
+	const rewrittenSources = sources.map((source) => {
+		// Split into URLs and descriptors (if any)
+		// e.g. url0, url1 1.5x, url2 2x
+		const [url, ...descriptors] = source.split(/\s+/);
+
+		// Rewrite the URLs and keep the descriptors (if any)
+		const rewrittenUrl = rewriteUrl(url.trim(), meta);
+		return descriptors.length > 0
+			? `${rewrittenUrl} ${descriptors.join(" ")}`
+			: rewrittenUrl;
 	});
 
-	return rewrittenUrls.join("");
+	return rewrittenSources.join(", ");
 }
 
 // function base64ToBytes(base64) {

diff --git a/src/worker/error.ts b/src/worker/error.ts
@@ -9,6 +9,14 @@ export function errorTemplate(trace: string, fetchedURL: string) {
                 reload.addEventListener("click", () => location.reload());
                 version.textContent = ${JSON.stringify($scramjet.version.version)};
                 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>
@@ -94,10 +102,11 @@ export function errorTemplate(trace: string, fetchedURL: string) {
                     }
 
                     #version-wrapper {
-                        width: 100%;
-                        text-align: center;
+                        width: auto;
+                        text-align: right;
                         position: absolute;
-                        bottom: 0.2rem;
+                        top: 0.5rem;
+                        right: 0.5rem;
                         font-size: 0.8rem;
                         color: var(--shore)!important;
                         i {
@@ -107,6 +116,26 @@ export function errorTemplate(trace: string, fetchedURL: string) {
                         }
                         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>
                 </head>
                 <body>
@@ -117,8 +146,10 @@ export function errorTemplate(trace: string, fetchedURL: string) {
                         <!-- <p id="errorMessage">Internal Server Error</p> -->
 
                         <div id="info">
-                            <textarea id="errorTrace" cols="40" rows="10" readonly>
-                            </textarea>
+                            <div id="errorTrace-wrapper">
+                                <textarea id="errorTrace" cols="40" rows="10" readonly></textarea>
+                                <button id="copy-button" class="primary">Copy</button>
+                            </div>
                             <div id="troubleshooting">
                                 <p>Try:</p>
                                 <ul>

diff --git a/src/worker/fetch.ts b/src/worker/fetch.ts
@@ -178,11 +178,29 @@ export async function handleFetch(
 			this
 		);
 	} 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))
 			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));
 	}
 }