Relay: Print Estimated Request Size

Reviewed By: kassens

Differential Revision: D3754378

fbshipit-source-id: c1142245888b7e511740ea42ccf8f12cd499cd3b

src/tools/RelayNetworkDebug.js

@@ -19,6 +19,7 @@ const Relay = require('RelayPublic');
 import type RelayQueryRequest from 'RelayQueryRequest';
 
 const performanceNow = require('performanceNow');
+const xhrSimpleDataSerializer = require('xhrSimpleDataSerializer');
 
 export type RelayNetworkDebuggable = {
   name: string,
@@ -51,13 +52,17 @@ class RelayNetworkDebugger {
     const id = this._queryID++;
     const timerName = `[${id}] Request Duration`;
 
-    /* eslint-disable no-console */
-    console.timeStamp && console.timeStamp(`START: [${id}] ${type}: ${name} →`);
+    /* eslint-disable no-console-disallow */
+    console.timeStamp && console.timeStamp(
+      `START: [${id}] ${type}: ${name} \u2192`
+    );
     console.time && console.time(timerName);
 
     const onSettled = (error, response) => {
       const time = (performanceNow() - this._initTime) / 1000;
-      console.timeStamp && console.timeStamp(`← END: [${id}] ${type}: ${name}`);
+      console.timeStamp && console.timeStamp(
+        `\u2190 END: [${id}] ${type}: ${name}`
+      );
       const groupName = `%c[${id}] ${type}: ${name} @ ${time}s`;
       console.groupCollapsed ?
         console.groupCollapsed(
@@ -69,7 +74,7 @@ class RelayNetworkDebugger {
       logResult(error, response);
       console.groupEnd && console.groupEnd();
     };
-    /* eslint-enable no-console */
+    /* eslint-enable no-console-disallow */
 
     promise.then(
       response => onSettled(null, response),
@@ -87,21 +92,45 @@ function createDebuggableFromRequest(
     type,
     promise: request.getPromise(),
     logResult(error, response) {
-      /* eslint-disable no-console */
+      /* eslint-disable no-console-disallow */
+      console.debug(
+        'Request Size (Estimate): %s',
+        formatSize(
+          xhrSimpleDataSerializer({
+            q: request.getQueryString(),
+            query_params: request.getVariables(),
+          }).length
+        )
+      );
+
       console.debug && console.debug(
         '%c%s\n',
         'font-size:10px; color:#333; font-family:mplus-2m-regular,menlo,' +
         'monospaced;',
         request.getQueryString()
       );
-      console.log('Request variables\n', request.getVariables());
+
+
+      console.log('Request Variables\n', request.getVariables());
       error && console.error(error);
       response && console.log(response);
-      /* eslint-enable no-console */
+      /* eslint-enable no-console-disallow */
     },
   };
 }
 
+const ALL_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+function formatSize(bytes: number): string {
+  const sign = bytes < 0 ? -1 : 1;
+  bytes = Math.abs(bytes);
+  let i = 0;
+  while (bytes >= Math.pow(1024, i + 1) && i < ALL_UNITS.length) {
+    i++;
+  }
+  const value = sign * bytes * 1.0 / Math.pow(1024, i);
+  return Number(value.toFixed(2)) + ALL_UNITS[i];
+}
+
 let networkDebugger: ?RelayNetworkDebugger;
 
 const RelayNetworkDebug = {