imporove debug logging in studio-mode webserver

Author: NiloCK

.github/workflows/ci-pkg-cli.yml

@@ -93,7 +93,13 @@ jobs:
       - name: Start studio mode for custom questions workflow
         working-directory: packages/cli/testproject-empty
         run: |
-          npx skuilder studio --no-browser &
+          npx skuilder studio --no-browser > ../../studio.log 2>&1 &
+          STUDIO_PID=$!
+          echo "Studio process started with PID: $STUDIO_PID"
+          sleep 5
+          echo "Checking if studio process is still running..."
+          ps -p $STUDIO_PID || echo "WARNING: Studio process already exited"
+          echo "Waiting for studio server to be ready..."
           npx wait-on http://localhost:7174 --timeout 120000
 
       - name: Run custom questions studio mode tests
@@ -112,6 +118,15 @@ jobs:
         run: |
           npm run dev &
           npx wait-on http://localhost:6173 --timeout 60000
+
+      - name: Upload studio log on failure
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: studio-log
+          path: packages/cli/studio.log
+          retention-days: 7
+
       - name: Upload screenshots on failure
         uses: actions/upload-artifact@v4
         if: failure()

packages/cli/src/commands/studio.ts

@@ -432,6 +432,13 @@ async function startStudioUIServer(
 
   console.log(chalk.gray(`   Serving studio-ui from: ${studioSourcePath}`));
 
+  const indexHtmlPath = path.join(studioSourcePath, 'index.html');
+  if (!fs.existsSync(indexHtmlPath)) {
+    console.error(chalk.red(`   ERROR: index.html not found at ${indexHtmlPath}`));
+    throw new Error(`Studio-UI index.html missing at ${indexHtmlPath}`);
+  }
+  console.log(chalk.gray(`   Verified index.html exists at: ${indexHtmlPath}`));
+
   const serve = serveStatic(studioSourcePath, {
     index: ['index.html'],
     setHeaders: (res, path) => {
@@ -457,10 +464,12 @@ async function startStudioUIServer(
     try {
       await new Promise<void>((resolve, reject) => {
         const server = http.createServer((req, res) => {
-          const url = new URL(req.url || '/', `http://${req.headers.host}`);
+          try {
+            console.log(chalk.gray(`   [Studio HTTP] ${req.method} ${req.url} from ${req.socket.remoteAddress}`));
+            const url = new URL(req.url || '/', `http://${req.headers.host || 'localhost:7174'}`);
 
-          // Inject config for index.html
-          if (url.pathname === '/' || url.pathname === '/index.html') {
+            // Inject config for index.html
+            if (url.pathname === '/' || url.pathname === '/index.html') {
             const indexPath = path.join(studioSourcePath, 'index.html');
             let html = fs.readFileSync(indexPath, 'utf8');
             const connectionScript = `
@@ -517,14 +526,31 @@ async function startStudioUIServer(
             res.setHeader('Content-Type', 'text/html');
             res.end(html);
           });
+          } catch (error) {
+            console.error(chalk.red(`   [Studio HTTP] Error handling request: ${error}`));
+            res.statusCode = 500;
+            res.end('Internal Server Error');
+          }
+        });
+
+        server.on('listening', () => {
+          const addr = server.address();
+          console.log(chalk.gray(`   [Studio HTTP] Server listening event fired, address: ${JSON.stringify(addr)}`));
+        });
+
+        server.on('connection', (socket) => {
+          console.log(chalk.gray(`   [Studio HTTP] New connection from ${socket.remoteAddress}:${socket.remotePort}`));
         });
 
         server.listen(port, '0.0.0.0', () => {
           studioUIServer = server;
+          const addr = server.address();
+          console.log(chalk.gray(`   [Studio HTTP] Listen callback fired, address: ${JSON.stringify(addr)}`));
           resolve();
         });
 
         server.on('error', (err: NodeJS.ErrnoException) => {
+          console.error(chalk.red(`   [Studio HTTP] Server error: ${err.code} - ${err.message}`));
           if (err.code === 'EADDRINUSE') {
             reject(err);
           } else {