From 1444946afad94497dca7d74bf5a5014c3a19155e Mon Sep 17 00:00:00 2001
From: Arthur Kushka <arhelmus@fb.com>
Date: Mon, 17 Jun 2019 02:59:52 -0700
Subject: [PATCH] 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 | 19 +++++++++++++++++--
 src/plugins/network/types.js          |  7 +++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/plugins/network/RequestDetails.js b/src/plugins/network/RequestDetails.js
index 3544933ca..08834e2e3 100644
--- a/src/plugins/network/RequestDetails.js
+++ b/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),
diff --git a/src/plugins/network/types.js b/src/plugins/network/types.js
index e3c254e0f..ad8adcf53 100644
--- a/src/plugins/network/types.js
+++ b/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,
 |};