React Native + typescript => no source

1

Hello
I am trying to get the source code appears in Sentry. I understand it is related to source maps.

I can see the exact place (tsx filename plus correct line number in this tsx - which is some kind of weird? Does that mean that sourcemap is working?) where is the error but not the source code:

Screen Shot 2020-02-11 at 3.38.03 pm
Screen Shot 2020-02-11 at 3.38.03 pm1634×1174 92.5 KB

The sentry typescript doc mentions to add some code at the really first file (index.js file) but the code is typescript so it does not work as it is an index.js. I also have to add some code in the init but

integrations: [
new RewriteFrames({
root: global.rootdir,
}),
],

has some typescript error about rootdir no existing.

Is there any working react-native typescript sentry project example anywhere?

2

I succeeded to upload files in the release Artifacts.

But still no luck with the source code been displayed.

I am guessing I must not be uploading correct files/file formats.

Do you have any demo of an already set up React Native + typescript project with Sentry?

Some info:

  • React Native 0.59.9
  • Typescript
  • one unique index.js as per React Native standard (no index.ios.js)
  • Using cocoapods
  • Added --allow-fetch => this generated wrong souce map that said index.ios.js could not be found (inside the index.ios.map file, when I download the file from the release Artifacts)
  • my project works well on bugsnap (I had to upload manually the sourcemap though - which I also tried on Sentry but could not find out how - sometimes that upload all folder files…)

I definitely confirm that I need to do nothing on a fresh RN project, Sentry works well and displays the source code without even editing xcode config - and it works with the index.js

But somehow, with Typescript, then it is a real challenge.

3

I have the same issue than mentioned here: https://github.com/getsentry/sentry-cli/issues/632

Same error message except my sentry cli is the last one (sentry-cli/1.51.0)

4

I am still pursuing further investigation - maybe someone can help?

I tried to integrate Sentry with Ignite (https://github.com/infinitered/ignite) which is also using typescript.

Good thing, is that I have the exact same errors:

  1. installed fresh Ignite with typescript, installed sentry for react native. No stacktrace, only the error line in the correct file. Same as originally mentioned.
  2. added --fetch-allow to the xcode build step: Bundle React native code and images
    Then I obtained the same index.ios error mentioned previously.

So basically:

  1. Sentry does not work by default with React Native + typescript with just following the instructions when creating a new project
  2. –fetch-allow is not able to upload a working sourcemap when there are typescript

I am guessing at this point when we have a React Native + typescript project, we need to manually build and upload the sourcemaps (it won’t be done by default xcode setup or tweaking the xcode build command). So now I just need to find out the correct source map build commands.

My current tips to build sourcemaps for RN+typescript with sentry-cli (I’ll indicate the entire steps to install/build/run RN+typescript+Sentry when I find everything out):
a) sentry-cli login helps you get rid the auth error message
b) export SENTRY_PROJECT = project_name
c) --org organisation_name param must be right after the releases parameter (the parameter sin sentry-cli are contextual so their position are very important - it is obvious now for me but it was not at the beginning)

5

This is how I try to build the sourcemaps:

react-native bundle --dev false --platform ios --entry-file index.js --bundle-output main.jsbundle --sourcemap-output main.jsbundle.map

sentry-cli releases --project nios --org ORG_NAME files RELEASE_NAME upload-sourcemaps --dist 47000 --strip-common-prefix --rewrite --validate ./main.*

I also tried to check the debug info but I can’t see anything that seems weird:

sentry-cli releases --project nios --org ORG_NAME files RELEASE_NAME upload-sourcemaps --dist 47000 --strip-common-prefix --rewrite --validate --verbose --log-level debug ./main.*

I still see the missing source code in Sentry report:
Source code was not found
Url app:///HomeScreen.tsx

This file is supposed to be at:
/MY_RN_PROJECT_ROOT/App/Containers/HomeScreen/HomeScreen.tsx
which apparently is found by the source validator when using --validate --log-level=debug

I must be missing something…

PS: is that normal that my metro terminal displays the same error than Sentry:
::1 - - [27/Feb/2020:06:03:27 +0000] “GET /HomeScreen.tsx HTTP/1.1” 404 153 “-” “APP_NAME/47000 CFNetwork/901.1 Darwin/19.3.0”

I noticed a 404 here.