Create a new zone when click is detected (#87)

Author: crdgonzalezca

examples/user_interaction/client/package.json

@@ -39,4 +39,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

examples/user_interaction/client/src/App.js

@@ -22,48 +22,50 @@ class App extends React.Component {
     super(props);
     this.state = { pi: { time: 0, value: "unknown" }, prime_numbers: { time: 0, value: [] } };
     this.handleClick = this.handleClick.bind(this);
-    this.runSecondTask = this.runSecondTask.bind(this);
-    this.http = require('http');
+    this.runSecondTask = this.callPrimeNumbersApi.bind(this);
+    this.host = 'http://localhost:8088';
   }
 
   handleClick() {
-    const host = 'localhost';
-    const port = 8088;
-    this.http.get({
-      host,
-      port,
-      path: '/sleep'
-    }, (response) => {
-      let data = [];
-      response.on('data', chunk => data.push(chunk));
-      response.on('end', this.runSecondTask);
-    });
+    console.log("Entering handle click.");
+
+    this.callSleepApi();
+  }
+
+  callSleepApi() {
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === XMLHttpRequest.DONE) {
+        this.callPrimeNumbersApi();
+      }
+    };
+    xhr.open('GET', this.host + "/sleep");
+    xhr.send();
   }
 
-  runSecondTask() {
-    const host = 'localhost';
-    const port = 8088;
-    this.http.get({
-      host,
-      port,
-      path: '/prime_numbers'
-    }, (response) => {
-      let data = [];
-      response.on('data', chunk => data.push(chunk));
-      response.on('end', () => {
-        const result = this.runThridTask();
-        this.setState({ pi: result, prime_numbers: JSON.parse(data.toString()) });
-      });
-    });
+  callPrimeNumbersApi() {
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === XMLHttpRequest.DONE) {
+        const data = JSON.parse(xhr.responseText)
+        const result = this.callCalculatePi();
+        this.setState({ pi: result, prime_numbers: data });
+      }
+    };
+
+    xhr.open('GET', this.host + "/prime_numbers");
+    xhr.send();
   }
 
-  runThridTask() {
+  callCalculatePi() {
     const time = Date.now();
+    console.log("Calculating PI");
     const pi = this.calculatePi();
+    console.log("Finished calculating PI");
     return { time: (Date.now() - time), value: pi };
   }
 
-  // Calculates Pi using Gregory-Leibniz series, just to make the process longer.
+  // Calculates PI using Gregory-Leibniz series, just to make the process longer.
   calculatePi() {
     let result = 0.0;
     let divisor = 1.0;

examples/user_interaction/server/package-lock.json

@@ -24,7 +24,6 @@
     "@opencensus/exporter-zipkin": "^0.0.12",
     "@opencensus/nodejs": "^0.0.12",
     "@opencensus/propagation-tracecontext": "^0.0.12",
-    "axios": "^0.19.0",
     "http": "*",
     "sleep": "^6.1.0"
   },

examples/user_interaction/server/package.json

@@ -79,13 +79,17 @@ function handleRequest(request, response) {
     let result = '';
     let code = 200;
     if (url.parse(request.url).pathname === '/sleep') {
+      console.log("Sleeping...")
       const time = Date.now();
-      sleep.sleep(2);
+      sleep.sleep(5);
       result = { time: Date.now() - time, value: "" };
+      console.log("Finished.")
     } else if (url.parse(request.url).pathname === '/prime_numbers') {
+      console.log("Calculate prime numbers...")
       const time = Date.now();
       const prime_numbers = JSON.stringify(calculatePrimeNumbers());
       result = { time: Date.now() - time, value: prime_numbers };
+      console.log("Finished.")
     } else {
       result = { time: 0, value: "unknown url" };
       code = 404;

examples/user_interaction/server/server.js

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { randomTraceId } from '@opencensus/web-core';
+
 // Allows us to monkey patch Zone prototype without TS compiler errors.
 declare const Zone: ZoneType & { prototype: Zone };
 
@@ -26,42 +28,89 @@ export type AsyncTask = Task & {
   data: AsyncTaskData;
   eventName: string;
   target: HTMLElement;
+  // Allows access to the private `_zone` property of a Zone.js Task.
+  _zone: Zone;
 };
 
 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');
+      const time = Date.now();
+
+      console.warn('Running task');
+      console.log(task.zone);
+
+      let taskZone = this;
+      if (isTrackedElement(task)) {
         console.log('Click detected');
+
+        const traceId = randomTraceId();
+        const tracingZone = Zone.root.fork({
+          name: traceId,
+          properties: {
+            isTracingZone: true,
+            traceId,
+          },
+        });
+
+        // Change the zone task.
+        task._zone = tracingZone;
+        taskZone = tracingZone;
+        console.log('New zone:');
+        console.log(taskZone);
+      } else {
+        // If we already are in a tracing zone, just run the task in our tracing zone.
+        if (task.zone && task.zone.get('isTracingZone')) {
+          taskZone = task.zone;
+        }
       }
       try {
-        return runTask.call(this as {}, task, applyThis, applyArgs);
+        return runTask.call(taskZone as {}, task, applyThis, applyArgs);
       } finally {
+        console.log('Run task finished.');
+        console.log('Time to complete: ' + (Date.now() - time));
       }
     };
 
     const scheduleTask = Zone.prototype.scheduleTask;
     Zone.prototype.scheduleTask = function<T extends Task>(task: T): T {
-      console.log('Scheduling task');
+      console.warn('Scheduling task');
+      console.log(task);
+
+      let taskZone: Zone = this;
+      if (task.zone && task.zone && task.zone.get('isTracingZone')) {
+        taskZone = task.zone;
+      }
       try {
-        return scheduleTask.call(this as {}, task) as T;
+        return scheduleTask.call(taskZone as {}, task) as T;
       } finally {
       }
     };
 
     const cancelTask = Zone.prototype.cancelTask;
     Zone.prototype.cancelTask = function(task: AsyncTask) {
-      console.log('cancel task');
+      console.warn('Cancel task');
+      console.log(task);
+
+      let taskZone: Zone = this;
+      if (task.zone && task.zone.get('isTracingZone')) {
+        taskZone = task.zone;
+      }
+
       try {
-        return cancelTask.call(this as {}, task);
+        return cancelTask.call(taskZone as {}, task);
       } finally {
       }
     };
   }
 }
+
+function isTrackedElement(task: AsyncTask): boolean {
+  return !!(task.eventName && task.eventName === 'click');
+}