5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

AngularAdvent Calendar 2022

Day 4

Better Angular stack traces with async-tagging-stack

Last updated at Posted at 2022-12-03

まだ年一度のAngular Advent Calendarの時期が来ました、今回はAngular v15のStack Trace 改善を紹介したいと思います。
私がJia Liと申します、Angularに7年ぐらいContributionして、今はAngularのCollaboratorとZone.jsのCode Ownerです。

今までAngularのユーザ調査で、一番ユーザが困るのはエラーメッセージとDebug体験です。前のバージョンでAngularが統一なエラーメッセージを提供して、いろいろ改善をしました。でも実際のRuntimeのエラーStack Traceがまだわかりにくい状態です。

例えば、このようなコードで

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'zone-patch';

  onClick() {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((res) => res.json())
      .then((json) =>
        setTimeout(() => {
          this.title = json.title;
          console.trace();
        })
      );
  }
}

以前のバージョンで、出力されたTraceは下記の様な感じで、

    at app.component.ts:17: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

Zone.jsのStackがメインで、アプリケーションのStackがなかなか探しにくいです。
さらにRxjsを利用したら、9割以上がZone.js/Rxjsになって、Debugすることが大変になりました。
(StackTraceでZone.jsの情報が入ってる理由などをNgZone
ご参照頂ければと思います)

そして、上記のような複数の非同期操作が親子関係がある場合、Traceで最後の非同期操作しか
追跡できない、上記の例といえば、エラーなどのTraceがsetTimeoutのコールバックで発生することしか
分からないので、このsetTimeoutfetchのPromise then、そして、fetchがボタンのevent listener
で発生することが追跡できないです。たくさんのユースケースで一連の非同期を追跡することが重要ですので、
簡単にLongStackTraceがほしいです。

Angular v15で、Chrome v106以降の新しいDevTools機能によって、これらの問題を大部改善できました。

1.“Just my code”
Chrome v106 でignore-listed-code 機能を強化して、詳細情報がこちらです。
簡単に纏めると、自動的にStackTraceに表示させたくないBundleを定義することができます。Angular v15で下記の様に

ignore.jpg

zone, @angular/coreなどのコードを自動的にIgnore listに入れて、Stackでユーザー自分のアプリコードしか表示しないこと
が実現できました。

2.Linked Stack Trace
Chrome v106 で新しい async stack tagging APIを提供して、一連の非同期のStackを繋ぐことができるようになりました。
Angular v15でZone.js側でasync stack tagging APIのItegrationを実施して、今下記の様に繋げるStackTraceを
表示することができました。

newstack.jpg

これらの改善によって、ユーザがもっと簡単に自分のコードを集中してDebugすることができました。今これらの機能がChromeしかサポートしません。ぜひChrome v106+で試してください。

以上です。来年もよろしくお願いいたします。

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?