Merge pull request #241 from kassens/globalhook

Instrument Relay on page load time instead of when the devtools are opened

Author: kassens

plugins/Relay/backend.js

@@ -13,18 +13,6 @@
 import type Bridge from '../../agent/Bridge';
 import type Agent from '../../agent/Agent';
 
-import guid from '../../utils/guid';
-
-function decorate(obj, attr, fn) {
-  var old = obj[attr];
-  obj[attr] = function() {
-    var res = old.apply(this, arguments);
-    fn.apply(this, arguments);
-    return res;
-  };
-  return () => (obj[attr] = old);
-}
-
 module.exports = (bridge: Bridge, agent: Agent, hook: Object) => {
   var shouldEnable = !!(
     hook._relayInternals &&
@@ -35,45 +23,14 @@ module.exports = (bridge: Bridge, agent: Agent, hook: Object) => {
   if (!shouldEnable) {
     return;
   }
-  var NetworkLayer = hook._relayInternals.NetworkLayer;
-
-  bridge.send('relay:store', {id: 'relay:store', nodes: hook._relayInternals.DefaultStoreData.getNodeData()});
-  var restore = [
-    decorate(NetworkLayer, 'sendMutation', mut => {
-      var id = guid();
-      bridge.send('relay:pending', [{
-        id,
-        type: 'mutation',
-        start: Date.now(),
-        text: mut.getQueryString(),
-        variables: mut.getVariables(),
-        name: mut.getDebugName(),
-      }]);
-      mut.then(
-        response => bridge.send('relay:success', {id, response: response.response, end: Date.now()}),
-        error => bridge.send('relay:failure', {id, error, end: Date.now()})
-      );
-    }),
+  var {
+    DefaultStoreData,
+    setRequestListener,
+  } = hook._relayInternals;
 
-    decorate(NetworkLayer, 'sendQueries', queries => {
-      bridge.send('relay:pending', queries.map(q => {
-        var id = guid();
-        q.then(
-          response => bridge.send('relay:success', {id, response: response.response, end: Date.now()}),
-          error => bridge.send('relay:failure', {id, error, end: Date.now()})
-        );
-        return {
-          id,
-          type: 'query',
-          start: Date.now(),
-          text: q.getQueryString(),
-          variables: q.getVariables(),
-          name: q.getDebugName(),
-        };
-      }));
-    }),
-  ];
-  hook.on('shutdown', () => {
-    restore.forEach(fn => fn());
+  bridge.send('relay:store', {id: 'relay:store', nodes: DefaultStoreData.getNodeData()});
+  var removeListener = setRequestListener((event, data) => {
+    bridge.send(event, data);
   });
+  hook.on('shutdown', removeListener);
 };

plugins/Relay/installRelayHook.js

@@ -0,0 +1,119 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+/**
+ * NOTE: This file cannot `require` any other modules. We `.toString()` the
+ *       function in some places and inject the source into the page.
+ */
+function installRelayHook(window: Object) {
+  var hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!hook) {
+    return;
+  }
+
+  function decorate(obj, attr, fn) {
+    var old = obj[attr];
+    obj[attr] = function() {
+      var res = old.apply(this, arguments);
+      fn.apply(this, arguments);
+      return res;
+    };
+  }
+
+  var _eventQueue = [];
+  var _listener = null;
+  function emit(name: string, data: mixed) {
+    _eventQueue.push({name, data});
+    if (_listener) {
+      _listener(name, data);
+    }
+  }
+
+  function setRequestListener(
+    listener: (name: string, data: mixed) => void
+  ): () => void {
+    if (_listener) {
+      throw new Error(
+        'Relay Devtools: Called only call setRequestListener once.'
+      );
+    }
+    _listener = listener;
+    _eventQueue.forEach(({name, data}) => {
+      listener(name, data);
+    });
+
+    return () => {
+      _listener = null;
+    };
+  }
+
+  function recordRequest(type: 'mutation' | 'query', request) {
+    var id = Math.random().toString(16).substr(2);
+    request.then(
+      response => {
+        emit('relay:success', {
+          id: id,
+          end: Date.now(),
+          response: response.response,
+        });
+      },
+      error => {
+        emit('relay:failure', {
+          id: id,
+          end: Date.now(),
+          error: error,
+        });
+      },
+    );
+    return {
+      id: id,
+      type: type,
+      start: Date.now(),
+      text: request.getQueryString(),
+      variables: request.getVariables(),
+      name: request.getDebugName(),
+    };
+  }
+
+  function instrumentRelayRequests(relayInternals: Object) {
+    var NetworkLayer = relayInternals.NetworkLayer;
+
+    decorate(NetworkLayer, 'sendMutation', mutation => {
+      emit('relay:pending', [recordRequest('mutation', mutation)]);
+    });
+
+    decorate(NetworkLayer, 'sendQueries', queries => {
+      emit('relay:pending', queries.map(query => recordRequest('query', query)));
+    });
+
+    var instrumented = {};
+    for (var key in relayInternals) {
+      if (relayInternals.hasOwnProperty(key)) {
+        instrumented[key] = relayInternals[key];
+      }
+    }
+    instrumented.setRequestListener = setRequestListener;
+    return instrumented;
+  }
+
+  var _relayInternals = null;
+  Object.defineProperty(hook, '_relayInternals', ({
+    set: function(relayInternals) {
+      _relayInternals = instrumentRelayRequests(relayInternals);
+    },
+    get: function() {
+      return _relayInternals;
+    },
+  }: any));
+}
+
+module.exports = installRelayHook;

shells/chrome/src/GlobalHook.js

@@ -14,6 +14,7 @@
 // devtools are installed (and skip its suggestion to install the devtools).
 
 var installGlobalHook = require('../../../backend/installGlobalHook.js');
+var installRelayHook = require('../../../plugins/Relay/installRelayHook.js');
 
 var saveNativeValues = `
 window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeObjectCreate = Object.create;
@@ -23,7 +24,9 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;
 `;
 
 var js = (
-  ';(' + installGlobalHook.toString() + '(window))'
+  ';(' + installGlobalHook.toString() + '(window))' +
+  ';(' + installRelayHook.toString() + '(window))' +
+  saveNativeValues
 );
 
 // This script runs before the <head> element is created, so we add the script

shells/plain/container.js

@@ -12,6 +12,7 @@
 
 var React = require('react');
 var installGlobalHook = require('../../backend/installGlobalHook');
+var installRelayHook = require('../../plugins/Relay/installRelayHook');
 
 window.React = React;
 
@@ -24,6 +25,7 @@ var devtoolsSrc = target.getAttribute('data-devtools-src') || './build/backend.j
 
 var win = target.contentWindow;
 installGlobalHook(win);
+installRelayHook(win);
 
 var iframeSrc = document.getElementById('iframe-src');
 if (iframeSrc) {