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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-dev-tools",
-  "version": "1.6.0",
+  "version": "1.7.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

@@ -66,6 +66,9 @@ class WebdriverIOCapVisionRecorder {
 
     /** @type {Object<string, string>} */
     this.requestMap = {};
+
+    /** @type {Object<string, {headers: Object, status: number}>} */
+    this.responseInfo = {};
   }
 
   /**
@@ -164,6 +167,7 @@ class WebdriverIOCapVisionRecorder {
           this.browser.removeAllListeners('Network.responseReceived');
           this.browser.removeAllListeners('Network.loadingFailed');
           this.requestMap = {};
+          this.responseInfo = {};
         } catch (e) {
           // Ignore errors when removing listeners
         }
@@ -176,33 +180,45 @@ class WebdriverIOCapVisionRecorder {
       });
 
       this.browser.on('Network.responseReceived', async (params) => {
-        const { response } = params;
+        const { requestId, response } = params;
         const url = response.url;
-        const requestId = response.headers['x-cap-request-id'] || 'N/A';
+        const cap_requestId = response.headers['x-cap-request-id'] || 'N/A';
 
+        this.responseInfo[requestId] = {
+          headers: response.headers,
+          status: response.status,
+        };
         // 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);
+        if (url && url.includes('capillarytech')) {
+          await this.browser.execute((url, cap_requestId) => {
+            console.log(
+              '%c🌐 Network Request',
+              'color: #4CAF50; font-weight: bold; font-size: 12px;',
+              '\n  📍 URL:',
+              url,
+              '\n  🆔 Request ID:',
+              cap_requestId,
+              '\n'
+            );
+          }, url, cap_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 info = this.responseInfo[requestId] || {};
+        const headers = info.headers || {};
+        const cap_requestId = headers['x-cap-request-id'] || 'N/A';
+        const statusCode = info.status || 'status N/A';
+
+        if (url && url.includes('capillarytech')) {
+          await this.browser.execute((url, statusCode, cap_requestId) => {
+            console.log(`❌ Request failed (ID: ${cap_requestId}) URL: ${url} Status Code: ${statusCode}`);
+          }, url, cap_requestId, statusCode);
+        }
 
       });