Setting up Sentry for Flutter Web
On the official Flutter docs, they say you can run
flutter build web to compile for a release, and it'll generate everything you need, including source maps.
However this is not the case. Also, I remember it was quite hard to do with Dart. See my old post about it.
After a quick search, I found this post, which gives an obscure command line option, but I also found a much simpler one at https://github.com/flutter/flutter/issues/72150#issuecomment-755541599:
flutter build web --source-maps.
But ultimately, the reason why I wanted those source maps was for Sentry to give me legible stack traces. So far I was getting reports like this:
It turns out there's a way to send the map to Sentry without generating the source map. At https://stackoverflow.com/questions/58049219/is-it-possible-to-upload-the-flutter-source-maps-or-source-code-to-sentry-for-be, they show you how:
- when building your Flutter web, set an environment variable called SENTRY_RELEASE with a release version (source)
sentry-clito map this release version with the source map (source)
What I don't understand is why they upload source maps using dart, js and map files. I would expect to only send the .js.map file.
I installed sentry-cli by following the instructions at https://github.com/getsentry/sentry-cli, then tried it using a simplified version of the example script:
export SENTRY_RELEASE=$(date +%Y-%m-%d_%H-%M-%S) flutter build web --dart-define=SENTRY_RELEASE=$SENTRY_RELEASE --source-maps firebase deploy --only hosting sentry-cli releases new $SENTRY_RELEASE sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps build/web --ext js sentry-cli releases finalize $SENTRY_RELEASE
Upon running it, I got this error message:
error: An organization slug is required (provide with --org)
I figured I should read how to set up the tool. On the tool's page on authentication, it looks like it's as easy as running
sentry-cli login. Upon running, it redirects me to a Sentry configuration page where I should create a token, then copy paste it into the CLI tool.
Upon running the tool, it still told me that the org was missing. What string is that? When going to the Sentry dashboard, it turns out I had set up only one organization. So that was the value. Ran again and got a new error:
error: A project slug is required
Btw all of these config flags are listed at https://docs.sentry.io/product/cli/configuration/#configuration-values.
Finally with this script, it uploaded the source maps fine.
export SENTRY_RELEASE=$(date +%Y-%m-%d_%H-%M-%S) flutter build web --dart-define=SENTRY_RELEASE=$SENTRY_RELEASE --source-maps firebase deploy --only hosting export SENTRY_ORG=[org name] export SENTRY_PROJECT=[project name] sentry-cli releases new $SENTRY_RELEASE sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps build/web sentry-cli releases finalize $SENTRY_RELEASE
Now I'll have to wait for some exceptions to happen to see if the logs look better. One thing that worried me when I first looked into whether it was possible, is that https://docs.sentry.io/platforms/flutter said:
Limited support for Flutter Web, Windows, and Linux