Log exceptions/stack traces "nicer" in the browser

[matanlurey]

(Internal bug is b/79354007.)

An internal customer writes:

The window.console.error() method is used to log errors to the console. It includes a stack trace rendered under an expander arrow. Unfortunately this is just the current stack trace at the time that .error() is called, rather than the stack trace from where any error was thrown.

https://github.com/dart-lang/angular/blob/0bb611387d29d65b5af7f9d2515ab571fd3fbee4/angular/lib/src/platform/browser/exceptions.dart#L13-L19

It would be nice if we could specify the stack trace for .error() to render under the expanded error. It looks like most teams (including AngularDart) are working around this by concatenating any actual useful stack trace to the error message, printing it straight into the console.

Since window.console.error() is a JavaScript method, I'm not sure it supports this, and it may not be easy to add support for. But it would be nice to have.

See: https://api.dartlang.org/stable/1.24.3/dart-html/ConsoleBase/error.html

... I agree here. Here is an example of the console output of:

import 'package:angular/angular.dart';

import 'main.template.dart' as ng;

void main() => runApp(ng.HelloWorldComponentNgFactory);

@Component(
  selector: 'hello-world',
  template: 'Hello World: {{willError}}',
)
class HelloWorldComponent {
  String get willError => throw new Error();
}

Notice that, as the user explained, the stack trace is just plain text.

Compare it with an example of errors thrown outside of AngularDart:

main() {
  throw new Error();
}

... err actually this is even worse. Maybe this is a regression externally/fixed internally?

(/cc @natebosch @jakemac53 - should we track this in dart-lang/build or DDC @vsmenon?)

OK, here is that same basic (throw new Error()) program run with Dart2JS externally:

... with the exception of being minified (intentional), notice that:

• The stack trace is formatted neatly, using the built-in browser/console APIs.
• The different frames are clickable, and it jumps to source (with source maps).

We should be able to get that same experience, by default, for DDC + AngularDart.

[natebosch]

yeah I think this sounds like a request for DDC + Dart2Js to expose a method in dart:html that lets us log 'nice' exceptions and stack traces without actually throwing them.

[matanlurey]

I think we could use package:js and JS-interop to window.console, partially.

It's not clear what we should do for "long" stack traces, though.

[vsmenon]

The console methods (https://api.dartlang.org/dev/2.0.0-dev.59.0/dart-html/Console-class.html) take objects, not just strings. If you log the error directly (instead of stringifying it), do you get a better / inspectable trace?

[matanlurey]

@vsmenon It's actually much worse when I do that:

window.console.error(exception);

And when I try the StackTrace object:

window.console.error(stack);

... not any better. I think this might be blocked at the DDC-level, since this looks fine in Dart2JS.

[vsmenon]

Matan - it looks like you don't have custom formatters enabled in Chrome Dev Tools. (Unfortunately, we can't automatically turn that on.)

[matanlurey]

@vsmenon: Wow! That looks much better.

Is this something we can feature detect to warn users (like myself)?

At minimum, we need to have this is in the "getting started" somewhere

/cc @kevmoo @chalin @kwalrath

[matanlurey]

Here is the link I looked up to enable it:
http://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html

[chalin]

That sounds reasonable to me. @kwalrath, WDYT?

[kwalrath]

The only issue is where we should tell people about this. Although we can say something in Getting Started, it'll lack context. (Still, we could have a Tip box that links to elsewhere for more information.)

We plan to add a doc about debugging with DDC... that's probably where it makes sense to have the full story. I'll put this on my list of things to discuss.

[eredo]

It looks like it's enabled by default when using https://github.com/dart-lang/devtools-frontend . However not sure about the status and when we can use it.
@matanlurey Any plans on when the BrowserExceptionHandler will forward the stack directly without the exceptionToString modification?

[matanlurey]

@eredo Not yet, because I don't believe the "long" (async) stack traces will work.

[matanlurey]

No action.

[lejard-h]

Still not able to 'correctly' log errors and stack traces.
It's still plain text.

Are you planning to fix it ?