Flutter Web: stack trace lists JS instead of Dart files.

[obeobe]

When an exception is thrown in a Flutter Web application, the stack trace lists .js files instead of .dart files, which makes it difficult to reason about and debug.

For example, type in the following application:

void main() {
  throw "My Hello World Exception";
}

When I run this I get:

Error: My Hello World Exception
    at Object.throw_ [as throw] (http://localhost:43337/dart_sdk.js:5041:11)
    at main$ (http://localhost:43337/packages/test2/main.dart.lib.js:12:15)
    at main (http://localhost:43337/web_entrypoint.dart.lib.js:33:29)
    at main.next (<anonymous>)
    at http://localhost:43337/dart_sdk.js:37403:33
    at _RootZone.runUnary (http://localhost:43337/dart_sdk.js:37274:59)
    at _FutureListener.thenAwait.handleValue (http://localhost:43337/dart_sdk.js:32530:29)
    at handleValueCallback (http://localhost:43337/dart_sdk.js:33057:49)
    at Function._propagateToListeners (http://localhost:43337/dart_sdk.js:33095:17)
    at _Future.new.[_completeWithValue] (http://localhost:43337/dart_sdk.js:32943:23)
    at http://localhost:43337/dart_sdk.js:32194:46
    at _RootZone.runUnary (http://localhost:43337/dart_sdk.js:37274:59)
    at _FutureListener.then.handleValue (http://localhost:43337/dart_sdk.js:32530:29)
    at handleValueCallback (http://localhost:43337/dart_sdk.js:33057:49)
    at Function._propagateToListeners (http://localhost:43337/dart_sdk.js:33095:17)
    at _Future.new.[_completeWithValue] (http://localhost:43337/dart_sdk.js:32943:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:43337/dart_sdk.js:32964:35)
    at Object._microtaskLoop (http://localhost:43337/dart_sdk.js:37526:13)
    at _startMicrotaskLoop (http://localhost:43337/dart_sdk.js:37532:13)
    at http://localhost:43337/dart_sdk.js:33303:9

Breakpoints work correctly, so it seems that the JS <--> Dart mapping infrastructure does work correctly.

I'm using Android Studio and Chromium on Ubuntu 20.04.

Flutter doctor:

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on Linux, locale en_US.UTF-8)
    • Flutter version 2.2.3 at /home/user/flutter
    • Framework revision f4abaa0735 (7 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /home/user/Android/Sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /home/user/Downloads/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+0-b944-P17168821)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = chromium

[✓] Android Studio (version 4.2)
    • Android Studio at /home/user/Downloads/android-studio
    • Flutter plugin version 58.0.1
    • Dart plugin version 202.8488
    • Java version OpenJDK Runtime Environment (build 11.0.8+0-b944-P17168821)

[✓] IntelliJ IDEA Ultimate Edition (version 2020.2)
    • IntelliJ at /snap/intellij-idea-ultimate/current
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Chromium 86.0.4240.75 snap

[TahaTesser]

HI @obeobe
This is working as expected, the flutter's dart converted code is running from js
Read https://flutter.dev/docs/resources/architectural-overview#flutter-web-support
Closing, as this isn't an issue with Flutter itself. If you disagree, please write in the comments and I will reopen it.
Thank you

[obeobe]

Hi @TahaTesser ,

I realize that it's running in JS. This is besides the point.
JS stack traces can be converted to reference the relevant Dart files/functions.

I am not an expert on this, but I believe that this is done with source-maps, and I have seen it work correctly when working with Typescript (where I get stack traces that reference my Typescript code, even when the actual JS code is concatenated, obfuscated, and minified, to the point it is considerably different from the original Typescript).

This is obviously also done in Flutter/Dart to some extent, as I can trace through, watch variables, and debug Dart code in the IDE even when what actually gets executed in the browser is the generated JS.

Please re-open the issue, as it's not a complaint about the code running in the JS, but rather a complaint about a bug (or a gap) in the tooling. Stack traces can and should reference my actual source code rather than the compiled JS.

[obeobe]

Hi @TahaTesser ,

Can you please re-open this issue and send it to triage?
This is bad developer experience and a serious shortcoming (if not bug) in Flutter tooling for web.
It's possible that proper support was just not developed, which would make this a feature request, but it's unlikely that this is the behavior the Flutter team deems "correct".

[TahaTesser]

@obeobe

I am not an expert on this, but I believe that this is done with source-maps,

You can source maps,flutter build web -h

    --[no-]source-maps                 Generate a sourcemap file. These can be used by browsers to view and debug the original
                                       source code of a compiled and minified Dart application.
    --pwa-strategy                     The caching strategy to be used by the PWA service worker.

          [none]                       Generate a service worker with no body. This is useful for local testing or in cases
                                       where the service worker caching functionality is not desirable
          [offline-first] (default)    Attempt to cache the application shell eagerly and then lazily cache all subsequent
                                       assets as they are loaded. When making a network request for an asset, the offline cache
                                       will be preferred.

    --base-href                        Overrides the href attribute of the <base> tag in web/index.html. No change is done to
                                       web/index.html file if this flag is not provided. The value has to start and end with a
                                       slash "/". For more information:
                                       https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

Run "flutter help" to see global options.
PS C:\Users\Taha\StudioProjects\triage>

[obeobe]

@TahaTesser ,

1. I do have source maps enabled. They DO generally work.
2. I can view and debug Dart code in the browser.
3. The exception is rendered correctly in the browser, with references to Dart files, that open right in the browser's dev tools.
4. But in the Flutter debugger back-end itself seems to ignore the sourcemaps or otherwise fail to utilize them.
5. See SS with correct behavior in the browser, and incorrect behavior in the IDE console (whose content comes from the Flutter debugger, I believe):

[TahaTesser]

Hi @obeobe
Source maps are only supported in the build, not at run

[obeobe]

Hi @TahaTesser ,

Not sure I understand what you mean.
If you mean that it's just not supported - then fine, but this is sub-par developer experience, and not in line with other modern languages, including (I suspect) Flutter itself when used on mobile platforms.
So maybe this issue is a "feature request" rather than a bug report, but I don't understand why it should be closed.

[obeobe]

@TahaTesser can you please re-open and re-triage this issue, perhaps by someone who is more familiar with this subject? (you said you weren't).