Add request logging and error handling to artifact and frontend servers (#4829)

Co-authored-by: Claude <noreply@anthropic.com>

skyvern-frontend/artifactServer.js

@@ -6,9 +6,32 @@ const app = express();
 
 app.use(cors());
 
+// Request logging middleware — logs method, path, status, and duration
+app.use((req, res, next) => {
+  const start = Date.now();
+  res.on("finish", () => {
+    const duration = Date.now() - start;
+    const timestamp = new Date().toISOString();
+    const artifactPath = req.query.path || "";
+    console.log(
+      "[%s] %s %s %d %dms %s",
+      timestamp,
+      req.method,
+      req.path,
+      res.statusCode,
+      duration,
+      artifactPath,
+    );
+  });
+  next();
+});
+
 app.get("/artifact/recording", (req, res) => {
   const range = req.headers.range;
   const path = req.query.path;
+  if (!path || !range) {
+    return res.status(400).send("Missing path or range header");
+  }
   const videoSize = fs.statSync(path).size;
   const chunkSize = 1 * 1e6;
   const start = Number(range.replace(/\D/g, ""));
@@ -50,4 +73,21 @@ app.get("/artifact/text", (req, res) => {
   res.send(contents);
 });
 
-app.listen(9090);
+// Error handling middleware — catches unhandled errors in routes
+app.use((err, req, res, _next) => {
+  const timestamp = new Date().toISOString();
+  console.error(
+    "[%s] ERROR %s %s:",
+    timestamp,
+    req.method,
+    req.path,
+    err.message,
+  );
+  res.status(500).send("Internal server error");
+});
+
+app.listen(9090, () => {
+  console.log(
+    `[${new Date().toISOString()}] Artifact server running at http://localhost:9090`,
+  );
+});

skyvern-frontend/localServer.js

@@ -6,6 +6,22 @@ const port = 8080;
 const url = `http://localhost:${port}`;
 
 const server = createServer((request, response) => {
+  const start = Date.now();
+
+  // Hook into response finish to log status
+  response.on("finish", () => {
+    const duration = Date.now() - start;
+    const timestamp = new Date().toISOString();
+    console.log(
+      "[%s] %s %s %d %dms",
+      timestamp,
+      request.method,
+      request.url,
+      response.statusCode,
+      duration,
+    );
+  });
+
   // You pass two more arguments for config and middleware
   // More details here: https://github.com/vercel/serve-handler#options
   return handler(request, response, {
@@ -20,6 +36,8 @@ const server = createServer((request, response) => {
 });
 
 server.listen(8080, async () => {
-  console.log(`Running at ${url}`);
+  console.log(
+    `[${new Date().toISOString()}] Frontend server running at ${url}`,
+  );
   await open(url);
 });