Source maps with create-react-app

SDKs
1

Hi,

Has anyone successfully got source maps to work with create-react-app? I tried manually uploading the /build folder but seems like it still doesn’t work. My javascript is getting loading at /build/static/...chunk.js and I’m using the --rewrite option and uploading the /build folder. Here is an example:

sentry-cli releases files $VERSION upload-sourcemaps --rewrite ./build/

map:

{"version":3,"file":"static/js/0.3d8b9742.chunk.js","sources":["../static/js/0.3d8b9742.chunk.js","components/hotjar.js"],"sourcesContent":["webpackJsonp([0],{\n\n/***/ 1791:\n/***/ (function(module, exports) {\n\n(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments);};h._hjSettings={hjid:1173955,hjsv:6};a=o.getElementsByTagName('head')[0];r=o.createElement('script');r.async=1;r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;a.appendChild(r);})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/0.3d8b9742.chunk.js","(function(h,o,t,j,a,r){\n    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};\n    h._hjSettings={hjid:id,hjsv:sv};\n    a=o.getElementsByTagName('head')[0];\n    r=o.createElement('script');r.async=1;\n    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;\n    a.appendChild(r);\n})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=')\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/hotjar.js"],"names":["webpackJsonp","1791","module","exports","h","o","t","j","a","r","hj","q","push","arguments","_hjSettings","hjid","hjsv","getElementsByTagName","createElement","async","src","appendChild","window","document"],"mappings":"AAAAA,cAAc,IAERC,KACA,SAAUC,EAAQC,ICHxB,SAAUC,EAAEC,EAAEC,EAAEC,EAAEC,EAAEC,GAChBL,EAAEM,GAAGN,EAAEM,IAAI,YAAYN,EAAEM,GAAGC,EAAEP,EAAEM,GAAGC,OAAOC,KAAKC,YAC/CT,EAAEU,aAAaC,KAAK,QAAQC,KAAK,GACjCR,EAAEH,EAAEY,qBAAqB,QAAQ,GACjCR,EAAEJ,EAAEa,cAAc,UAAUT,EAAEU,MAAM,EACpCV,EAAEW,IAEa,sCAFPhB,EAAEU,YAAYC,KAE+B,UAFxBX,EAAEU,YAAYE,KAC3CR,EAAEa,YAAYZ,IACfa,OAAOC"}

The file and sources seems suspicious. Shouldn’t

  1. They be the same
  2. be ./static/js/file and not ../static/js/file?

And my stuff is loaded from here:

https://my.app/static/js/0.3d8b9742.chunk.js

2

I worked this out with Sentry support the other day, you need to pass a url prefix for your JS files. Adding something like this to your sentry-cli command should do the trick: --url-prefix '~/static/js'

3

So is this the correct command?

sentry-cli releases files VERSION upload-sourcemaps '~/static/js' --rewrite --url-prefix '~/static/js'

4

Hello!

For me the following command worked: entry-cli releases files VERSION upload-sourcemaps --no-rewrite ./build/static/js/ --url-prefix "~/static/js"

Here is how I integrated Sentry releases with Create React App: https://medium.com/@vshab/create-react-app-and-sentry-cde1f15cbaa