@playwright-opentelemetry/trace-viewer 0.2.0 → 0.3.3

package/README.md

@@ -5,3 +5,41 @@ A SolidJS single-page application for viewing Playwright test execution traces i
 ## Overview
 
 This trace viewer provides a rich, interactive visualization of Playwright test runs that have been exported to OpenTelemetry format. It displays test steps, timing information, screenshots captured during execution, and additional trace data like HTTP requests.
+
+## Run the trace viewer
+
+To boot the trace viewer on `localhost:9294`:
+
+```bash
+npx @playwright-opentelemetry/trace-viewer
+```
+
+## Deploy Your Own
+
+### Cloudflare
+
+You can deploy a copy of the trace viewer to Cloudflare:
+
+```bash
+git clone https://github.com/endformdev/playwright-opentelemetry.git
+cd playwright-opentelemetry/trace-viewer
+
+pnpm install
+pnpm build
+pnpm deploy
+```
+
+### Custom Base Path (Optional)
+
+If you want to build with absolute paths for a specific deployment location:
+
+```bash
+TRACE_VIEWER_BASE=/trace-viewer/ pnpm build
+```
+
+## Local Development
+
+```bash
+pnpm install
+pnpm dev
+```

package/bin/serve.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
+import { access, readFile } from "node:fs/promises";
 import { createServer } from "node:http";
-import { readFile, access } from "node:fs/promises";
-import { join, extname } from "node:path";
+import { extname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
@@ -32,7 +32,7 @@ function parseArgs() {
 	for (let i = 0; i < args.length; i++) {
 		if (args[i] === "--port" && args[i + 1]) {
 			const parsed = parseInt(args[i + 1], 10);
-			if (!isNaN(parsed) && parsed > 0 && parsed < 65536) {
+			if (!Number.isNaN(parsed) && parsed > 0 && parsed < 65536) {
 				port = parsed;
 			} else {
 				console.error(`Invalid port: ${args[i + 1]}`);
@@ -84,6 +84,7 @@ async function serveFile(filePath, res) {
 		res.writeHead(200, headers);
 		res.end(content);
 	} catch (err) {
+		console.error("Error serving file:", err);
 		res.writeHead(500, { "Content-Type": "text/plain" });
 		res.end("Internal Server Error");
 	}
@@ -91,7 +92,7 @@ async function serveFile(filePath, res) {
 
 async function handleRequest(req, res) {
 	const url = new URL(req.url, `http://${req.headers.host}`);
-	let pathname = url.pathname;
+	const pathname = url.pathname;
 
 	// Security: prevent directory traversal
 	if (pathname.includes("..")) {
@@ -157,15 +158,19 @@ async function openBrowser(url) {
 async function main() {
 	const { port } = parseArgs();
 
-	// Check if dist directory exists
-	if (!(await fileExists(DIST_DIR))) {
-		console.error("Error: dist/ directory not found. Run 'pnpm build' first.");
-		process.exit(1);
-	}
-
 	const server = createServer(handleRequest);
 
-	server.listen(port, () => {
+	server.on("error", (err) => {
+		if (err.code === "EADDRINUSE") {
+			console.error(`\n  ❌ Error: Port ${port} is already in use\n`);
+			console.error(`  Try using a different port: --port <number>\n`);
+		} else {
+			console.error("Server error:", err.message);
+		}
+		process.exit(1);
+	});
+
+	server.listen(port, "localhost", () => {
 		const url = `http://localhost:${port}`;
 		console.log(`
   Playwright OpenTelemetry Trace Viewer
@@ -176,16 +181,6 @@ async function main() {
 `);
 		openBrowser(url);
 	});
-
-	server.on("error", (err) => {
-		if (err.code === "EADDRINUSE") {
-			console.error(`Error: Port ${port} is already in use.`);
-			console.error(`Try using a different port: --port <number>`);
-		} else {
-			console.error("Server error:", err.message);
-		}
-		process.exit(1);
-	});
 }
 
 main();