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.

Build and release a web app

How to prepare for and release a web app.

Flutter Logo

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)
• use sentry-cli to 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.

Also I had to tweak the command a bit using https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/cli/. It turns out the tool should upload both the JS and the corresponding maps for it to work correctly, and that by not specifying the extension, the tool will by default process both extensions.

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