feat(Error): Rewrite Error stack frames to include zone

The errors caused by the Zone contain extra stack frames. This feature
removes the confusing stack frames as well as appends the zone for each
stack frame to get a better understanding of the error messages.

Improved Error:
```
Error.spec.js:54 Error: Inside [InnerZone]
    at insideRun (Error.spec.js:31) [InnerZone]
    at Zone.run (zone.js:100) [<root> => InnerZone]
    at testFn (Error.spec.js:29) [<root>]
    at Zone.run (zone.js:100) [ProxyZone => <root>]
    at Object.eval (Error.spec.js:19) [ProxyZone]
```

Original Error:
```
Error.spec.js:53 Error: Inside
    at ZoneAwareError (zone.js:652)
    at insideRun (Error.spec.js:31)
    at ZoneDelegate.invoke (zone.js:216)
    at Zone.run (zone.js:100)
    at testFn (Error.spec.js:29)
    at ZoneDelegate.invoke (zone.js:216)
    at Zone.run (zone.js:100)
    at Object.eval (Error.spec.js:19)
```

Author: mhevery

Diff for: lib/zone.ts

@@ -519,6 +519,21 @@ interface EventTask extends Task {
   /* TS v1.8 => type: 'eventTask'; */
 }
 
+/**
+ * Extend the Error with additional fields for rewritten stack frames
+ */
+interface Error {
+  /**
+   * Stack trace where extra frames have been removed and zone names added.
+   */
+  zoneAwareStack?: string;
+
+  /**
+   * Original stack trace with no modiffications
+   */
+  originalStack?: string;
+}
+
 /** @internal */
 type AmbientZone = Zone;
 /** @internal */
@@ -545,7 +560,7 @@ const Zone: ZoneType = (function(global: any) {
 
 
     static get current(): AmbientZone {
-      return _currentZone;
+      return _currentZoneFrame.zone;
     };
     static get currentTask(): Task {
       return _currentTask;
@@ -606,19 +621,17 @@ const Zone: ZoneType = (function(global: any) {
 
     public run(
         callback: Function, applyThis: any = null, applyArgs: any[] = null, source: string = null) {
-      const oldZone = _currentZone;
-      _currentZone = this;
+      _currentZoneFrame = new ZoneFrame(_currentZoneFrame, this);
       try {
         return this._zoneDelegate.invoke(this, callback, applyThis, applyArgs, source);
       } finally {
-        _currentZone = oldZone;
+        _currentZoneFrame = _currentZoneFrame.parent;
       }
     }
 
     public runGuarded(
         callback: Function, applyThis: any = null, applyArgs: any[] = null, source: string = null) {
-      const oldZone = _currentZone;
-      _currentZone = this;
+      _currentZoneFrame = new ZoneFrame(_currentZoneFrame, this);
       try {
         try {
           return this._zoneDelegate.invoke(this, callback, applyThis, applyArgs, source);
@@ -628,7 +641,7 @@ const Zone: ZoneType = (function(global: any) {
           }
         }
       } finally {
-        _currentZone = oldZone;
+        _currentZoneFrame = _currentZoneFrame.parent;
       }
     }
 
@@ -641,8 +654,7 @@ const Zone: ZoneType = (function(global: any) {
             '; Execution: ' + this.name + ')');
       const previousTask = _currentTask;
       _currentTask = task;
-      const oldZone = _currentZone;
-      _currentZone = this;
+      _currentZoneFrame = new ZoneFrame(_currentZoneFrame, this);
       try {
         if (task.type == 'macroTask' && task.data && !task.data.isPeriodic) {
           task.cancelFn = null;
@@ -655,7 +667,7 @@ const Zone: ZoneType = (function(global: any) {
           }
         }
       } finally {
-        _currentZone = oldZone;
+        _currentZoneFrame = _currentZoneFrame.parent;
         _currentTask = previousTask;
       }
     }
@@ -924,14 +936,23 @@ const Zone: ZoneType = (function(global: any) {
     rejection: any;
   }
 
+  class ZoneFrame {
+    public parent: ZoneFrame;
+    public zone: Zone;
+    constructor(parent: ZoneFrame, zone: Zone) {
+      this.parent = parent;
+      this.zone = zone;
+    }
+  }
+
   function __symbol__(name: string) {
     return '__zone_symbol__' + name;
   };
   const symbolSetTimeout = __symbol__('setTimeout');
   const symbolPromise = __symbol__('Promise');
   const symbolThen = __symbol__('then');
 
-  let _currentZone: Zone = new Zone(null, null);
+  let _currentZoneFrame = new ZoneFrame(null, new Zone(null, null));
   let _currentTask: Task = null;
   let _microTaskQueue: Task[] = [];
   let _isDrainingMicrotaskQueue: boolean = false;
@@ -1232,5 +1253,153 @@ const Zone: ZoneType = (function(global: any) {
 
   // This is not part of public API, but it is usefull for tests, so we expose it.
   Promise[Zone.__symbol__('uncaughtPromiseErrors')] = _uncaughtPromiseErrors;
+
+  /*
+   * This code patches Error so that:
+   *   - It ignores un-needed stack frames.
+   *   - It Shows the associated Zone for reach frame.
+   */
+
+  enum FrameType {
+    /// Skip this frame when printing out stack
+    blackList,
+    /// This frame marks zone transition
+    trasition
+  };
+  const NativeError = global[__symbol__('Error')] = global.Error;
+  // Store the frames which should be removed from the stack frames
+  const blackListedStackFrames: {[frame: string]:FrameType} = {};
+  // We must find the frame where Error was created, otherwise we assume we don't understand stack
+  let zoneAwareFrame: string;
+  global.Error = ZoneAwareError;
+  // How should the stack frames be parsed.
+  let frameParserStrategy = null;
+  const stackRewrite = 'stackRewrite';
+
+
+  /**
+   * This is ZoneAwareError which processes the stack frame and cleans up extra frames as well as
+   * adds zone information to it.
+   */
+  function ZoneAwareError() {
+    // Create an Error.
+    let error: Error = NativeError.apply(this, arguments);
+
+    // Save original stack trace
+    error.originalStack = error.stack;
+
+    // Process the stack trace and rewrite the frames.
+    if (ZoneAwareError[stackRewrite] && error.originalStack) {
+      let frames: string[] = error.originalStack.split('\n');
+      let zoneFrame = _currentZoneFrame;
+      let i = 0;
+      // Find the first frame
+      while (frames[i] !== zoneAwareFrame && i < frames.length) {
+        i++;
+      }
+      for(;i < frames.length && zoneFrame; i++) {
+        let frame = frames[i];
+        if (frame.trim()) {
+          let frameType = blackListedStackFrames.hasOwnProperty(frame) && blackListedStackFrames[frame];
+          if (frameType === FrameType.blackList) {
+            frames.splice(i, 1);
+            i--;
+          } else if (frameType === FrameType.trasition) {
+            if (zoneFrame.parent) {
+              // This is the special frame where zone changed. Print and process it accordingly
+              frames[i] += ` [${zoneFrame.parent.zone.name} => ${zoneFrame.zone.name}]`;
+              zoneFrame = zoneFrame.parent;
+            } else {
+              zoneFrame == null;
+            }
+          } else {
+            frames[i] += ` [${zoneFrame.zone.name}]`;
+          }
+        }
+      }
+      error.stack = error.zoneAwareStack = frames.join('\n');
+    }
+    return error;
+  };
+  // Copy the prototype so that instanceof operator works as expected
+  ZoneAwareError.prototype = NativeError.prototype;
+  ZoneAwareError[Zone.__symbol__('blacklistedStackFrames')] = blackListedStackFrames;
+  ZoneAwareError[stackRewrite] = false;
+
+  if (NativeError.hasOwnProperty('stackTraceLimit')) {
+    // Extend default stack limit as we will be removing few frames.
+    NativeError.stackTraceLimit = Math.max(NativeError.stackTraceLimit, 15);
+
+    // make sure that ZoneAwareError has the same property which forwards to NativeError.
+    Object.defineProperty(ZoneAwareError, 'stackTraceLimit', {
+      get: function() { return NativeError.stackTraceLimit; },
+      set: function(value) { return NativeError.stackTraceLimit = value; }
+    });
+  }
+
+  // Now we need to populet the `blacklistedStackFrames` as well as find the
+  // run/runGuraded/runTask frames. This is done by creating a detect zone and then threading
+  // the execution through all of the above methods so that we can look at the stack trace and
+  // find the frames of interest.
+  let detectZone: Zone = Zone.current.fork({
+    name: 'detect',
+    onInvoke: function(parentZoneDelegate: ZoneDelegate, currentZone: Zone, targetZone: Zone,
+                        delegate: Function, applyThis: any, applyArgs: any[], source: string): any {
+      // Here only so that it will show up in the stack frame so that it can be black listed.
+      return parentZoneDelegate.invoke(targetZone, delegate, applyThis, applyArgs, source);
+    },
+    onHandleError: function(parentZD: ZoneDelegate, current: Zone, target: Zone, error: any): boolean {
+      if (error.originalStack && Error === ZoneAwareError) {
+        let frames = error.originalStack.split(/\n/);
+        let runFrame = false, runGuardedFrame = false, runTaskFrame = false;
+        while (frames.length) {
+          let frame = frames.shift();
+          // On safari it is possible to have stack frame with no line number.
+          // This check makes sure that we don't filter frames on name only (must have linenumber)
+          if (/:\d+:\d+/.test(frame)) {
+            // Get rid of the path so that we don't accidintely find function name in path.
+            // In chrome the seperator is `(` and `@` in FF and safari
+            // Chrome: at Zone.run (zone.js:100)
+            // Chrome: at Zone.run (http://localhost:9876/base/build/lib/zone.js:100:24)
+            // FireFox: Zone.prototype.run@http://localhost:9876/base/build/lib/zone.js:101:24
+            // Safari: run@http://localhost:9876/base/build/lib/zone.js:101:24
+            let fnName: string = frame.split('(')[0].split('@')[0];
+            let frameType = FrameType.trasition;
+            if (fnName.indexOf('ZoneAwareError') !== -1) {
+              zoneAwareFrame = frame;
+            }
+            if (fnName.indexOf('runGuarded') !== -1) {
+              runGuardedFrame = true;
+            } else if (fnName.indexOf('runTask') !== -1) {
+              runTaskFrame = true;
+            } else if (fnName.indexOf('run') !== -1) {
+              runFrame = true;
+            } else {
+              frameType = FrameType.blackList;
+            }
+            blackListedStackFrames[frame] = frameType;
+            // Once we find all of the frames we can stop looking.
+            if (runFrame && runGuardedFrame && runTaskFrame) {
+              ZoneAwareError[stackRewrite] = true;
+              break;
+            }
+          }
+        }
+      }
+      return false;
+    }
+  }) as Zone;
+  // carefully constructor a stack frame which contains all of the frames of interest which
+  // need to be detected and blacklisted.
+  let detectRunFn = () => {
+    detectZone.run(() => {
+      detectZone.runGuarded(() => {
+        throw new Error('blacklistStackFrames');
+      });
+    });
+  };
+  // Cause the error to extract the stack frames.
+  detectZone.runTask(detectZone.scheduleMacroTask('detect', detectRunFn, null, () => null, null));
+
   return global.Zone = Zone;
 })(typeof window === 'object' && window || typeof self === 'object' && self || global);

Diff for: test/common/Error.spec.ts

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+describe('ZoneAwareError', () => {
+  // If the environment does not supports stack rewrites, then these tests will fail
+  // and there is no point in running them.
+  if (!Error['stackRewrite']) return;
+
+  it('should show zone names in stack frames and remove extra frames', () => {
+    const rootZone = getRootZone();
+    const innerZone = rootZone.fork({name: 'InnerZone'});
+
+    rootZone.run(testFn);
+    function testFn() {
+      let outside: Error;
+      let inside: Error;
+      try {
+        throw new Error('Outside');
+      } catch(e) {
+        outside = e;
+      }
+      innerZone.run(function insideRun () {
+        try {
+          throw new Error('Inside');
+        } catch(e) {
+          inside = e;
+        }
+      });
+
+      expect(outside.stack).toEqual(outside.zoneAwareStack);
+      expect(inside.stack).toEqual(inside.zoneAwareStack);
+      expect(typeof inside.originalStack).toEqual('string');
+      const outsideFrames = outside.stack.split(/\n/);
+      const insideFrames = inside.stack.split(/\n/);
+      // throw away first line if it contains the error
+      if (/Outside/.test(outsideFrames[0])) {
+        outsideFrames.shift();
+      }
+      if (/new Error/.test(outsideFrames[0])) {
+        outsideFrames.shift();
+      }
+      if (/Inside/.test(insideFrames[0])) {
+        insideFrames.shift();
+      }
+      if (/new Error/.test(insideFrames[0])) {
+        insideFrames.shift();
+      }
+
+      expect(outsideFrames[0]).toMatch(/testFn.*[<root>]/);
+
+      expect(insideFrames[0]).toMatch(/insideRun.*[InnerZone]]/);
+      expect(insideFrames[1]).toMatch(/run.*[<root> => InnerZone]]/);
+      expect(insideFrames[2]).toMatch(/testFn.*[<root>]]/);
+    }
+  });
+});
+
+function getRootZone() {
+  let zone = Zone.current;
+  while(zone.parent) {
+    zone = zone.parent;
+  }
+  return zone;
+}

Diff for: test/common_tests.ts

@@ -10,6 +10,7 @@ import './common/microtasks.spec';
 import './common/zone.spec';
 import './common/util.spec';
 import './common/Promise.spec';
+import './common/Error.spec';
 import './common/setInterval.spec';
 import './common/setTimeout.spec';
 import './zone-spec/long-stack-trace-zone.spec';
@@ -18,3 +19,5 @@ import './zone-spec/sync-test.spec';
 import './zone-spec/fake-async-test.spec';
 import './zone-spec/proxy.spec';
 import './zone-spec/task-tracking.spec';
+
+Error.stackTraceLimit = Number.POSITIVE_INFINITY;