Emit RPC stats from the browser

src/__tests__/create-mock-emitter.js

@@ -0,0 +1,23 @@
+// @flow
+import type {IEmitter} from '../types.js';
+
+function createMockEmitter<TProps>(props: TProps): IEmitter {
+  const emitter = {
+    from: () => {
+      return emitter;
+    },
+    emit: () => {},
+    setFrequency: () => {},
+    teardown: () => {},
+    map: () => {},
+    on: () => {},
+    off: () => {},
+    mapEvent: () => {},
+    handleEvent: () => {},
+    flush: () => undefined,
+    ...props,
+  };
+  return emitter;
+}
+
+export default createMockEmitter;

src/__tests__/index.browser.js

@@ -7,28 +7,47 @@
  */
 
 import test from 'tape-cup';
+import MockEmitter from 'events';
 
 import App, {createPlugin, createToken} from 'fusion-core';
 import {FetchToken} from 'fusion-tokens';
 import {getSimulator} from 'fusion-test-utils';
 import type {Token} from 'fusion-core';
+import {UniversalEventsToken} from 'fusion-plugin-universal-events';
 
 import RPCPlugin from '../browser';
+import type {IEmitter} from '../types.js';
+import createMockEmitter from './create-mock-emitter';
 
 const MockPluginToken: Token<any> = createToken('test-plugin-token');
 function createTestFixture() {
   const mockFetch = (...args) =>
     Promise.resolve({json: () => ({status: 'success', data: args})});
+  const mockEmitter: IEmitter = (new MockEmitter(): any);
+  const mockEmitterPlugin = createPlugin({
+    provides: () => mockEmitter,
+  });
 
   const app = new App('content', el => el);
   // $FlowFixMe
   app.register(FetchToken, mockFetch);
+  app.register(UniversalEventsToken, mockEmitterPlugin);
   app.register(MockPluginToken, RPCPlugin);
   return app;
 }
 
 test('success status request', t => {
+  const mockEmitter = createMockEmitter({
+    emit(type, payload) {
+      t.equal(type, 'rpc:method-client');
+      t.equal(payload.method, 'test');
+      t.equal(payload.status, 'success');
+      t.equal(typeof payload.timing, 'number');
+    },
+  });
   const app = createTestFixture();
+  // $FlowFixMe
+  app.register(UniversalEventsToken, mockEmitter);
 
   let wasResolved = false;
   getSimulator(
@@ -65,7 +84,17 @@ test('success status request', t => {
 });
 
 test('success status request w/args and header', t => {
+  const mockEmitter = createMockEmitter({
+    emit(type, payload) {
+      t.equal(type, 'rpc:method-client');
+      t.equal(payload.method, 'test');
+      t.equal(payload.status, 'success');
+      t.equal(typeof payload.timing, 'number');
+    },
+  });
   const app = createTestFixture();
+  // $FlowFixMe
+  app.register(UniversalEventsToken, mockEmitter);
 
   let wasResolved = false;
   getSimulator(
@@ -109,10 +138,21 @@ test('success status request w/args and header', t => {
 test('failure status request', t => {
   const mockFetchAsFailure = () =>
     Promise.resolve({json: () => ({status: 'failure', data: 'failure data'})});
+  const mockEmitter = createMockEmitter({
+    emit(type, payload) {
+      t.equal(type, 'rpc:method-client');
+      t.equal(payload.method, 'test');
+      t.equal(payload.status, 'failure');
+      t.equal(typeof payload.timing, 'number');
+      t.equal(payload.error, 'failure data');
+    },
+  });
 
   const app = createTestFixture();
   // $FlowFixMe
   app.register(FetchToken, mockFetchAsFailure);
+  // $FlowFixMe
+  app.register(UniversalEventsToken, mockEmitter);
 
   let wasResolved = false;
   getSimulator(

src/__tests__/index.node.js

@@ -20,6 +20,7 @@ import RPCPlugin from '../server';
 import type {IEmitter, RPCServiceType} from '../types.js';
 import MockRPCPlugin from '../mock.js';
 import ResponseError from '../response-error.js';
+import createMockEmitter from './create-mock-emitter';
 
 const MockPluginToken: Token<RPCServiceType> = createToken('test-plugin-token');
 const MOCK_JSON_PARAMS = {test: 'test-args'};
@@ -47,25 +48,6 @@ function createTestFixture() {
   return app;
 }
 
-function createMockEmitter<TProps>(props: TProps): IEmitter {
-  const emitter = {
-    from: () => {
-      return emitter;
-    },
-    emit: () => {},
-    setFrequency: () => {},
-    teardown: () => {},
-    map: () => {},
-    on: () => {},
-    off: () => {},
-    mapEvent: () => {},
-    handleEvent: () => {},
-    flush: () => undefined,
-    ...props,
-  };
-  return emitter;
-}
-
 function mockRequest() {
   const req = new MockReq({
     method: 'POST',

src/browser.js

@@ -9,20 +9,24 @@
 /* eslint-env browser */
 
 import {createPlugin, type Context} from 'fusion-core';
+import {UniversalEventsToken} from 'fusion-plugin-universal-events';
 import {FetchToken} from 'fusion-tokens';
 import type {Fetch} from 'fusion-tokens';
 
 import type {HandlerType} from './tokens.js';
 import type {RPCPluginType, IEmitter} from './types.js';
 
+const statKey = 'rpc:method-client';
+
 class RPC {
   ctx: ?Context;
   emitter: ?IEmitter;
   handlers: ?HandlerType;
   fetch: ?Fetch;
 
-  constructor(fetch: Fetch) {
+  constructor(fetch: Fetch, emitter: any) {
     this.fetch = fetch;
+    this.emitter = emitter;
   }
 
   request<TArgs, TResult>(
@@ -33,7 +37,12 @@ class RPC {
     if (!this.fetch) {
       throw new Error('fusion-plugin-rpc requires `fetch`');
     }
+    if (!this.emitter) {
+      throw new Error('Missing emitter registered to UniversalEventsToken');
+    }
     const fetch = this.fetch;
+    const emitter = this.emitter;
+    const startTime = Date.now();
 
     // TODO(#3) handle args instanceof FormData
     return fetch(`/api/${rpcId}`, {
@@ -48,8 +57,19 @@ class RPC {
       .then(args => {
         const {status, data} = args;
         if (status === 'success') {
+          emitter.emit(statKey, {
+            method: rpcId,
+            status: 'success',
+            timing: Date.now() - startTime,
+          });
           return data;
         } else {
+          emitter.emit(statKey, {
+            method: rpcId,
+            error: data,
+            status: 'failure',
+            timing: Date.now() - startTime,
+          });
           return Promise.reject(data);
         }
       });
@@ -60,11 +80,12 @@ const pluginFactory: () => RPCPluginType = () =>
   createPlugin({
     deps: {
       fetch: FetchToken,
+      emitter: UniversalEventsToken,
     },
     provides: deps => {
-      const {fetch = window.fetch} = deps;
+      const {fetch = window.fetch, emitter} = deps;
 
-      return {from: () => new RPC(fetch)};
+      return {from: () => new RPC(fetch, emitter)};
     },
   });