fix(network): use interceptors when measuring request duration

packages/bruno-app/src/utils/network/index.js

@@ -1,10 +1,8 @@
 export const sendNetworkRequest = async (item, collection, environment, collectionVariables) => {
   return new Promise((resolve, reject) => {
     if (['http-request', 'graphql-request'].includes(item.type)) {
-      const timeStart = Date.now();
       sendHttpRequest(item, collection, environment, collectionVariables)
         .then((response) => {
-          const timeEnd = Date.now();
           resolve({
             state: 'success',
             data: response.data,
@@ -12,7 +10,7 @@ export const sendNetworkRequest = async (item, collection, environment, collecti
             size: response.headers['content-length'] || 0,
             status: response.status,
             statusText: response.statusText,
-            duration: timeEnd - timeStart
+            duration: response.duration
           });
         })
         .catch((err) => reject(err));

packages/bruno-electron/src/ipc/network/axios-instance.js

@@ -0,0 +1,38 @@
+const axios = require('axios');
+
+/**
+ * Function that configures axios with timing interceptors
+ * Important to note here that the timings are not completely accurate.
+ * @see https://github.com/axios/axios/issues/695
+ * @returns {import('axios').AxiosStatic}
+ */
+function makeAxiosInstance() {
+  /** @type {import('axios').AxiosStatic} */
+  const instance = axios.create();
+
+  instance.interceptors.request.use((config) => {
+    config.headers['request-start-time'] = Date.now();
+    return config;
+  });
+
+  instance.interceptors.response.use(
+    (response) => {
+      const end = Date.now();
+      const start = response.config.headers['request-start-time'];
+      response.headers['request-duration'] = end - start;
+      return response;
+    },
+    (error) => {
+      const end = Date.now();
+      const start = error.config.headers['request-start-time'];
+      error.response.headers['request-duration'] = end - start;
+      return Promise.reject(error);
+    }
+  );
+
+  return instance;
+}
+
+module.exports = {
+  makeAxiosInstance
+};

packages/bruno-electron/src/ipc/network/index.js

@@ -15,6 +15,7 @@ const { sortFolder, getAllRequestsInFolderRecursively } = require('./helper');
 const { getPreferences } = require('../../store/preferences');
 const { getProcessEnvVars } = require('../../store/process-env');
 const { getBrunoConfig } = require('../../store/bruno-config');
+const { makeAxiosInstance } = require('./axios-instance');
 
 // override the default escape function to prevent escaping
 Mustache.escape = function (value) {
@@ -240,7 +241,10 @@ const registerNetworkIpc = (mainWindow) => {
           });
         }
 
-        const response = await axios(request);
+        const axiosInstance = makeAxiosInstance();
+
+        /** @type {import('axios').AxiosResponse} */
+        const response = await axiosInstance(request);
 
         // run post-response vars
         const postResponseVars = get(request, 'vars.res', []);
@@ -343,12 +347,16 @@ const registerNetworkIpc = (mainWindow) => {
         }
 
         deleteCancelToken(cancelTokenUid);
+        // Prevents the duration on leaking to the actual result
+        const requestDuration = response.headers.get('request-duration');
+        response.headers.delete('request-duration');
 
         return {
           status: response.status,
           statusText: response.statusText,
           headers: response.headers,
-          data: response.data
+          data: response.data,
+          duration: requestDuration
         };
       } catch (error) {
         // todo: better error handling
@@ -416,11 +424,15 @@ const registerNetworkIpc = (mainWindow) => {
             });
           }
 
+          // Prevents the duration from leaking to the actual result
+          const requestDuration = error.response.headers.get('request-duration');
+          error.response.headers.delete('request-duration');
           return {
             status: error.response.status,
             statusText: error.response.statusText,
             headers: error.response.headers,
-            data: error.response.data
+            data: error.response.data,
+            duration: requestDuration ?? 0
           };
         }