Added retries information to Insights tab of Networking plugin

Summary:
In React VR we doing automatic retries in cases when request takes too much time. It helps in cases when network quality is poor. As long as this implicit for developer, we would like to highlight this information in insights. It helps to explain why request were so long.

This diff adds one more field to insights which displays amount of time spent on retries, count and limit of them.

https://pxl.cl/CntV

Reviewed By: passy

Differential Revision: D15845598

fbshipit-source-id: 3e0d1baf93b6be5c4d1c6c1d2b64c05852b843b7

src/plugins/network/RequestDetails.js

@@ -5,7 +5,13 @@
  * @format
  */
 
-import type {Request, Response, Header, Insights} from './types.js';
+import type {
+  Request,
+  Response,
+  Header,
+  Insights,
+  RetryInsights,
+} from './types.js';
 
 import {
   Component,
@@ -731,6 +737,14 @@ class InsightsInspector extends Component<{insights: Insights}> {
     return `${formatBytes(value)}/sec`;
   }
 
+  formatRetries(retry: RetryInsights): string {
+    const timesWord = retry.limit === 1 ? 'time' : 'times';
+
+    return `${this.formatTime(retry.timeSpent)} (${
+      retry.count
+    } ${timesWord} out of ${retry.limit})`;
+  }
+
   buildRow<T>(name: string, value: ?T, formatter: T => string): any {
     return value
       ? {
@@ -750,9 +764,10 @@ class InsightsInspector extends Component<{insights: Insights}> {
 
   render() {
     const insights = this.props.insights;
-    const {buildRow, formatTime, formatSpeed} = this;
+    const {buildRow, formatTime, formatSpeed, formatRetries} = this;
 
     const rows = [
+      buildRow('Retries', insights.retries, formatRetries.bind(this)),
       buildRow('DNS lookup time', insights.dnsLookupTime, formatTime),
       buildRow('Connect time', insights.connectTime, formatTime),
       buildRow('SSL handshake time', insights.sslHandshakeTime, formatTime),

src/plugins/network/types.js

@@ -31,6 +31,12 @@ export type Header = {|
   value: string,
 |};
 
+export type RetryInsights = {|
+  count: number,
+  limit: number,
+  timeSpent: number,
+|};
+
 export type Insights = {|
   dnsLookupTime: ?number,
   connectTime: ?number,
@@ -43,4 +49,5 @@ export type Insights = {|
   // Amount of transferred data can be different from total size of payload.
   bytesTransfered: ?number,
   transferSpeed: ?number,
+  retries: ?RetryInsights,
 |};