[dart2wasm] Empty 'names' field in generated source maps

[buenaflor]

Environment

• Dart 3.5.2
• Flutter 3.24.2
• macOS 14.4.1

Description

When building a project for web with wasm, the generated source map file has an empty "names" field. This won't allow mapping symbol names to stack frames, which hinders debugging capabilities.

I have checked this commit: 10742d9
which asserts the function name in the source_map_simple_test.dart so it should work (or at least used to work)

Maybe I'm also missing some setup detail.

Steps to Reproduce

Example 1: Flutter

1. Create a new Flutter web project for example through Android Studio
2. Run the command flutter build --wasm --source-maps
3. Examine the generated main.dart.wasm.map file

Example 2: Dart

1. Create a Dart Web project with dart create -t web mywebapp
2. Compile WASM: dart compile wasm web/main.dart
3. Examine the generated main.wasm.map file

Expected Behaviour

The "names" field in the main.dart.wasm.map file should contain symbol names that can be used to map to stack frames.

Actual Behaviour

The "names" field in the main.dart.wasm.map file is empty.

Example Sourcemap Snippet

{
  "version": 3,
  "sources": [
  	"... etc",
    "org-dartlang-sdk:///lib/_internal/wasm/lib/date_patch_patch.dart"
  ],
  "names": [],
  "mappings": [
	"... etc",
    "0r8BAuM+C,IAAd,EAAK,C,yBA4BvB,CACI,WAAF,CAAoB,WAAH,CAqE9B"
  ]
}

[dart-github-bot]

Summary: The generated source map for Dart/Flutter web projects compiled to WASM has an empty "names" field, preventing symbol name mapping and hindering debugging. This issue occurs despite a recent commit that should have ensured function names are included in the source map.

[mkustermann]

/cc @osa1

[osa1]

We used to generate names but wasm-opt doesn't support them and Chrome devtools doesn't use them, so I removed them in 1b1740e.

I had also asked around internally before removing them to see if there are any tools that use those names but couldn't find one.

@buenaflor which tool are you using that makes use of the names in source maps?

[buenaflor]

We used to generate names but wasm-opt doesn't support them and Chrome devtools doesn't use them, so I removed them in 1b1740e.

Ah okay got it.

which tool are you using that makes use of the names in source maps?

I was investigating the effort to use sourcemaps for flutter web wasm stacktraces for us at sentry.io. that's the main use case

related issue

[buenaflor]

I wanted to check out how much info the current wasm sourcemap will provide us at sentry but our sentry-cli validates sourcemaps so I cannot upload it, e.g error: bad reference to name #0

[osa1]

Could you share the instructions to generate the source map file that causes this error?

We don't generate names in the mappings (as described above) so I'm not sure how you can see a reference to a name.

[buenaflor]

We don't generate names in the mappings (as described above) so I'm not sure how you can see a reference to a name

Sry my bad, I tried it again and used the wrong sourcemap before. Works as intended.

Dunno if it's feasible for you to re-enable generating names generally or through an additional flag?

[osa1]

@buenaflor How do you plan to use the names and what how do you want the generated code to be named? (e.g. name code with the name of the function it belongs, or something else?)

[buenaflor]

In our Javascript SDKs and Flutter Web we use it to unminify the stacktrace for crash and error reporting.
So we are aiming for providing useful stacktraces to users. Ideally the stackframes would be able to map to its original function name

Example from our Flutter Web dart2js stacktrace (don't mind the stacktrace formatting):

StateError: Bad state: try catch
  at Object.c(main.dart.js:3494:19)
  at <fn>(main.dart.js:28168:9)
  at aEx.a(main.dart.js:4857:63)
  at aEx.$2(main.dart.js:38020:14)
  at Object.u(main.dart.js:4843:10)
  at V_.aFZ(main.dart.js:28185:10)
  at Gj.WL(main.dart.js:51878:14)
  at tear_off.<fn>(main.dart.js:3629:79)
  at ht.Xg(main.dart.js:48625:9)
  at ht.d3(main.dart.js:48630:21)

// unminified to:

StateError: Bad state: try catch
  at wrapException(org-dartlang-sdk:///dart-sdk/lib/_internal/js_runtime/lib/js_helper.dart:1198:19)
  at tryCatch(../../../lib/main.dart:786:5)
  at _wrapJsFunctionForAsync(org-dartlang-sdk:///dart-sdk/lib/_internal/js_runtime/lib/async_patch.dart:303:19)
  at dartProgram(main.dart.js:329:4)
  at _asyncStartSync(org-dartlang-sdk:///dart-sdk/lib/_internal/js_runtime/lib/async_patch.dart:233:3)
  at asyncThrows(../../../lib/main.dart:793:3)
  at _InkResponseState.handleTapCancel(../../../../../../../../Documents/flutter/packages/flutter/lib/src/material/ink_well.dart:1175:5)
  at A.aYf(org-dartlang-sdk:///dart-sdk/lib/_internal/js_runtime/lib/js_helper.dart:2257:9)
  at GestureRecognizer.invokeCallback(../../../../../../../../Documents/flutter/packages/flutter/lib/src/foundation/assertions.dart:407:10)
  at dartProgram(main.dart.js:338:6)

[osa1]

If you build your Flutter app with --no-strip-wasm you should see function names in your stack traces.

Example:

f() {
  g();
}

g() {
  throw 'hi';
}

void main() {
  f();
}

Output:

hi
    at Error._throwWithCurrentStackTrace (wasm://wasm/0008a6b2:wasm-function[119]:0xe5d3)
    at g (wasm://wasm/0008a6b2:wasm-function[587]:0x1ceeb)
    at f (wasm://wasm/0008a6b2:wasm-function[586]:0x1cedf)
    at main (wasm://wasm/0008a6b2:wasm-function[583]:0x1cec7)
    at main tear-off trampoline (wasm://wasm/0008a6b2:wasm-function[585]:0x1ced9)
    at _invokeMain (wasm://wasm/0008a6b2:wasm-function[70]:0xb0ff)
    at InstantiatedApp.invokeMain (/usr/local/google/home/omersa/dart/sdk/test/test.mjs:361:37)
    at main (/usr/local/google/home/omersa/dart/sdk/sdk/pkg/dart2wasm/bin/run_wasm.js:416:21)
/usr/local/google/home/omersa/dart/sdk/sdk/pkg/dart2wasm/bin/run_wasm.js:346: [object WebAssembly.Exception]

You can see the names Error._throwWithCurrentStackTrace, g, f, main.

Flutter drops the relevant part of the .wasm files so you have to pass --no-strip-wasm to see the names, e.g. flutter build web --wasm --no-strip-wasm.

Does this work for you?

[buenaflor]

Flutter drops the relevant part of the .wasm files so you have to pass --no-strip-wasm to see the names, e.g. flutter build web --wasm --no-strip-wasm.

It definitely works as a temporary solution (generally this issue is not a very high priority for us currently so it's fine right now), but it does impact the wasm file size quite a bit for users so imo long term it'd be more ideal to strip the symbols and leverage the sourcemaps