feat: Add Async Stack Tagging API support

[JiaLiPassion]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• angular.io application / infrastructure changes
• Other... Please describe:

Chrome has an experimental API to improve the debug experience of the
async tasks.
The details can be found here https://bugs.chromium.org/p/chromium/issues/detail?id=332624#c29

This commit add the async stack tagging support in the zone.js.
User can import 'zone.js/plugins/async-stack-tagging'; to enable this
feature.

Here is a sample when enable this feature

So we can use console.trace to print the async tasks chain information.

[atscott]

Suggested change

	fdescribe('AsyncTaggingConsoleTest', () => {
	describe('AsyncTaggingConsoleTest', () => {

[jessicajaniuk]

reviewed-for: size-tracking

[jessicajaniuk]

This PR was merged into the repository by commit 19e6d9c.

[ArielGueta]

@JiaLiPassion what is different from the current behavior? I don't have this feature and I still see the same as your image:

See the async tag for setTimeout.

Thanks.

[JiaLiPassion]

@ArielGueta , good point, I will ask the author of the async tagging api about the difference and let you know the result.

[victorporof]

With this API, there are a few improvements that make the Angular debugging experience better across Chrome DevTools:

1. There are now more situations in which async stacks are collected. For example, when using Promises (or even chained Promises) with Zone.js, the promise scheduling site will now also be a part of the stack trace.

2. It's not just console.trace that emits the complete stack traces. You'll also see them on thrown errors (when you expand the error), in the Console panel.

3. In addition, you'll also see the complete stack traces when paused at a breakpoint or exception, in the Call Stack inside the Sources panel (the debugger). They'll also interop with ignore-listing.

Note: support is currently behind a --js-flags="--experimental-async-stack-tagging-api". We plan to enable this by default in Chrome DevTools soon.

[JiaLiPassion]

Thank you @victorporof , here are some screenshots of the debugger breakpoints.

1. without async tagging support.
   

2. with async tagging support
   

[ArielGueta]

Thanks @victorporof @JiaLiPassion

[LanderBeeuwsaert]

Hi @JiaLiPassion,
is there somewhere a description of how to add this feature for now?
Do we add it in the angular.json scripts array as "node_modules/zone.js/plugins/async-stack-tagging.min"
or do we add it to app module or app component?
On top of that, each user for now needs to add the flag when booting chrome?

Will this be simplified later on and it's better to wait for now or do we go ahead and implement it in our app as-is?

[JiaLiPassion]

@LanderBeeuwsaert , to make it work for now, you need to

1. update polyfills.ts

import 'zone.js';
import 'zone.js/plgins/async-stack-tagging';

2. in main.ts,

const AsyncStackTaggingZoneSpec = (Zone as any)['AsyncStackTaggingZoneSpec'];
Zone.current
  .fork(new AsyncStackTaggingZoneSpec('angular'))
  .run(() => {
    platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch((err) => console.error(err));
  });

After the new release of the @angular/core, you just need to do the 1st step to make it work, or maybe the angular cli will provide some option to do the 1st step for you.

[victorporof]

Heads-up: we are making some changes to the Chrome DevTools console API that drives this feature, so this might not do anything in very recent versions of Chrome Canary. This will be updated in #46958.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}