@capillarytech/cap-ui-dev-tools 1.6.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-dev-tools",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "Development tools for Capillary UI projects including webpack hot-reload plugin and CapVision session recording",
   "main": "src/index.js",
   "exports": {

package/src/capvision-recorder/adapters/WebdriverIOAdapter.js

@@ -64,8 +64,6 @@ class WebdriverIOCapVisionRecorder {
     /** @type {boolean} */
     this.cdpNetworkLoggingSetup = false;
 
-    /** @type {Object<string, string>} */
-    this.requestMap = {};
   }
 
   /**
@@ -163,47 +161,32 @@ class WebdriverIOCapVisionRecorder {
           this.browser.removeAllListeners('Network.requestWillBeSent');
           this.browser.removeAllListeners('Network.responseReceived');
           this.browser.removeAllListeners('Network.loadingFailed');
-          this.requestMap = {};
         } catch (e) {
           // Ignore errors when removing listeners
         }
       }
 
-      // Track requests to map requestId to URL
-      this.browser.on('Network.requestWillBeSent', (params) => {
-        const { requestId, request } = params;
-        this.requestMap[requestId] = request.url;
-      });
-
       this.browser.on('Network.responseReceived', async (params) => {
         const { response } = params;
         const url = response.url;
-        const requestId = response.headers['x-cap-request-id'] || 'N/A';
-
-        // Log to browser console so it gets captured by CapVision recorder
-        await this.browser.execute((url, requestId) => {
-          console.log(
-            '%c🌐 Network Request',
-            'color: #4CAF50; font-weight: bold; font-size: 12px;',
-            '\n  📍 URL:',
-            url,
-            '\n  🆔 Request ID:',
-            requestId,
-            '\n'
-          );
-        }, url, requestId);
-      });
-
-      // Log failed requests
-      this.browser.on('Network.loadingFailed', async (params) => {
-        const { requestId } = params;
-        const url = this.requestMap[requestId] || 'unknown';
-        const cap_requestId = params?.response?.headers['x-cap-request-id'] || 'N/A';
-
-        await this.browser.execute((url, cap_requestId) => {
-          console.log(`❌ Request failed (ID: ${cap_requestId})`, url);
-        }, url, cap_requestId);
-
+        const statusCode = response.status;
+        const cap_requestId = response.headers['x-cap-request-id'] || 'N/A';
+
+        if (statusCode >= 400) {
+          await this.browser.execute((url, cap_requestId, statusCode) => {
+            console.error(
+              '%c🔴 Network Request',
+              'color: #4CAF50; font-weight: bold; font-size: 12px;',
+              '\n  📍 URL:',
+              url,
+              '\n  🆔 Request ID:',
+              cap_requestId,
+              '\n  🔴 Status Code:',
+              statusCode,
+              '\n'
+            );
+          }, url, cap_requestId, statusCode);
+        }
       });
 
       this.cdpNetworkLoggingSetup = true;