FrameRateLogger JS module

Summary:
This adds a flowified JS module for the FrameRateLogger native module and plugs
it into `ScrollResponder` and `AppRegistry`.

If there is no `FrameRateLogger` native module, then the function calls will be no-ops.

One major limitation is that we can't track animated/programatic scrolls because we don't
have reliable end events. Would be generally useful to add those in a followup though.

Reviewed By: fkgozali

Differential Revision: D4765694

fbshipit-source-id: f3bec771df6ac918200c1afd1a7d8b6da540a4e2

Libraries/Components/ScrollResponder.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var Dimensions = require('Dimensions');
+var FrameRateLogger = require('FrameRateLogger');
 var Platform = require('Platform');
 var Keyboard = require('Keyboard');
 var ReactNative = require('ReactNative');
@@ -295,6 +296,7 @@ var ScrollResponderMixin = {
    * Invoke this from an `onScrollBeginDrag` event.
    */
   scrollResponderHandleScrollBeginDrag: function(e: Event) {
+    FrameRateLogger.beginScroll(); // TODO: track all scrolls after implementing onScrollEndAnimation
     this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
   },
 
@@ -302,6 +304,16 @@ var ScrollResponderMixin = {
    * Invoke this from an `onScrollEndDrag` event.
    */
   scrollResponderHandleScrollEndDrag: function(e: Event) {
+    const {velocity} = e.nativeEvent;
+    // - If we are animating, then this is a "drag" that is stopping the scrollview and momentum end
+    //   will fire.
+    // - If velocity is non-zero, then the interaction will stop when momentum scroll ends or
+    //   another drag starts and ends.
+    // - If we don't get velocity, better to stop the interaction twice than not stop it.
+    if (!this.scrollResponderIsAnimating() &&
+        (!velocity || velocity.x === 0 && velocity.y === 0)) {
+      FrameRateLogger.endScroll();
+    }
     this.props.onScrollEndDrag && this.props.onScrollEndDrag(e);
   },
 
@@ -317,6 +329,7 @@ var ScrollResponderMixin = {
    * Invoke this from an `onMomentumScrollEnd` event.
    */
   scrollResponderHandleMomentumScrollEnd: function(e: Event) {
+    FrameRateLogger.endScroll();
     this.state.lastMomentumScrollEndTime = Date.now();
     this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e);
   },

Libraries/Interaction/FrameRateLogger.js

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule FrameRateLogger
+ * @flow
+ */
+'use strict';
+
+const NativeModules = require('NativeModules');
+
+const invariant = require('fbjs/lib/invariant');
+
+/**
+ * Flow API for native FrameRateLogger module. If the native module is not installed, function calls
+ * are just no-ops.
+ *
+ * Typical behavior is that `setContext` is called when a new screen is loaded (e.g. via a
+ * navigation integration), and then `beginScroll` is called by `ScrollResponder` at which point the
+ * native module then begins tracking frame drops. When `ScrollResponder` calls `endScroll`, the
+ * native module gathers up all it's frame drop data and reports it via an analytics pipeline for
+ * analysis.
+ *
+ * Note that `beginScroll` may be called multiple times by `ScrollResponder` - unclear if that's a
+ * bug, but the native module should be robust to that.
+ *
+ * In the future we may add support for tracking frame drops in other types of interactions beyond
+ * scrolling.
+ */
+const FrameRateLogger = {
+  /**
+   * Enable `debug` to see local logs of what's going on. `reportStackTraces` will grab stack traces
+   * during UI thread stalls and upload them if the native module supports it.
+   */
+  setGlobalOptions: function(options: {debug?: boolean, reportStackTraces?: boolean}) {
+    if (options.debug !== undefined) {
+      invariant(
+        NativeModules.FrameRateLogger,
+        'Trying to debug FrameRateLogger without the native module!',
+      );
+    }
+    NativeModules.FrameRateLogger && NativeModules.FrameRateLogger.setGlobalOptions(options);
+  },
+
+  /**
+   * Must call `setContext` before any events can be properly tracked, which is done automatically
+   * in `AppRegistry`, but navigation is also a common place to hook in.
+   */
+  setContext: function(context: string) {
+    NativeModules.FrameRateLogger && NativeModules.FrameRateLogger.setContext(context);
+  },
+
+  /**
+   * Called in `ScrollResponder` so any component that uses that module will handle this
+   * automatically.
+   */
+  beginScroll() {
+    NativeModules.FrameRateLogger && NativeModules.FrameRateLogger.beginScroll();
+  },
+
+  /**
+   * Called in `ScrollResponder` so any component that uses that module will handle this
+   * automatically.
+   */
+  endScroll() {
+    NativeModules.FrameRateLogger && NativeModules.FrameRateLogger.endScroll();
+  },
+};
+
+module.exports = FrameRateLogger;

Libraries/ReactNative/AppRegistry.js

@@ -13,6 +13,7 @@
 
 const BatchedBridge = require('BatchedBridge');
 const BugReporting = require('BugReporting');
+const FrameRateLogger = require('FrameRateLogger');
 const NativeModules = require('NativeModules');
 const ReactNative = require('ReactNative');
 
@@ -172,6 +173,7 @@ const AppRegistry = {
       'This error can also happen due to a require() error during ' +
       'initialization or failure to call AppRegistry.registerComponent.\n\n'
     );
+    FrameRateLogger.setContext(appKey);
     runnables[appKey].run(appParameters);
   },