title: Stack trace for caught Angular 2 errors is unusable. Better way?
body: <p>I use <a href="https://medium.com/@amcdnl/global-error-handling-with-angular2-6b992bdfb59c" rel="nofollow noreferrer">this method</a> to catch JavaScript errors that a standard JavaScript global erroror catch doesn't catch. The goal being to open up a bug report email that the user can send to us so we can fix the bug.</p>
  
  <p>However, the stack trace from errors caught this way is completely unusable. When I disable this error catcher, I get something nice like this:</p>
  
  <pre><code>zone.js:199 Uncaught TypeError: Cannot create property 'fullString' on string ''
      at Function.push.../shared/directives/fullName.ts.FullNameObj.updateFullStringStatic (fullName.ts:31)
      at FullName.push.../shared/directives/fullName.ts.FullName.updateFullNameString (fullName.ts:146)
      at FullName.push.../shared/directives/fullName.ts.FullName.ngOnInit (fullName.ts:108)
      at checkAndUpdateDirectiveInline (core.js:22098)
      at checkAndUpdateNodeInline (core.js:23362)
      at checkAndUpdateNode (core.js:23324)
      at debugCheckAndUpdateNode (core.js:23958)
      at debugCheckDirectivesFn (core.js:23918)
      at Object.eval [as updateDirectives] (ReportField.html:56)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:23910)
  </code></pre>
  
  <p>In this case, that took me to the exact problem: directives/fullName.ts is the file I'm interested in, and updateFullString() is the relevant method. </p>
  
  <p>But when I enable the global Angular Error Handler, and it catches the same bug, its stack trace is:</p>
  
  <pre><code>Error    
  at http://localhost:8087/report/vendor.js:54045:87    
  at ZoneDelegate.push.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:8087/report/polyfills.js:3284:26)    
  at Zone.push.../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:8087/report/polyfills.js:3043:43)    
  at NgZone.push.../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (http://localhost:8087/report/vendor.js:53177:28)    
  at ApplicationRef.push.../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick (http://localhost:8087/report/vendor.js:54045:24)    
  at http://localhost:8087/report/vendor.js:53929:105    
  at ZoneDelegate.push.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:8087/report/polyfills.js:3284:26)    
  at Object.onInvoke (http://localhost:8087/report/vendor.js:53218:33)    at ZoneDelegate.push.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:8087/report/polyfills.js:3283:52)    
  at Zone.push.../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:8087/report/polyfills.js:3043:43)
  </code></pre>
  
  <p>My global error handler is:</p>
  
  <pre><code>@Injectable()
  export class GlobalErrorHandler implements ErrorHandler
  {
      constructor(private injector: Injector, private globals: CRGlobals)
      {
  
      }
  
      handleError(error)
      {
              // UNCOMMENT this (and comment out the rest) to get a better error report in the console log!
      //  throw error;
  
          if (this.globals.hasVisitedDeveloperPage)
          {
              console.log("Throwing globally caught error, since user has visited developer page");
              throw error;
          }
          else
          {
          //  const loggingService = this.injector.get(LoggingService);
              const message = error.message ? error.message : error.toString();
              // log on the server
          //  loggingService.log({ message });
  
                  // Certain errors we don't want to report
              if (message.indexOf("ExpressionChangedAfterItHasBeenCheckedError") == -1)
              {
                  let obj = {};
                  (&lt;any&gt;Error).captureStackTrace(obj, this.handleError);  // This works in QWebEngine and is supposed to work in Chrome, too.
  
  
                  ReportNetwork.reportErrorToAIM( this.globals, "An Angular 2 global error was caught: " + error + "\n\n" + (&lt;any&gt;obj).stack, "(globally uncaught code)");
              }
              else
                  Utils.logInColor("orange", "An Angular 2 error was caught but ignored: " + message, error);
          }
  
      }
  }
  </code></pre>
  
  <p>How can I capture this error and report to the user the stack trace I see in the JavaScript console when the error is not caught?</p>