Setup InteractionTracker to log when a click occurs. (#85)

crdgonzalezca · draffensperger · commit a35506ffd8f9 · 2019-05-28T09:36:49.000-04:00
diff --git a/examples/user_interaction/client/package-lock.json b/examples/user_interaction/client/package-lock.json
diff --git a/examples/user_interaction/client/package.json b/examples/user_interaction/client/package.json
@@ -12,10 +12,11 @@
     "metrics"
   ],
   "dependencies": {
+    "@opencensus/web-all": "^0.0.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1",
-    "@opencensus/web-all": "^0.0.2"
+    "zone.js": "^0.9.1"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/examples/user_interaction/client/src/index.js b/examples/user_interaction/client/src/index.js
@@ -18,6 +18,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import { exportRootSpanAfterLoadEvent } from '@opencensus/web-all';
+import { startInteractionTracker } from '@opencensus/web-instrumentation-zone';
+
+// Necessary import for @opencensus/web-instrumentation-zone
+import { Zone, ZoneType, Task } from 'zone.js';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 
@@ -27,3 +31,5 @@ window.ocSampleRate = 1.0; // Sample at 100% for test only. Default is 1/10000.
 // Send the root span and child spans for the initial page load to the
 // OpenCensus agent if this request was sampled for trace.
 exportRootSpanAfterLoadEvent();
+
+startInteractionTracker();
diff --git a/examples/user_interaction/server/server.js b/examples/user_interaction/server/server.js
@@ -71,7 +71,7 @@ function handleRequest(request, response) {
     request.on('data', chunk => body.push(chunk));
 
     // Necessary headers because the Node.js and React dev servers run in different ports.
-    response.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
+    response.setHeader('Access-Control-Allow-Origin', '*');
     response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
     response.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
     response.setHeader('Access-Control-Allow-Credentials', true);
diff --git a/packages/opencensus-web-instrumentation-zone/package-lock.json b/packages/opencensus-web-instrumentation-zone/package-lock.json
diff --git a/packages/opencensus-web-instrumentation-zone/package.json b/packages/opencensus-web-instrumentation-zone/package.json
@@ -5,7 +5,10 @@
   "main": "build/src/index.js",
   "types": "build/src/index.d.ts",
   "scripts": {
+    "build:prod": "webpack --config ./webpack/prod-bundles.config.js",
+    "build:dev": "webpack --config ./webpack/dev-bundles.config.js",
     "build": "webpack",
+    "start:webpack-server": "webpack-dev-server --config ./webpack/dev-bundles.config.js",
     "codecov": "codecov -f coverage/*.json",
     "clean": "rimraf build/*",
     "check": "gts check",
@@ -56,11 +59,16 @@
     "rimraf": "^2.6.2",
     "ts-loader": "^6.0.0",
     "typescript": "^3.1.6",
-    "webpack": "^4.18.0",
-    "webpack-cli": "^3.1.0"
+    "webpack": "^4.32.2",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.4.1",
+    "zone.js": "~0.9.1"
   },
   "dependencies": {
     "@opencensus/web-core": "^0.0.2"
   },
+  "peerDependencies": {
+    "zone.js": "~0.9.1"
+  },
   "sideEffects": false
 }
diff --git a/packages/opencensus-web-instrumentation-zone/src/entrypoints/README.md b/packages/opencensus-web-instrumentation-zone/src/entrypoints/README.md
@@ -0,0 +1,4 @@
+# Entrypoints for OpenCensus Web JS Bundles
+
+This folder contains the top-level entrypoints for JS script bundles for
+the OpenCensus Web project.
diff --git a/packages/opencensus-web-instrumentation-zone/src/entrypoints/export-initial-load.ts b/packages/opencensus-web-instrumentation-zone/src/entrypoints/export-initial-load.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2019, OpenCensus Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { startInteractionTracker } from '../export-initial-load';
+
+startInteractionTracker();
diff --git a/packages/opencensus-web-instrumentation-zone/src/entrypoints/initial-load-all.ts b/packages/opencensus-web-instrumentation-zone/src/entrypoints/initial-load-all.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright 2019, OpenCensus Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import './export-initial-load';
diff --git a/packages/opencensus-web-instrumentation-zone/src/export-initial-load.ts b/packages/opencensus-web-instrumentation-zone/src/export-initial-load.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2019, OpenCensus Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { InteractionTracker } from './interaction-tracker';
+
+export function startInteractionTracker() {
+  return new InteractionTracker();
+}
diff --git a/packages/opencensus-web-instrumentation-zone/src/index.ts b/packages/opencensus-web-instrumentation-zone/src/index.ts
@@ -13,3 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+export { startInteractionTracker } from './export-initial-load';
diff --git a/packages/opencensus-web-instrumentation-zone/src/interaction-tracker.ts b/packages/opencensus-web-instrumentation-zone/src/interaction-tracker.ts
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2019, OpenCensus Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Allows us to monkey patch Zone prototype without TS compiler errors.
+declare const Zone: ZoneType & { prototype: Zone };
+
+export interface AsyncTaskData {
+  interactionId: string;
+  pageView: string;
+}
+
+export type AsyncTask = Task & {
+  data: AsyncTaskData;
+  eventName: string;
+  target: HTMLElement;
+};
+
+export class InteractionTracker {
+  constructor() {
+    const runTask = Zone.prototype.runTask;
+    Zone.prototype.runTask = function(
+      task: AsyncTask,
+      applyThis: unknown,
+      applyArgs: unknown
+    ) {
+      if (task.eventName && task.eventName.toString().indexOf('click') !== -1) {
+        console.log('Running task');
+        console.log('Click detected');
+      }
+      try {
+        return runTask.call(this as {}, task, applyThis, applyArgs);
+      } finally {
+      }
+    };
+
+    const scheduleTask = Zone.prototype.scheduleTask;
+    Zone.prototype.scheduleTask = function<T extends Task>(task: T): T {
+      console.log('Scheduling task');
+      try {
+        return scheduleTask.call(this as {}, task) as T;
+      } finally {
+      }
+    };
+
+    const cancelTask = Zone.prototype.cancelTask;
+    Zone.prototype.cancelTask = function(task: AsyncTask) {
+      console.log('cancel task');
+      try {
+        return cancelTask.call(this as {}, task);
+      } finally {
+      }
+    };
+  }
+}
diff --git a/packages/opencensus-web-instrumentation-zone/tsconfig.json b/packages/opencensus-web-instrumentation-zone/tsconfig.json
@@ -17,6 +17,5 @@
       "test/*": ["./test/*"]
     }
   },
-  "exclude": ["node_modules"],
-  "include": ["src/**/*.ts", "test/**/*.ts"]
+  "include": ["src/**/*.ts", "test/**/*.ts", "node_modules/zone.js/dist/zone.js.d.ts"]
 }
diff --git a/packages/opencensus-web-instrumentation-zone/webpack/base-bundles.config.js b/packages/opencensus-web-instrumentation-zone/webpack/base-bundles.config.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2019, OpenCensus Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+  entry: {
+    'export-initial-load': './src/entrypoints/export-initial-load.ts',
+    'initial-load-all': './src/entrypoints/initial-load-all.ts',
+  },
+  resolve: {extensions: ['.ts', '.js']},
+  devtool: 'source-map',
+  module: {rules: [{test: /\.ts$/, use: 'ts-loader'}]},
+  stats: {
+    // Examine all modules
+    maxModules: Infinity,
+    // Display bailout reasons
+    optimizationBailout: true,
+  },
+};
diff --git a/packages/opencensus-web-instrumentation-zone/webpack/dev-bundles.config.js b/packages/opencensus-web-instrumentation-zone/webpack/dev-bundles.config.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2019, OpenCensus Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const baseConfig = require('./base-bundles.config.js');
+
+const config = baseConfig;
+config['mode'] = 'development';
+module.exports = config;
diff --git a/packages/opencensus-web-instrumentation-zone/webpack/dev-package.config.js b/packages/opencensus-web-instrumentation-zone/webpack/dev-package.config.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2019, OpenCensus Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const path = require('path');
+
+module.exports = {
+  mode: 'development',
+  entry: './src/index.ts',
+  output: {filename: 'bundle.js'},
+  resolve: {extensions: ['.ts', '.js']},
+  devtool: 'inline-source-map',
+  module: {
+    rules: [
+      {test: /\.ts$/, use: 'ts-loader'},
+      {
+        test: /\.ts$/,
+        exclude: [path.resolve(__dirname, 'test')],
+        enforce: 'post',
+        use: {
+          loader: 'istanbul-instrumenter-loader',
+          options: {esModules: true},
+        },
+      },
+    ],
+  },
+};
diff --git a/packages/opencensus-web-instrumentation-zone/webpack/prod-bundles.config.js b/packages/opencensus-web-instrumentation-zone/webpack/prod-bundles.config.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright 2019, OpenCensus Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const baseConfig = require('./base-bundles.config.js');
+const path = require('path');
+
+const config = baseConfig;
+config['mode'] = 'production';
+module.exports = config;
