Source Maps for Flutter Web are not used in dashboard issues

[mkukharev]

Platform

Flutter Web

Obfuscation

Enabled

Debug Info

Disabled

Doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.7, on macOS 14.0 23A344 darwin-arm64, locale en-NZ)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
✗ cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run flutter doctor --android-licenses to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[!] Xcode - develop for iOS and macOS (Xcode 15.0)
✗ Unable to get list of installed Simulator runtimes.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.1)
[✓] VS Code (version 1.83.0)
[✓] Connected device (2 available)
[✓] Network resources

Version

7.10.1

Steps to Reproduce

After going through the docs and StackOverflow posts, I ended up with the following setup.

In the main.dart file I have the following code

void main() async {
  runZonedGuarded(() async {
    await LocalStorage.initData();
    await dotenv.load();
    var appProviderWrapper = const ReceptionerAppProviderWrapper();
    await SentryFlutter.init(
      (options) {
        options.dsn =
            'https://${dotenv.env['SENTRY_PROJECT_KEY']!}@o1329392.ingest.sentry.io/${dotenv.env['SENTRY_PROJECT_SUFFIX']!}';
        // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
        // We recommend adjusting this value in production.
        options.tracesSampleRate = 1.0;
        options.attachScreenshot = true;
        options.screenshotQuality = SentryScreenshotQuality.low;
        options.sampleRate = 1.0;
        options.release = 'receptioner_dashboard@2.0.0';
        options.environment = 'production';
        options.dist = 'rprod';
      },
    );
    runApp(
      SentryScreenshotWidget(
        child: appProviderWrapper,
      ),
    );
  }, (exception, stackTrace) async {
    await Sentry.captureException(exception, stackTrace: stackTrace);
  });
}

This code is built in AWS Amplify using a custom docker image (with flutter preinstalled). Then using sentry-cli the source maps are uploaded into Sentry using the following command

sentry-cli releases files receptioner_dashboard@2.0.0 upload-sourcemaps ./build/web/ --rewrite --org=redium --project=$SENTRY_PROJECT --auth-token=$SENTRY_API_KEY --dist=rprod 

The release makes it to sentry with files attached to it

On the last screenshot, the labels on the issue match the values that I used in the Flutter code (release and environment). The "dist" value is the same in the code and in the sentry-cli command and can be seen on the screenshot of the bundle for the release.

Expected Result

I should be able to see a source code lines where the exception happened

Actual Result

Despite everything seems to be connected and set up, I still see this in every issue in the Sentry Dashboard

Are you willing to submit a PR?

None

[krystofwoldrich]

Hi @mkukharev,
thank you for the message, are all your issues not symbolicated?

Some of the frames that are from the Flutter framework won't be symbolicated at the moment -> #1613.

Would you be able to share a minimal reproducible example with us?

[mkukharev]

Hi @krystofwoldrich . Thanks for the reply. Yes, all issues are not symbolicated. Happy to compose an example and share it with your guys. How do you want me to share it? I can possibly create an empty Sentry account, use it for the example app deployment and create a public github repo with the code in it? Would this help?

[buenaflor]

@mkukharev Hi, yes that sounds good, that would help a lot.

[mkukharev]

Hi guys. Sorry for a bit delay.
As discussed, here is the repository with the code and the Sentry project/org details
repo: https://github.com/mkukharev/flutter-sentry-demo
Sentry org: receptioner, project: monitoring

In the code repo, I also uploaded a script to upload the source maps. I can it uploaded to the org and it contains 8 artifacts. The code also mentions this release with environment and dist data. Hope this will be helpful

[buenaflor]

Thank you! We will investigate this

[buenaflor]

@mkukharev after some investigation here is an example of what should work for you. What's most important is that release and dist match.

await SentryFlutter.init(
  (options) {
    // other options
    options.release = 'my-release@1.0.1+1';
    options.dist = '1';
  },
);

export SENTRY_API_KEY=your_key
export SENTRY_DIST=1
export SENTRY_RELEASE=my-release@1.0.1+1
sentry-cli --auth-token "$SENTRY_API_KEY" releases --org sentry-sdks --project sentry-flutter new "$SENTRY_RELEASE"
sentry-cli --auth-token "$SENTRY_API_KEY" releases --org sentry-sdks --project sentry-flutter files "$SENTRY_RELEASE" upload-sourcemaps "./build/web" --ext map --ext js --dist $SENTRY_DIST
sentry-cli --auth-token "$SENTRY_API_KEY" releases --org sentry-sdks --project sentry-flutter files "$SENTRY_RELEASE" upload-sourcemaps "./" --ext dart --dist $SENTRY_DIST
sentry-cli --auth-token "$SENTRY_API_KEY" releases --org sentry-sdks --project sentry-flutter set-commits "$SENTRY_RELEASE" --auto --ignore-missing
sentry-cli --auth-token "$SENTRY_API_KEY" releases --org sentry-sdks --project sentry-flutter finalize "$SENTRY_RELEASE"

Example on how to run this:

either flutter web --release --sourcemaps then ./upload_source_maps.sh
or for immediate testing flutter run --release then ./upload_source_maps.sh then trigger an exception.

You will still encounter source-context error messages but they can be ignored for now and are not relevant for this. Your stacktrace will still be deobfuscated and source context will be present. see here

[buenaflor]

@cristiano2lopes

If you still have trouble with this then try the following. Your process will be different since you use the plugin.

await SentryFlutter.init(
  (options) {
    // other options
    options.release = 'my-release@1.0.1+1';
    options.dist = '1';
  },
);

sentry:
  upload_source_maps: true
  upload_sources: true # this doesn't matter, web will automatically upload sources regardless of value
  release: my-release@1.0.1+1 # +1 will automatically create a --dist=1 so you have to add an additional dist in the options of init
  project: ****
  org: ****
  auth_token: ****
  ignore_missing: true

Example on how to run this:

either flutter web --release --sourcemaps then dart run sentry_dart_plugin
or for immediate testing flutter run --release then dart run sentry_dart_plugin then trigger an exception.

As above, you will still encounter source-context error messages but they can be ignored for now and are not relevant for this. Your stacktrace will still be deobfuscated and source context will be present. see here

[cristiano2lopes]

@cristiano2lopes

If you still have trouble with this then try the following. Your process will be different since you use the plugin.

await SentryFlutter.init(
  (options) {
    // other options
    options.release = 'my-release@1.0.1+1';
    options.dist = '1';
  },
);

sentry:
 upload_source_maps: true
 upload_sources: true # this doesn't matter, web will automatically upload sources regardless of value
 release: my-release@1.0.1+1 # +1 will automatically create a --dist=1 so you have to add an additional dist in the options of init
 project: ****
 org: ****
 auth_token: ****
 ignore_missing: true

Example on how to run this:

either flutter web --release --sourcemaps then dart run sentry_dart_plugin or for immediate testing flutter run --release then dart run sentry_dart_plugin then trigger an exception.

As above, you will still encounter source-context error messages but they can be ignored for now and are not relevant for this. Your stacktrace will still be deobfuscated and source context will be present. see here

@buenaflor Yes I have the setup like you suggest and I see the stack traces for some errors. The message of the issue still refers to the minified version and that is awful for triage. I can ignore the errors, but the symbolication is not great.

[buenaflor]

@cristiano2lopes

Yes we are aware, apologies for that.

We are tracking the issue regarding the symbolication of the title here.

If you have any other feedback pls don't hesitate to open an issue

[mkukharev]

I had some sort of success after I applied the script, but it's way far from what would be "good to debug". All issues are still showing missing source maps, around 30% of the issues show me "some" source code where the error happen. "some" means it shows the place where the error happened, but there is no stacktrace, so I can't see where the call came from to this code (call hierarchy).

As I said, it's quite far from the ideal view, but it's still better that it used to be. Now at least I can "guess" where the issue is by looking at the breadcrumbs shown in the issue.

@buenaflor is it something you can also look into?

[buenaflor]

@mkukharev the missing source context error issue is tracked here.

around 30% of the issues show me "some" source code where the error happen. "some" means it shows the place where the error happened, but there is no stacktrace

Could you share a link to the events? If you don't want to share it here you can also send it to me at giancarlo.buenaflor@sentry.io

[getsantry]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[mkukharev]

@buenaflor it doesn't completely block me now, I am happy to close this issue and will wait until all linked ones are resolved. Hope it'll all just work then

[buenaflor]

@mkukharev fyi, the source context errors should be fixed and not show up anymore. let me know if that also works on your end

[tazik561]

release: my-release@1.0.1+1 

I also have this problem https://stackoverflow.com/questions/78290786/flutter-web-sentry-did-not-translate-correctly-issues/78291321#78291321