Ionic React using Sentry Sourcemaps

Dear diary…

I watched this talk by Mike Hartington and Neil Manvar on Real time application monitoring for Ionic Apps with Sentry

I’m using the same Make file as per Mike’s git repo which is an app that deliberately throws errors.

When I execute the file, I can see that the Sourcemaps are being created, uploaded and linked to my releases but I’m not getting the stack traces on the errors.

I cloned the Sentry-React-Ionic project and committed it to my own repo, then also set it up on my Sentry account to see if I get the same results as I am getting with my project.

The results: Neither project gives stack traces when running it locally with “ionic serve” but when deployed to the device, the Sentry-React-Ionic app links it’s Sourcemaps correctly but mine, as mentioned, are not.

Sentry-React-Ionic App error

with the stack trace.

My error message
The first difference that I noticed is that my error is referencing a chunk, and not the tsx file.

with the stack trace, which is useful, but not all that useful.

So, finally, the question. As both projects’ Sourcemaps are generated and uploaded in the same way but yielding different results, where else should I be looking to troubleshoot this?

Are you uploading sourcemaps to sentry on release?

I can’t speak to Mike’s demo but I’ve had to do something like this in the past:

export SENTRY_PROJECT=sentry-project-id
PACKAGE_VERSION=$(cat package.json \
  | grep version \
  | head -1 \
  | awk -F: '{ print $2 }' \
  | sed 's/[",]//g')

sentry-cli releases --org sentry-org files $PACKAGE_VERSION upload-sourcemaps --no-rewrite ./build/static/js/ --url-prefix "~/static/js"

So, my process is to create a build using ionic build, commit the code and then run the release.

VERSION=`sentry-cli releases propose-version`

setup_release: config build create_release associate_commits

	sentry-cli releases -o $(SENTRY_ORG) new -p $(SENTRY_PROJECT) $(VERSION)

	sentry-cli releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) set-commits --local $(VERSION)

	sentry-cli releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) files \
		$(VERSION) upload-sourcemaps --url-prefix="~/static/js/" --rewrite --validate $(SOURCEMAP_LOCATION)

	sed -i s/^react_app_sentry_release=.*/react_app_sentry_release=${VERSION}/ .env

# Deploy targets
	npm run build

deploy: setup_release
		make upload_sourcemaps

This file is straight from Mike’s demo.
The differences I can see is that this file is using sentry-cli releases propose-version to create the version whereas it seems that you’re creating a version from what’s specified in your package.json file, and the other is that you specified --no-rewrite instead of --rewrite in my case.

I tried releasing my code with the --no-rewrite but it didn’t have any effect.

I’ve included the output from running the file, below.

λ make deploy                                                                                                                                     
sed -i s/^react_app_sentry_release=.*/react_app_sentry_release=`sentry-cli releases propose-version`/ .env                                        
sentry-cli releases -o insight-consulting new -p engage `sentry-cli releases propose-version`Created release d12345dade15d6b69d92e1e859a4de1fdc6e1234.                                                                                                                                              
sentry-cli releases -o insight-consulting -p engage set-commits --local `sentry-cli releases propose-version`                                     
Could not find the previous commit. Creating a release with 20 commits.                                                                           
Success! Set commits for release d12345dade15d6b69d92e1e859a4de1fdc6e1234.                                                                        
make upload_sourcemaps                                                                                                                            
make[1]: Entering directory '/cygdrive/c/Work/Mobile/App-Name'                                                                               
sentry-cli releases -o company-name -p app-name files \                                                                                       
        `sentry-cli releases propose-version` upload-sourcemaps --url-prefix="~/static/js/" --no-rewrite --validate build/static/js               
> Found 200 release files                                                                                                                         
> Analyzing 200 sources                                                                                                                           
> Adding source map references                                                                                                                    
> Validating sources                                                                        0> Bundled 200 files for upload                       
> Uploaded release files to Sentry                                                          0> File upload complete                               
Source Map Upload Report                                                                                                                          
  Minified Scripts                                                                                                                                
    ~/static/js/0.6ebe04ee.chunk.js (sourcemap at                                                                        
    ~/static/js/1.4126f806.chunk.js (sourcemap at
   list of all the generated files...

Ah, unfortunately I can’t be of much help here but will direct some Sentry folks this way and see if anything stands out to them!

Yeah, the source maps bit can be tricky here.

Basically we want to make sure that the path are correct and that the lookup is correct. If you’re testing on Android, one change you can make is the path regex.

I just pushed a small update and gave it a test.

Seems to be working correctly. The repo should be updated with the correct code.

How bashful.

TL;DR I was uploading my current source maps with the previous release identifier because I don’t know bash.

So after 3 days of reading, coding, committing and fighting with myself it turns out the problem was in the Makefile.

Because my .env file contained a couple of variables already, I had to change the script to use sed to replace the release identifier instead of echo which replaces all the content in the file.

I replaced this…

@echo "react_app_sentry_release=${VERSION}" > .env

with this…

sed -i s/^react_app_sentry_release=.*/react_app_sentry_release=${VERSION}/ .env

It seems that the script doesn’t wait for the sed command to finish replacing the old release number with the new number before continuing with the script, hence it would upload my current set of Sourcemaps with the previously generated release identifier.

Totes my bad…

I have now separated this into two steps, first, generate the release, and then upload the source maps.

And now… Thadaaaahh!

Thanks for all the help fellas, I really appreciate it, sorry to have wasted a bit of your time.

1 Like

Juuust one thing to note here.

The order of events is super duper uber important.

As mentioned in one of my replies above.

So, my process is to create a build using ionic build, commit the code and then run the release.

Which is where the problem is hidden. I do the build, then I create the release, this means the previous release version is already included in the source files.

If you create your build before you create your release VERSION, then your errors will be sent to Sentry with the “previous” release VERSION, as that version is baked into your source files before creating a new release VERSION.

In the MakeFile that I used, there is a call to build, after the VERSION is created, but this build step is skipped because the build is up-to-date.