Debug better in Angular 15

Angular 15 now provides a better stack trace! Let’s look at how stack trace has been improved in Angular 15.

So Angular team had their customer satisfaction survey and the overall analysis was shown below (from the Angular team)

Looks like most Angular devs felt more difficulties in debugging part 🥲.

And glad that the team has decided to bring some improvement to the stack trace.

ERROR Error: Uncaught (in promise): Error 
Error 
  at app.component.ts:18:11 
  at Generator.next (<anonymous>) 
  at asyncGeneratorStep (asyncToGenerator.js:3:1) 
  at _next (asyncToGenerator.js:25:1) 
  at _ZoneDelegate.invoke (zone.js:372:26) 
  at Object.onInvoke (core.mjs:26378:33) 
  at _ZoneDelegate.invoke (zone.js:371:52) 
  at Zone.run (zone.js:134:43) 
  at zone.js:1275:36 
  at _ZoneDelegate.invokeTask (zone.js:406:31) 
  at resolvePromise (zone.js:1211:31) 
  at zone.js:1118:17 at zone.js:1134:33

The code snipped above will definitely drive the developers to go crazy. For simple debugging, we’ll be wasting more time on zone.js.

Instead in Angular 15, with the help of chrome dev tools angular team was able to bring this improvement collaboratively by which now the chrome dev tools will pop only the application-related errors.

ERROR Error: Uncaught (in promise): Error
Error
    at app.component.ts:18:11
    at fetch (async)  
    at (anonymous) (app.component.ts:4)
    at request (app.component.ts:4)
    at (anonymous) (app.component.ts:17)
    at submit (app.component.ts:15)
    at AppComponent_click_3_listener (app.component.html:4)

So now we can easily get into the component that emits the error and we can see clearly the component (here it is the app.component.ts) is where the error is present.

And yes happy debugging!

If you really found this content helpful, please do follow and let us know through the claps 👏🏼.