Error logging with Sentry.io and Sourcemap

We tried to integrate sentry.io in our ionic3 app, anything is working fine expecting on production releases, the error logged to sentry is the production code and not mapped with our upploaded sourcemap.

We created our production build for android in this way:
ionic cordova build android --prod --release

Using app-scripts 3.0.0 the sourcemap should be under the new .sourcemaps folder, so we upload the files for release in this way:
sentry-cli releases -o blabla -p blabla files 0.0.10 upload-sourcemaps --url-prefix / .sourcemaps

We configure Raven like this:

Raven
    .config(
        'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        {
            release: '0.0.10',
            dataCallback: data => {

                if (data.culprit) {
                    data.culprit = data.culprit.substring(data.culprit.lastIndexOf('/'));
                }

                var stacktrace = data.stacktrace ||
                                    data.exception &&
                                    data.exception.values[0].stacktrace;

                if (stacktrace) {
                    stacktrace.frames.forEach(function (frame) {
                        frame.filename = frame.filename.substring(frame.filename.lastIndexOf('/'));
                    });
                }
            }
        }
    )
    .install();

But at the end we are always running on error notification without sourcemap, like this:

Can anyone help?

2 Likes

The following is working for me

  1. Make sure you run the latest version of sentry-cli.exe, worked for me with v 1.22.0
  2. Build locally to copy files to the /www/build dir. If running ionic Pro, make sure you build with the same parameters as pro ā€œionic buildā€ which is a dev build by default, or with --prod if you changed the default build in package.json
  3. Upload sourcemaps including the .js files using sentry-cli
    sentry-cli releases -o blabla -p blabla files 0.0.10 upload-sourcemaps --url-prefix / www/build note I uploaded from www/build instead of .sourcemaps
  4. Check that both .map & .js files are in release/artifacts in Sentry

The full minified view should reference files from the root, like /33.js (Looks correct in your case)
image

When sentry maps the source file you should have another button next to it, ā€œOriginalā€ which shows the mapped content

image

@kvd @mburger81
How did you manage to get the source map files while using --prod --release build? If running this, I can neither find any .sourcemaps folder nor any .map.js file within the www/build directory. The files in the www/build directory are the outdated versions from debug builds.

You need to build with -sm
ng build --prod -sm

Do I have to run this as separate build?

So doing this in one step with
ionic cordova build android --release --prod
is not possible? Are the sourcemaps really identical when build separately?

edit:
OK I just found that there IS a .sourcemaps folder created, seems I have overseen it before. However, it only contains the main.js.map, not the other sourcemaps like e.g. for vendor.js. Arenā€™t those also useful?

Ignore my last reply, itĀ“s for angular, sorry!

I run the ionic build using the app scripts.
npm run build --prod

This will execute the build script in package.json which in my case is

 "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },

Make sure you have app scripts installed under dev dependencies

 "devDependencies": {
    "@angular/cli": "^1.5.2",
    "@ionic/app-scripts": "3.0.1",
    "@types/node": "^8.0.47",
    "typescript": "~2.3.4"
  },

Not sure if this matters but check your tsconfig.json and make sure sourceMap is set to true

   ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"

Hope you get it working!

Arenā€™t you missing the --release flag and do you get all sourcemaps then or only for main.js?

edit:
So I got it working, at least for the main.js file taken from .sourcemaps directory. Still wondering about the others.

Sorry for my late answer I was out of order:slight_smile:
Thx first all for your response,

Iā€™m pretty sure Iā€™m doing the same thing but I donā€™t have an ā€œoriginalā€ view.

What Iā€™m missing on all this, let me explain, we do three bundles, one for browser one for android and one for ios. Always with --prod flag.

The js build should be always the same, so we donā€™t have to care about which sourcemaps and js files we upload.

But we donā€™t have sourcemap files on www/build folder if we do a ionic cordova build android --prod --release

@Rasioc you got it work, can you please share your configuration, do you have the same Raven.config then me? From where did you upload the sourcemap files?

I have been able to get the sentry source maps to work on app scripts 3.0.1 but they break when upgrading to 3.1.*

I got it work by adding these lines to the config of package.json and then following the same Raven config that you used above. There are a lot of source maps that are produced that start at 0.js.map and follow the numbers up all the way to 18.js.map. There is also a main.js and a main.js.map produced. Then I use the sentry cli to upload all those files to a release and then the errors are traced back to the original typescript file

    "ionic_source_map_type": "source-map",
    "ionic_generate_source_map": true,
    "ionic_move_source_maps": true

Here is the shell script that I use in my build workflow for creating a new release and uploading the source maps. You also need to add a responses.txt file to the same directory that follows the correct format. Then you can just run ./sentry.sh versionNumber.

responses.txt

n
SENTRY_API_TOKEN

sentry shell script

#!/bin/sh
VERSION="$1"
echo "Build Version $VERSION"

cat responses.txt | node_modules/sentry-cli-binary/sentry-cli login

node_modules/sentry-cli-binary/sentry-cli releases -o ORG_NAME -p PROJECT_NAME new $VERSION
node_modules/sentry-cli-binary/sentry-cli releases -o ORG_NAME -p PROJECT_NAME files $VERSION upload-sourcemaps --url-prefix / www/build

So I was able to do a next step to get the solution! But first of all

@cmcnally from documentation

"ionic_source_map_type": "source-map",
"ionic_generate_source_map": true,

is already the default setup and

"ionic_move_source_maps": true

seems to be not a valid configuration, or at least it is not documented! But at the end doing as you described there is a difference, in your case you have js and sourcemap files all under the same folder build/www and you can upload the files from same folder, but at the end I figured out this few things:

a) It seems it does not work updating or remove and upload new sourcefles, it seems old and new issues are ā€œmappedā€ only with the first uploaded files. So for example if we have js files in build/www and sourcemap files in .sourcemaps we can not do something like that

sentry-cli releases -o abc -p def files 0.0.17 upload-sourcemaps --url-prefix / .sourcemaps
sentry-cli releases -o abc -p df files 0.0.17 upload-sourcemaps --url-prefix / www/build/

In this case files would not be mapped automatically if sourcemaps

warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ....)`

but fortunately we can upload files from both folders with one command

sentry-cli releases -o abc -p def files 0.0.17 upload-sourcemaps --url-prefix / .sourcemaps www/build/

b) for the reason ā€˜refreshingā€™ seems to not working for every test we do we have to do it with a fresh release, something we did not until now, so we wasnā€™t able until now to find a solution because the map was not refreshed.

So at the end, if we do a fresh release with default configuration and Raven configuration as described above after running

ionic cordova build android --prod --release

and doing a simple

sentry-cli releases -o abc -p def files 0.0.17 upload-sourcemaps --url-prefix / .sourcemaps www/build/
sentry-cli releases -o abc -p def files 0.0.17 upload-sourcemaps --url-prefix / .sourcemaps www/build/

we finally have mapped on our issue the source

BUT there is still a little problem, in the screenshot the error line is let message ... but thatā€™s not the error with the line, the error is some lines below.

Edit: in our case the error line shown by sentry is a commented line, so it could not be the problem, but we moved our error simulation in the component at different position and the problem is always the same, the mentioned line is about 10 lines before the real error.

Does anyone know about this problem?

Donā€™t you now have the sourcemaps included in your device builds? So when I set the mentioned options, I have the sourcemaps within the APK in assets\www\build\ included which should really be avoidedā€¦

At the moment we do this command and it seems it is working well ionic 3.9.2

sentry-cli releases -o abc -p def files 0.0.0 upload-sourcemaps --url-prefix / .sourcemaps www/build

@mburger81 did you ever get this to work 100%? Iā€™m managing to upload my source files to sentry ok but when an error occurs the line of code reported in the crash report is not always the correct line - the error I am looking at today is about 10 lines out which is what you reported earlier in this thread?

@mburger81 it looks like adding the three lines that @cmcnally suggested in package.json worked for me - I just had a correct line mapping anyway! thanks both

Iā€™m also having a problem with these sourcemaps, and feel Iā€™m close to the solution

My stacktrace files start with app:///... instead of /... for some reason

image

I tried to upload the sourcemaps with --url-prefix app:/// or --url-prefix "app:///" but this adds maps as app:/main.js... instead of app:///main.js.... Somehow sentry-cli seems to strips two slashs (I also tried app://////, but still gives me app:/main.js..

Maybe the solution lies in not having app:/// before every source file ? but I donā€™t know where this comes from either.

Hi, I have done as mentioned above. But still no luck? Can you share your solution here? Thanks.

Sentry, it shows this error. Any clue? But I can see vendor and 5 sourcemaps under artifacts section.

5