Flutter Web/Desktop missing OS/Device/Browser info

[ajbarry]

Platform:

• Dart
• Flutter Android or iOS
• Flutter Web

IDE:

• VSCode
• IntelliJ/AS
• XCode
• Other, which one?

split-debug-info and obfuscate (Flutter Android or iOS) or CanvasKit (Flutter Web):

• Enabled
• Disabled (CanvasKit)

Platform installed with:

• pub.dev
• GitHub

Output of the command flutter doctor -v below:

❯ flutter doctor -v
[✓] Flutter (Channel unknown, 1.24.0-10.2.pre, on macOS 11.1 20C69 darwin-x64, locale en-US)
• Flutter version 1.24.0-10.2.pre at /usr/local/flutter
• Framework revision 022b333a08 (7 weeks ago), 2020-11-18 11:35:09 -0800
• Engine revision 07c1eed46b
• Dart version 2.12.0 (build 2.12.0-29.10.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
• Android SDK at /Users/adam/Library/Android/sdk
• Platform android-29, build-tools 29.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.3, Build version 12C33
• CocoaPods version 1.10.0

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.6)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 45.1.1
• Dart plugin version 192.7761
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code (version 1.52.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.18.0

[✓] Connected device (2 available)
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.88

• No issues found!

The version of the SDK (See pubspec.lock):
4.0.1

---

I have the following issue:

On previous versions of the Sentry integration with Flutter Web we were able to see OS and Browser info but after the upgrade, this info is no longer captured or available in error reports.

Steps to reproduce:

• Upgrade package to sentry_flutter: ^4.0.1

Actual result:

• No mobile OS info is captured with errors
• No mobile Browser info captured with errors

Expected result:

• Result

[marandaneto]

@ajbarry thanks for raising this.

true, The Flutter Web integration is pretty raw yet, as it's not even stable yet.

I don't think it's possible to read the OS/device info from a browser context, but you could set the Browser info manually for now.

  Sentry.configureScope((scope) {
    // read userAgent and set to the Browser object
    final browser = Browser(
      name: '',
      version: '',
    );
    scope.setContexts(Browser.type, browser);
  });

ideally, we'd do this automatically, we'll be there :)

Feel free to submit a PR as well, happy to guide you.

[marandaneto]

update: looks like thru the fluttercommunity/plus_plugins would be possible to read device info as well, for Future reference: https://github.com/fluttercommunity/plus_plugins/blob/main/packages/device_info_plus_web/lib/device_info_plus_web.dart

[ueman]

You can read the OS from Flutters Platform class.
It returns the OS based on the UserAgent if you are using Flutter Web. That's also the reason for the kIsWeb constant

See https://github.com/flutter/flutter/blob/e605b7c2250e803f46017b1d544fc8c297007546/packages/flutter/lib/src/foundation/_platform_web.dart and https://api.flutter.dev/flutter/foundation/kIsWeb-constant.html

[marandaneto]

yeah the device_info_plus does pretty much the same, everything seems based on the html.window.navigator field, nice.
so it's indeed possible :)

[mnordine]

Not sure what this has to do with Flutter, it's a web issue, which Flutter web depends on. Any solution should build on a solution for the web, in general.

[marandaneto]

Not sure what this has to do with Flutter, it's a web issue, which Flutter web depends on. Any solution should build on a solution for the web, in general.

that makes sense, although is it a common thing that people do Dart Web but not using the Flutter framework?

[mnordine]

is it a common thing that people do Dart Web but not using the Flutter framework?

Lol, yes. Just curious, why would you think that's uncommon? It's almost as if you're under the impression most dart web apps are Flutter web apps? I think your impression is a result of a very successful marketing campaign.

Dart is a general purpose programming language, not a Flutter language.

[ueman]

Out of curiosity, what are you using? Angular Dart or server side Dart like Jaguar or Angel?

[mnordine]

A mix. Some projects just the Dart SDK client side, some use StageXL to render WebGL.

On server side, some projects use Aqueduct, some use Redstone (Dart 1, but still works well, it was a great package!), some just use custom middleware and shelf.

I think often projects don't need a framework like Angular or Flutter.

[marandaneto]

Lol, yes. Just curious, why would you think that's uncommon? It's almost as if you're under the impression most dart web apps are Flutter web apps? I think your impression is a result of a very successful marketing campaign.

just because we rarely have seen people asking for pure Dart Web features/improvements or even finding bugs, the Flutter framework is just tunning the Dart language and I don't see why people wouldn't take this advantage, of course, each case, each case, nothing against, it has its merits and as you can see, we offer a compatible package too :)

[bruno-garcia]

What we can do on the sentry package to get Web related features we will (once we get the bandwidth to focus on it). It's likely there'll be Flutter Web specific APIs we can call on the sentry_flutter package specifically for Flutter too.

At this point Web hasn't been a focus for us other than making sure it works for Web. The reason we split it in two packages (sentry and sentry_flutter) was to make sure we'd continue to support Dart2JS and DartVM outside of Flutter.

That said we'd love to get PRs to help us improve our Dart Web support. If you're interested in contributing, we could discuss it further on GitHub issues/discussions or on Sentry's Discord: http://discord.gg/sentry

[mnordine]

I understand why you'd have 2 different packages.

But for this particular issue, gathering OS/Device/Browser info, it must be the same. You cannot magically get any other info from a browser client because "Flutter".

I would understand, say, if there was additional Flutter build info that a Flutter dev would want to gather, but that has nothing to do with this issue.

[bruno-garcia]

You cannot magically get any other info from a browser client because "Flutter".

We can call Flutter APIs that abstract away the platform, as we do. Not saying I know of any at this point otherwise we'd likely already have it in. Flutter Web isn't GA yet and isn't a priority as we said before.

If, for example we could easily get Browser info through a flutter-only package, we could take the quick win as opposed to not having anything at all. I'm unaware of the effort to get device data on Web through the pure Dart package (sentry, without flutter sdk dependency) though.

[mnordine]

Yeah, that package you linked to has nothing to do with the web. Anyway, I guess I'll create a separate issue.

Edit: Just adding here to link the discussion: #315

[bruno-garcia]

Yeah, that package you linked to has nothing to do with the web. Anyway, I guess I'll create a separate issue.

Edit: Just adding here to link the discussion: #315

The goal of that package is to abstract device information for Flutter and Web and Desktop support (whatever is possible) will be added.

Consider the plus packages:

https://github.com/fluttercommunity/plus_plugins#device_info_plus

Example

[ueman]

We should do something similar to the Enricher of sentry-dotnet.

We, however, need 3 types of it:

1. dart-io: For console applications. This can read from Darts platform class
2. dart-html: For use in web pages with for example angular-dart. This can use dart:html to read information
3. Flutter: Use device_info_plus like described above.

The first two live in the plain Dart code while 3 is (obviously) a part of the Sentry Flutter SDK.

[mnordine]

for example angular-dart

What does angular have to do with any of this? It's just for dart web, in general, right?

[ueman]

for example angular-dart

What does angular have to do with any of this?

Nothing, it was just meant as an example where it could be used. It can also be used in pure dart webpages. I don't intend it to have any dependencies, if that's what you are concerned about :)

[mnordine]

Yes, thanks. I just don't understand the need to mention a framework or library, as it can be confusing.