Source maps for Production

[dearlordylord]

Migrated from: meteor/meteor#4384

[pandada8]

any updates on this? @zodern's solution seems not working with dynamic import

[teknologist]

@pandada8 second that ! I have a moreless working version but not 100% satisfied.

Would be awesome to have an official and mdg sanctioned method.

IMHO, this is crucial to maintaining good user experience/ software quality by monitoring everyday's use and bugs through sentry + logrocket.

Not having sourcemaps for production in sentry renders the whole thing super painfull.

[hridayeshgupta]

Is it in development or in testing in some other branch? so that we and people who need this feature can contribute to it?

[uiii]

Is this feature in process or not? This time is my first to really deploy the production app and I can't believe this isn't implemented yet, how could you work without that?

[s-devaney]

I can't think of another framework that doesn't have proper stack traces in production. This is fundamental...

[dearlordylord]

Meteor is about innovation, it's more than framework and better than anything been done before. It doesn't need production stack traces because they're boring.

[luiseduardobrito]

This is obviously not a priority for the Meteor team, that's a shame, we are migrating all Meteor apps to standalone Socket.io servers in my company. Not only because of this issue, but ES6 support for Safari and other 2 issues reported months ago and still without any official response. Meteor is clearly not ready for intense production usage and dependability.

Still a great framework for hobby projects though.

[merlinstardust]

Came here to see if this was an existing request after reading this article on secure source maps in production.

I know the article is using some kind of Express routing but I thought this might help inspire a solution for this

[benjamn]

That's an interesting article @merlinpatt! Thanks for making a substantive contribution to this issue thread.

To be perfectly frank with the rest of you, we have a long backlog, and this is still a wish-list feature compared to everything else we could be working on. Your priority-shaming is useless here, and will not be rewarded. Please take some time to read CONTRIBUTING.md (and maybe CODE_OF_CONDUCT.md while you're at it) before commenting again.

[simonbelanger]

hey guys, a lot have been said on this thread and I'd like to do a little wrap up. This feature has become super important to us (and imo should be for everyone with an app in production :) ) and I'd wish to keep this disucssion alive.

zodern:standard-minifier-js is a big step forward (kudos @zodern). To be honest I didn't have a look at the implementation but from a strictly functionnal point of view it does a great job.

The caching issue (http://stackoverflow.com/questions/9692665/cache-busting-via-params/20746756#20746756) doesn't look critical to me since it's always possible to adjust the CDN configuration to not ignore request parameters in the caching strategy (but is it? not a pro here, does every CDN expose this kind of configuration?). Plus, I guess it's not a meteor-specific issue.

The dynamic import issue might be a little trickier, the code being downloaded through the web socket and all... I'd really like to have a quick input from @benjamn on this one.

Another important point would be the question of which error tracking tool the app integrate with. Available tools have different ways for handling the source maps, but from what I understand it always comes down to the two same things :

• how the source maps are deployed in the CI process
• how the source maps are hosted/served

I'd be interested to hear personnal experiences on those 2 points.

I'm sorry, I'm not necessarly bringing anything new here, I'm just trying to get my head (and hopefully other's) around the subject...

[acomito]

@simonbelanger @benjamn expo has a concept of "post deploy" hooks, of which one is to compile and upload source maps to sentry. It would be cool if meteor had a similar post/pre deploy hook, or meteor run sourcemaps <sentryurl or something> -- something you could add into a npm script?

https://docs.expo.io/versions/latest/guides/using-sentry.html

https://blog.expo.io/introducing-support-for-postpublish-hooks-46ab3258fb03

I wonder if we can support somebody to build an open source package for this. I'm guessing there's enough people with production meteor apps who would be willing to throw in $100-$500 each for a proper solution.

[nicooprat]

I recently used Bugsnag on a non-Meteor project with this Webpack plugin: https://github.com/jmshal/webpack-bugsnag-plugin. Maybe some inspiration to find there...

[morloy]

Every bug reporting tool is pretty useless without sourcemaps. Right now the only solution is hexsprite:minify-js-sourcemaps. But it's not being updated regularly and breaks with the new 1.6.1 release 😢

[nicooprat]

Also found that NodeChef has an APM integration as an alternative (10$/month): https://www.nodechef.com/docs/node/meteor-apm

[HemalR]

Plus one to this. Also echo @acomito - would happily pay for this. Perhaps this needs a kickstarterish/patreon to achieve. Either way, happy to support this financially.

Errors like this are zero fun 😧

[acomito]

I'll throw $100usd in https://opencollective.com/ and I'm sure others would too (beyond @HemalR and myself).

[s-devaney]

I'd put $30usd in

[acomito]

@HemalR @s-devaney there may be others too. I know @stolinski uses meter a lot. Maybe we should move this to the meter forum? Or a separate issue thread?

[HemalR]

@acomito Yup I think moving it to the forums is a good idea. Do you want to do that (more than happy to put a thread up there if easier for you)...

[HemalR]

@stolinski - Took me a couple of minutes to recognise the name, but a huge fan of syntax.fm, thanks for the great work!

[zodern]

I released an updated version of zodern:standard-minifier-js yesterday which fixed using with Meteor 1.7.

[HemalR]

Cheers @zodern - Will experiment with that as well 👍

[acomito]

@HemalR did you ever get this setup for sentry?

[HemalR]

I've been freaked out about breaking something. That said, I only just updated to Meteor 1.7 - so will be able to test the latest update (the latest commit references that 1.7 should work now) and will have a crack at this in the next couple of weeks hopefully on a staging environment.

How have you gone over the past 5 days?

[morloy]

We‘re using source maps in production with Meteor 1.7, Sentry, and CloudFront on Ledgy. Thanks to @zodern for the work! Looking forward to having this merged into Meteor. Can help with setting up, if anyone has problems.

[HemalR]

@morloy Good to hear the vote of confidence.

FInally getting round to having a crack at this today - I'll post here on how I go.

Also - very recently read your article on two factor authentication which was phenomenal. Learnt a lot and I can see it being a blueprint for Meteor 2FA going forward. Thank you!

[acomito]

@HemalR would love to hear how it goes. Also curious what your workflow is for automating the building/uploading of the source maps (and maybe even incrementing versions).

[etyp]

@morloy that's great. We're working to do the same. How do you add the source maps to sentry in your build process?

[HemalR]

So I only got a couple of hours to put into this before I had to put out a fire.

Where I've done so far:

1. Set up sentry.io account and added the library to my project
2. Set up React Error Boundaries where relevant to the application, including hooking in any error data to Sentry
3. Tested it all out on local to ensure it is working as it should
4. Replaced the minifier as per https://github.com/zodern/minify-js-sourcemaps
5. Repeated the above steps for a staging environment and deployed (with the new minifier)

And... Kind of got stuck testing there. I feel that everything worked okay - but I do not know what the remote url of the generated source map is. What I will do today is see if I can just generate the sourcemap locally and upload it directly to Sentry.

@acomito - I haven't even thought about automating all of this yet! Just trying to get it to work - automated build scripts and the rest is very much unchartered territory for me (read: I am still a noob). More than willing to put in the research and work (and post back here) if anyone can provide guidance/reading links and point me to the right places to look?

@morloy Have you done any automation regarding this?

A pleasant aside - I found @zodern 's minifier to actually be faster than the default MDG one! Though, keeping in mind that sample size n = 1

[morloy]

We have this fully automated. Sentry provides a pretty useful tool that uploads all sourcemaps in a directory recursively. Our script roughly looks like this:

export SENTRY_AUTH_TOKEN=your_token
npm install @sentry/cli
./node_modules/.bin/sentry-cli releases -o ledgy-ag -p ledgy new ${COMMIT_ID}
./node_modules/.bin/sentry-cli releases -o ledgy-ag -p ledgy files ${COMMIT_ID} \
  upload-sourcemaps ${DIR}

[HemalR]

No luck so far.. What hasn't worked.

1. Their remote option:  - I guess with React Router it would not be possible to serve a source map in this way anyway
2. Trying to upload it via Sentry CLi:

• I ran meteor --production to generate the sourcemap on my local
• I used the Sentry docs' instructions (pretty much the same as the commands that @morloy put up) to upload the sourcemap generated in/pathToMyApp/.meteor/local/build/programs/web.browser/app and successfully uploaded the sourcemaps

However, the couple of errors picked up since have still shown just the minified code. A couple of other things:

• the -validate option when using the Sentry CLi throws a strange error: error: Found argument '-a' which wasn't expected, or isn't valid in this context - Weird because I don't have any -a argument. Uploading without the validate flag works fine, but leaves doubts about whether something went wrong when building the sourcemap.

---

Not entirely sure where to go from here 😕 If anyone has any tips/suggestions I would be most grateful. I do wish the Sentry console simply had an upload button for the sourcemaps...

[HemalR]

Bahh.. A few more hours and I still can't get this working. All the more frustrating when I get a Sentry notification;

TypeError
Unable to get property 'filter' of undefined or null reference

And the React Component file it is pointing to does not even use a filter method anywhere in it.

I feel like I've done 90% of it and am just missing an unknown piece to the whole puzzle. @morloy Knowing full well that I'm imposing on your time and that you've been really helpful already, are there any other pointers/gotchas you can think of? Or a noobie-proof list of how to upload a soucemap to Sentry (probably a manual option as it would likely be easier?).

[morloy]

Hm, not sure what exactly isn’t working in your setup. But be aware that you only get sourcemaps for your own code, not node_modules. Maybe your filter errors is simply in a node module.

To verify the upload, note that it’s --validate and not -validate. Maybe also try checking if the artifacts are available on Sentry.