Sourcemap support with Raygun

[maks]

I'm currently using Raygun with our apps Flutter web build and it works very well, thank you! 👍🏻

BUT Flutter web release builds produce minified JS which currently gives not very useful stack traces in Raygun for the Flutter web app.

Raygun's documentation outlines support for sourcemaps so I was hoping to use it with Flutter web as currently Flutter is perfectly able to produce a sourcemap. Because we don't want to make our sourcemap publicly available I attempted to upload the sourcemap to Raygun per the documentation but it seems to have no affect on the stack traces shown in Raygun.

According to the Raygun sourcemap docs, they want you to upload the un-minified JS file as well as the sourcemap file, but this doesn't exist for Flutter as the sourcemap maps to Dart sources not JS.

Would you have any advice on how this can work with Raygun and raygun4flutter?

[miquelbeltran]

Hi @maks

At the moment, there's no support for sourcemaps on the Raygun site for traffic coming from the raygun4flutter.

We are going to research for a possible solution to this, which will probably need some changes both in the Flutter package and the server side.

Meanwhile, it would help us a lot if you could provide the exact command you use to compile your Flutter Web application, compilation logs and your flutter doctor -v output, so that we don't miss any important detail.

Thank you!

[maks]

Thanks for the quick reply @miquelbeltran !

I'm just using fairly standard build command for our web app:

flutter build web --dart-define=SOME_MODE=true --source-maps -t lib/main_webapp.dart

(some things redacted out).

and doctor output:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on Ubuntu 22.04 LTS 5.15.0-41-generic, locale en_AU.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.69.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

Please let me know if I can help with any other information or testing.

[JaredEzz]

Also looking for this. May need to switch to sentry

[sumitramanga]

Hi @JaredEzz I'll chat with the team to see what we can do here in terms of priority. Thank you for your patience!

[miquelbeltran]

The latest release 3.1.0 adds support for reporting column numbers, as well the website has been updated to support source map processing.

You can find information regarding generating and uploading source maps in the README.md in the section "Flutter web source maps": https://github.com/MindscapeHQ/raygun4flutter/tree/develop?tab=readme-ov-file#flutter-web-source-maps

Thanks for your patience, let us know if you have any more questions!

[JaredEzz]

The documentation on this is not entirely complete. For example, the "Finding a source maps URI section" that is reference on the docs here https://raygun.com/documentation/language-guides/javascript/crash-reporting/source-maps/ is not filled out or linkable.

I'd really like to get this integrated into our CI/CD pipeline. Sentry has a cli tool that really makes this easy.

[sumitramanga]

Hi @JaredEzz, my apologies that the link is missing. I'm double-checking with my colleague to see where the section is. I'll keep you posted

[TheRealAgentK]

I'd really like to get this integrated into our CI/CD pipeline. Sentry has a cli tool that really makes this easy.

@JaredEzz With "this" - are you referring to actually automating the uploading of the source map into RG?

You should be able to do that already via the API just using a curl call. Also - for Android Studio (and native Android apps, not specifically Flutter - so there'd be differences), we do have a Gradle task - that could probably be leveraged as well, depending on your circumstances.

What would your preferred solution for dealing with source maps look like?

[sumitramanga]

Hi all @JaredEzz @TheRealAgentK

We've just put up a fix to our documentation to include the missing section. You can find it here - https://raygun.com/documentation/language-guides/javascript/crash-reporting/source-maps/#understanding-and-finding-the-url-for-sourcemap-uploads

@JaredEzz Please do consider @TheRealAgentK response too :)

Thank you for your patience, Sumitra

[JaredEzz]

Unfortunately, I will not be moving forward with Raygun for this. I'm running into too many issues, and I don't believe Raygun's js map solution is mature enough for Flutter Web dart to js minified files.

1. @TheRealAgentK yes, I understand I can use curl to upload the files; however, the uri parameter in the API request is unclear. I attempted to lookup cr.source-maps:write on the api docs here, but there's no additional information. I attempted to do the upload manually, but still, the instructions for the URL input are completely unclear.

   After uploading a source map it is important to add the correct URL in the URL field for the source map, if this is not set correctly then Raygun will fail to use your source map when attempting to desymbolicate a stack trace

Why should I need to provide a url to the file when I've directly uploaded it? And even if I were to get this to work, does the URL parameter in the UI correspond to the uri parameter in the curl request? Unclear. With my various attempts, I continue to get the following error on my issues. Unable to determine a suitable SourceMap file for the following minified files. Please ensure your minified files include a "//# sourceMappingURL=..." comment on a separate line at the end of the file. Alternatively, the SourceMap file can be specified in a "SourceMap" HTTP header alongside the minified file. Even though my file clearly includes this at the end

2. What are all the files that need to be included? Sentry's implementation with their CLI tool uploads all of the following, and takes care of flattening out indexed source maps, locating local file references, and validating. (see their docs)

It would be possible to upload all of these files via the API in our CI/CD scripts, but without the relevant information or knowing if Raygun can adequately ingest them, it's not currently worth the work. I also fed the source map files into Raygun's source map validator, only to be told they are invalid (though Sentry ingests them just fine, and they work great there).

I understand that my lack of knowledge of source maps contributes to the difficulty I'm experiencing but seeing as I had no trouble setting it up with Sentry's tooling and documentation, I was disappointed at the difficulty and lack of clarity around Raygun's solution. As my team is an existing Raygun customer, and we have alerting integrations all set up, I was hoping to be able to move forward here.

[JaredEzz]

What would your preferred solution for dealing with source maps look like?

I failed to answer this in my previous response. A preferred solution would be a flutter package similar to https://pub.dev/packages/sentry_dart_plugin

I include the following steps in my Github Actions build pipeline. Note that directly after the flutter build web command, I run the sentry_dart_plugin and it handles uploading the source maps via the cli (see also https://github.com/getsentry/sentry-dart-plugin)

jobs:
  ...
  flutter-deploy:
    ...
    name: Deploy Flutter Web App
    needs:
      - flutter-test
      - java-test
    runs-on: ubuntu-latest
      - name: Build Flutter Web application
        run: flutter build web --release --source-maps --csp --dart-define=ENV=dev --dart-define=RAYGUN_API_KEY=${{ secrets.RAYGUN_API_KEY }} --dart-define=FLUTTER_SENTRY_DSN=${{ vars.FLUTTER_SENTRY_DSN }}
      - name: Run Sentry Dart Plugin
        run: flutter packages pub run sentry_dart_plugin --sentry-define=auth_token=${{ secrets.SENTRY_AUTH_TOKEN }} --log-level=debug
        ...

[TheRealAgentK]

Hey @JaredEzz

Thanks so much for the detailed feedback, very, very appreciated!

We're taking this onboard and have started to talk about how to make this process easier. I understand that doesn't help you right now and I'm sorry for the hassle.

Please let me know if there's anything else we can do to help with your specific problem around getting the API call right, but I obviously understand that there's more to it than just that.

[TheRealAgentK]

@JaredEzz

Just to let you know - we've started work on a CLI tool to upload source maps from Flutter/Web.

You can find an early working version here: https://github.com/miquelbeltran/raygun-cli

It's not been published to pub.dev yet, so you'd have to grab it from that repo until that happens in the next few days.

Would love for you to try and get some early feedback from you!

[JaredEzz]

This is great to hear. I've moved onto another project at the moment but I will definitely look into this. One question I do have about the uri parameter that the CLI requires also - does that have to be a publicly hosted version of the source map? I'm not familiar with where that would be located

[miquelbeltran]

does that have to be a publicly hosted version of the source map?

The URI corresponds to where the Flutter web app is installed, e.g. https://localhost:44689/main.dart.js as it appears in the registered stack trace.

e.g.

at Object.Cf line 6971, column 18 (http://localhost:44689/main.dart.js:6971)
at a_s.$0 line 57311, column 47 (http://localhost:44689/main.dart.js:57311) 

I want to make it this as flexible as possible, e.g. also giving the possibility to pass in the base URI instead (so just https://localhost:44689/) and figure out the rest, but at the moment Raygun requires you to provide the full file URI.

[miquelbeltran]

FYI, the tool has been published on https://pub.dev/packages/raygun_cli, and we have moved the project to https://github.com/MindscapeHQ/raygun-toolbox