Improve support for Flutter Web

[marandaneto]

• Support tracingOrigins for performance feature - replaced by tracePropagationTargets
• Add Flutter web renderer information to event
• Support allowUrls , denyUrls and ignoreErrors (InboundFilters)
• Breadcrumbs and spans for fetch/xmlhttprequest thru the JS SDK
• Support for tunnel parameter
• Native JS error handler thru the JS SDK
• Web vitals thru the JS SDK
• Sessions thru the JS SDK
• Support WASM with Dart 3, Article.
• Improve stack trace symbolication, related issue.
• Read buildNumber and buildName (and use as release/dist)
• Migrate source maps to use the new debug id - buildId support for Flutter Web dart-lang/sdk#53027
• Demangle runtime types
• Support for apps loaded as Chrome extension

Likely more improvements can be made.

[ueman]

Breadcrumbs and spans for fetch/xmlhttprequest

This should not create duplicates when used together with the http or dio integrations.

[bruno-garcia]

https://trends.builtwith.com/websitelist/Flutter

https://trends.builtwith.com/websitelist/Dart

[marandaneto]

https://github.com/dart-lang/source_map_stack_trace/tree/master might be something to look at in case JS stack traces are not so user-friendly, we could do something similar on the Server, well, we already symbolicate it but not sure if this library does something different than us.

[marandaneto]

@blaugold can you provide a minimal reproducible example? (with build commands, upload source maps command, etc).
Every time I test a sample app (Flutter web), symbolication works just fine.
If that's indeed the case, I'd consider it a bug, and raise a new issue, I can do that if that's the case.

[marandaneto]

@blaugold can you try using the https://github.com/getsentry/sentry-dart-plugin plugin instead of calling sentry-cli manually?
Just wanna be sure that all the configuration is correct.
The plugin uses different commands than yours, maybe it's related to that.
Also, link me to a sentry.io event so I can check myself as well.
Btw feel free to raise a new issue about that, so we can avoid the back and forth there, which is a slightly different topic, it'd be a bug if there's something broken.

[marandaneto]

Flutter web has this option in the build cmd:

--build-number                                      An identifier used as an internal version number.
                                                    Each build must have a unique identifier to differentiate it from
                                                    previous builds.
                                                    It is used to determine whether one build is more recent than another,
                                                    with higher numbers indicating more recent build.
                                                    On Android it is used as "versionCode".
                                                    On Xcode builds it is used as "CFBundleVersion".
                                                    On Windows it is used as the build suffix for the product and file
                                                    versions.
--build-name=<x.y.z>                                A "x.y.z" string used as the version number shown to users.
                                                    For each new version of your app, you will provide a version number to
                                                    differentiate it from previous versions.
                                                    On Android it is used as "versionName".
                                                    On Xcode builds it is used as "CFBundleShortVersionString".
                                                    On Windows it is used as the major, minor, and patch parts of the
                                                    product and file versions.

If its set, we could use it as release/dist, instead of the pubspec file?

[kahest]

Duplicate of this with some context/rationale: #1661

[alestiago]

What's the status of this item so far?

[buenaflor]

@alestiago hi, anything specific you are looking for in the list?

[tazik561]

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

[EmmanuelAdeiza]

Is there a solution yet? @buenaflor. I keep getting this instead of dart source codes.

[lisovyk]

This ticket is 2 years old and it doesn't look promising in the thread. IMO it should be the top priority if you are to support Flutter web, I am surprised this takes so long. Right now we have around 50% of 'minified' issues and I am doubting my choice to use Sentry for our flutter product.

At least include some warning in the documentation about this limitation!

[buenaflor]

Hey, we totally understand the frustration and are sorry about the delay of this issue.

What should work:

• seeing the not minified stacktrace

What doesn't work:

• issue titles are still minified (that's one of the task in improving flutter web)

So (in theory) the stacktrace should not be minified in the issues. We'll take a look at that @denrase

At least include some warning in the documentation about this limitation!

You're right, thanks for pointing that out, we will add more visibility on current flutter web limitations to our docs

[EmmanuelAdeiza]

@buenaflor Please just in case I am wrong. Could you give the steps required to get the "What should work:" to work?

We are trying to use sentry on Crx(Flutter Web) to record exceptions, It does that but returns minified stacktraces. To solve this, we uploaded sourcemaps after making build (with the --sourcemaps in the build command) using the sentry_dart_plugin.

It shows on sentry that sourcemaps were uploaded successfully but we still don't see dart code in exception stacktraces.

After this exceptions show minified:kP (minified:a_P at times) instead of the exception types but the stacktraces are still not readable.

Is there any work around to get dart code or are we missing any step?

PS: We also tried to use sentry cli and manually upload the source code after injecting debug-ids but got similar results

[denrase]

Minimal Setup

Below is a minimal setup + steps that show working stack traces + inline dart code for minified code from a flutter web application, build with the release flag.

The app only has one button, which throws an exception. This is then captured using Sentry.

We use the sentry dart plugin to upload all files needed. It will create a release from the name and version in pubspec.yaml. Since we also have a build number, it will take it as dist. The release name will be name@version, with dist parameter taken from the build 4 from the version:

[email protected]+4

pubspec.yaml

name: calculator
version: 1.0.3+4

dependencies:
  sentry_flutter: ^7.18.0

dev_dependencies:
  sentry_dart_plugin: ^1.7.1

sentry:
  upload_debug_symbols: true
  upload_source_maps: true
  project: ... # In this sample the project name is also `calculator`
  org: ...
  auth_token: ...
  wait_for_processing: true
  log_level: info
  commits: false
  ignore_missing: true

Setup & Throwing Code

I added another class in a separate file to see if source mapping works in this case.

main.js:

Future<void> main() async {
  await SentryFlutter.init(
    (options) {
      options.dsn = '... your dsn ...';
      options.tracesSampleRate = 1.0;
    },
    appRunner: () => runApp(const MyApp()),
  );
}

void _throwAnException() {
  try {
    Helper().aThrowingFunction("paramA", true);
  } catch (e, s) {
    Sentry.captureException(e, stackTrace: s);
  }
}

helper.js:

class Helper {
  void aThrowingFunction(String paramA, bool paramB) {
    throw Exception('Only throwing this to test Sentry with paramA $paramA and paramB $paramB.');
  }
}

Build & Upload

flutter build web --release --source-maps
dart run sentry_dart_plugin

This will then uplaod your source maps, and you see something like this output:

> Found 8 files

> Analyzing 8 sources

> Rewriting sources

> Adding source map references

> Bundled 8 files for upload
> Bundle ID: ec34b239-c576-57b3-a52a-c77151208c35

> Uploaded files to Sentry

> File processing complete
> Organization: denrase
> Project: calculator
> Release: [email protected]+4
> Dist: 4
> Upload type: artifact bundle

Source Map Upload Report
  Scripts
    ~/flutter_service_worker.js
  Minified Scripts
    ~/canvaskit/canvaskit.js (sourcemap at ../main.dart.js.map)
    ~/canvaskit/chromium/canvaskit.js (sourcemap at ../../main.dart.js.map)
    ~/canvaskit/skwasm.js (sourcemap at ../main.dart.js.map)
    ~/canvaskit/skwasm.worker.js (sourcemap at ../main.dart.js.map)
    ~/flutter.js (sourcemap at flutter.js.map)
    ~/main.dart.js (sourcemap at main.dart.js.map)
  Source Maps
    ~/main.dart.js.map

Run Web Server

I used python http.server webserver to run the flutter application.

cd build/web
python3 -m http.server 

Click the UI element that throws/captures the exception.

Results

Exception

It should the stack trace and also the dart code.

Source Maps

We should see that the js files, minifier main.js & source map main.js.map are uploaded in the projects settings.

List	Artifacts	Artifacts 2

[EmmanuelAdeiza]

Is this expected to behave differently if the flutter web app is loaded as a chrome extension? Because with the same steps you outlined I am getting this with a lot of missing source issues @denrase @buenaflor

[tazik561]

Is this expected to behave differently if the flutter web app is loaded as a chrome extension? Because with the same steps you outlined I am getting this with a lot of missing source issues @denrase @buenaflor

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

[kahest]

@EmmanuelAdeiza yes, it's expected to work differently when loaded as Chrome extension, and we didn't specifically add support for this - I added an item to the tasklist on top.