Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/master' into kw-version-major
Browse files Browse the repository at this point in the history
  • Loading branch information
@krystofwoldrich
krystofwoldrich committed Nov 30, 2023
2 parents 7cd8213 + 3d130a4 commit 9d05f98
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 113 deletions.
183 changes: 70 additions & 113 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,35 +7,25 @@ This is demo repo is used by Solution Engineers when demo'ing Sentry's [React Na

## Versions

The values specified in package.json may be more up to date.
Not all of these have to be used in order to build the app (e.g. Android Virtual Device API) but if you're having problems building, then follow these.
| dependency | version
| ------------- |:-------------:|
| react-native | 0.64.0 |
| gradle | 6.7 |
| react | 16.13.1 |
| sentry/react-native | 2.4.0 |
| npx | 7.8.0 |
| cocoapods | +1.10.1 |
| react-native | 0.72.4 |
| gradle | 8.0.1 |
| react | 18.2.0 |
| sentry/react-native | ^5.9.1 |
| npx | 7.8.0? |
| node | 20.5.0 |
| npm | 9.8.0 |
| java | 17.0.8 |
| ruby | 3.2.2 |
| AndroidStudio | Bumblebee 2021.1.1 Patch 2 |
| Android Virtual Device | Pixel_6_API_30 |

## Setup (Bootstrap)

[INSTALL.md](./Install.md) was written by the CreateReactNativeApp maintainers and outlines some things you'll need.

This step was already performed for adding the sdk to sentry_react_native, but it's good to know it was used as customers will use it:
```
$npx @sentry/wizard -i reactNative -p ios android
```
The above command launches the [Sentry wizard](https://github.com/getsentry/sentry-wizard) allowing you to [link](https://docs.sentry.io/platforms/react-native/#linking) with the correct Sentry react-native project.
From our [documentation](https://docs.sentry.io/platforms/react-native/), the following changes happen which you should be aware of:
```
- add the sentry-android package for native crash reporting on Android
- add the sentry-cocoa package for native crash reporting on iOS
- enable the Sentry Gradle build step for Android
- patch MainApplication.java for Android
- configure Sentry for the supplied DSN in your index.js/App.js files
- store build credentials in ios/sentry.properties and android/sentry.properties.
```

## Setup
See 'Versions' table above for some dependencies you'll need. Recommend using [sdkman](sdkman.io) for easily installing the right Java version. And [rbenv](http://rbenv.org/) or [rvm](https://rvm.io/) to install the right Ruby version.

1. git clone [email protected]:sentry-demos/sentry_react_native.git
2. Add your DSN and BACKEND_URL for back-end to src/config.ts
Expand All @@ -46,117 +36,75 @@ From our [documentation](https://docs.sentry.io/platforms/react-native/), the fo
7. `cd ios && pod install`
8. Optional - Create a .env file in project root and add `SE=<value>`

Don't forget to bump your release version depending on platform
iOS: `Info.plist` `CFBundleShortVersionString`
android: `app.build.gradle` `versionName`

## Run
## Run Android
These steps were last tested on Sept 6th, 2023:

1. Android (optional) start the emulator by AVD Manager or:
1.
```
// emulator executable is at /Users/<user>/Library/Android/sdk/emulator
emulator -list-avds
emulator @<YourEmulator> -dns-server 8.8.8.8
emulator @Pixel_3_API_30_x86_64 -dns-server 8.8.8.8
```

2. Run Ios or Android app
* _iOS version_:
// this tends to give errors once you run the app. avoid this.
cd android
npm run android // this command executes `react-native run-android` and does hot-reload
```
# opens the Metro debugger, has hot reload
npx react-native run-ios --configuration Debug
If step 1 is failing, try building a release and running that in the emulator:

## builds a Release (takes longer)
npx react-native run-ios --configuration Release
npx react-native run-ios --simulator="iPhone 11"
```
* _Android version_:
2.
```
npx react-native run-android --variant Release
// Creates the apk of the app in /android/app/build/outputs/apk/release/app-release.apk
cd android
./gradlew assembleRelease // add '--scan' will collect logs and tasks that happen during this
```
^ this command builds APK for the arch and installs to the emulator.
^ click 'OK' if you get a pop-up, and it should open Metro

3.
```
// runs the apk you created in steps1,2
emulator -avd Pixel_6_API_34 -netdelay none -netspeed full -dns-server 8.8.8.8

## Expected Behavior

EmpowerPlant | Checkout
:-------------------------:|:-------------------------:
![list of tools](./img/toolstore.png) | ![checkout cart](./img/cart.png)|

## Upgrade SDK path
1. npm install, then `cd ios && pod update` if `pod install` is failing. The pod updating depends on node_modules/@sentry/react-native being set.
2. Review previous PR so you know what to expect.

## Troubleshooting

#### Repo
This repo borrowed from [original react-native repo ]( https://github.com/sentry-demos/react-native/commit/269f58d63426065a4de67a3f22d2e774787cd996)
The following may have been borrowed: `package.json`, `package-lock.json`, `ios/Podfile`, `ios/Podfile.lock`, see [pull/2](https://github.com/sentry-demos/sentry_react_native/pull/2)

Please know that react-native generates it own [.gitignore file](https://stackoverflow.com/questions/49099131/recommended-gitignore-for-react-native/49099219
), which is of course part of this repo, so only those [autogenerated files](https://stackoverflow.com/questions/48448426/why-dont-we-gitignore-ios-and-android-in-react-native ) that are required for a baseline setup and the original demo code (files) are part of this repo.

Please see [Steps](#what-were-the-steps-again) or go through the [first ten commits](https://github.com/sentry-demos/sentry_react_native/commits/master) (and their git log) messages in chronological order, to see the exact commands that were run and what files that were autogenerated.

#### What were the steps again
This is just the background steps to answer "How did we get here ?" . Below is not needed/related to the demoing this app.
// optional, do this if you think you're not getting the updated app on your emulator
./gradlew installRelease // Installs release build of the app to the currently connected Android device/emulator
```
// generates boilerplate code
npx react-native init sentry_react_native
cd sentry_react_native
cd ios
// Edit Podfile to remove/comment out flipper install as suggested in the comments of the file itself
pod install
// add Sentry SDKs
npm install --save @sentry/react-native
npx @sentry/wizard -i reactNative -p ios android (and select you Sentry react native project )
cd ios
pod install

optional
```
Gradle commands allow you to gradually control what you want to do, like avoiding rebuilding the app if you changed your emulator.
cd android
./gradlew installDebug // Installs debug build of the app to the currently connected Android device/emulator
./gradlew installRelease // Installs release build of the app to the currently connected Android device/emulator
#### adding Sentry for first time
When running npx @sentry/wizard -i reactNative -p ios android
At this point, you may get an error like:
`TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined`
It should be safe to look past this error. A minor issue is that it blocks creation of `ios/sentry.properties`. So simply make a copy of `android/sentry.properties` and put it in `ios/sentry.properties`:
```
cp android/sentry.properties ios/sentry.properties
cd ios
pod install

Old Steps from before Sept 6th, 2023:
```
Android (optional) start the emulator by AVD Manager or:
If all else fails and you seem to be getting a weird error related to IllegalAccessErrors or anything else you may need to rebuild your Android and iOS folders using the following (just make sure to grab the sentry.properties files, build.gradle files, and pod files from Github afterwards):
// emulator executable is at /Users/<user>/Library/Android/sdk/emulator
emulator -list-avds
emulator @<YourEmulator> -dns-server 8.8.8.8
emulator @Pixel_3_API_30_x86_64 -dns-server 8.8.8.8
```
sudo rm -rf android/ ios/
yarn add react-native-eject
npx react-native eject
// This builds the APK for the arch and installs to the emulator.
npx react-native run-android --variant Release
```

#### Emulators
When running emulator...
If the app launches and suddenly crashes you may need to reinstall your node package with this command:
## Run iOS

```
rm -rf node_modules
npm install
npm run ios -- --mode=Release
```

Emulator needs Internet access enabled on your Android emulator. Use AVD Manager or:

#### Running
You may run into issues if you haven't added sdk and sdk platform-tools to path:
`export ANDROID_SDK_ROOT=/Users/<user>/Library/Android/sdk`
`export PATH=/Users/<user>/Library/Android/sdk/platform-tools:$PATH`

"error: Can't find the 'node' binary to build the React Native bundle." should be okay
These steps were last tested before Sept 6th, 2023:
Deprecation warning on using npx?
```
# opens the Metro debugger, has hot reload
npx react-native run-ios --configuration Debug
If tools don't load, then swipe-away (kill) the app, then relaunch from app menu in the emulator. If still fails, then go to AVD Manager and 'wipe' the device and run the emulator again.
Could also be a problem with the backend container/app you're requesting the tools from (check that URL/Postman, check TDA job)
## builds a Release (takes longer)
npx react-native run-ios --configuration Release
npx react-native run-ios --simulator="iPhone 11"
```

When developing locally, must point React Native to http://127.0.0.1:8080/products backend instead of https://localhost:8080/products backend.
## SDK Upgrade Path
1. `rm -rf node_modules && npm install`. For iOS, run `pod install --repo-update`. For Android, it should pull in latest dependenices automatically as you start building again.
2. If you're getting build errors, you may need to upgrade all your Node, npm, Java, VirtualDevices. This is due to either the previously merged PR relying on them, or the next SDK and RN versions you're upgrading to require them, or both.

# How To Create a Release

Expand Down Expand Up @@ -248,6 +196,14 @@ Note: do not proceed with this until you have done all the previous steps.

Your new release should be [visible on Github](https://github.com/sentry-demos/sentry_react_native/releases).

### Updating the version of the Demo App itself
Don't forget to bump your release version depending on platform.
iOS: `Info.plist` `CFBundleShortVersionString`
android: `app.build.gradle` `versionName`

## Troubleshooting
[Troubleshooting.md](./troubleshooting.md)

### [Troubleshooting - Locally undoing an accidental increment of the release version]

If you accidentally tick the version forward by running `npm version patch`, and did not intend to do so, you can undo this.
Expand All @@ -260,4 +216,5 @@ Let's say we were previously on `2.0.1` and accidentally ran the command twice,
![Screen Shot 2021-12-08 at 12 55 09 PM](https://user-images.githubusercontent.com/12092849/145283369-2130cae7-fe0c-42ff-b826-0015c3cd565b.png)

- run `git reset <the commit hash>`.
- Check out any unwanted files that are no longer staged for commit.
- Check out any unwanted files that are no longer staged for commit.

2 changes: 2 additions & 0 deletions android/app/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ sentry {
// Default is disabled.
includeNativeSources = true

includeSourceContext = true

// `@sentry/react-native` ships with compatible `sentry-android`
// This option would install the latest version that ships with the SDK or SAGP (Sentry Android Gradle Plugin)
// which might be incompatible with the React Native SDK
Expand Down
Binary file removed img/cart.png
View file
Binary file not shown.
Binary file removed img/toolstore.png
View file
Binary file not shown.
138 changes: 138 additions & 0 deletions troubleshooting.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
## Bootstrapping a new React Native App
Only do this if you're having trouble upgrading the Sentry SDK or existing RN version. Sometimes it's more efficient to bootstrap a new app from scratch, but you'll have a ton of app source code to port over. Consider that state management could work differently in a newer version of RN.

[INSTALL.md](./Install.md) was written by the CreateReactNativeApp maintainers and outlines some things you'll need.

This step was already performed for adding the sdk to sentry_react_native, but it's good to know it was used as customers will use it:
```
$npx @sentry/wizard -i reactNative -p ios android
```
The above command launches the [Sentry wizard](https://github.com/getsentry/sentry-wizard) allowing you to [link](https://docs.sentry.io/platforms/react-native/#linking) with the correct Sentry react-native project.
From our [documentation](https://docs.sentry.io/platforms/react-native/), the following changes happen which you should be aware of:
```
- add the sentry-android package for native crash reporting on Android
- add the sentry-cocoa package for native crash reporting on iOS
- enable the Sentry Gradle build step for Android
- patch MainApplication.java for Android
- configure Sentry for the supplied DSN in your index.js/App.js files
- store build credentials in ios/sentry.properties and android/sentry.properties.
```

#### Repo
This repo borrowed from [original react-native repo ]( https://github.com/sentry-demos/react-native/commit/269f58d63426065a4de67a3f22d2e774787cd996)
The following may have been borrowed: `package.json`, `package-lock.json`, `ios/Podfile`, `ios/Podfile.lock`, see [pull/2](https://github.com/sentry-demos/sentry_react_native/pull/2)

Please know that react-native generates it own [.gitignore file](https://stackoverflow.com/questions/49099131/recommended-gitignore-for-react-native/49099219
), which is of course part of this repo, so only those [autogenerated files](https://stackoverflow.com/questions/48448426/why-dont-we-gitignore-ios-and-android-in-react-native ) that are required for a baseline setup and the original demo code (files) are part of this repo.

Please see [Steps](#what-were-the-steps-again) or go through the [first ten commits](https://github.com/sentry-demos/sentry_react_native/commits/master) (and their git log) messages in chronological order, to see the exact commands that were run and what files that were autogenerated.

#### What were the steps again
This is just the background steps to answer "How did we get here ?" . Below is not needed/related to the demoing this app.
```
// generates boilerplate code
npx react-native init sentry_react_native
cd sentry_react_native
cd ios
// Edit Podfile to remove/comment out flipper install as suggested in the comments of the file itself
pod install
// add Sentry SDKs
npm install --save @sentry/react-native
npx @sentry/wizard -i reactNative -p ios android (and select you Sentry react native project )
cd ios
pod install
```

#### adding Sentry for first time
When running npx @sentry/wizard -i reactNative -p ios android
At this point, you may get an error like:
`TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined`
It should be safe to look past this error. A minor issue is that it blocks creation of `ios/sentry.properties`. So simply make a copy of `android/sentry.properties` and put it in `ios/sentry.properties`:
```
cp andoid/sentry.properties ios/sentry.properties
cd ios
pod install
```

If all else fails and you seem to be getting a weird error related to IllegalAccessErrors or anything else you may need to rebuild your Android and iOS folders using the following (just make sure to grab the sentry.properties files, build.gradle files, and pod files from Github afterwards):

```
sudo rm -rf android/ ios/
yarn add react-native-eject
npx react-native eject
```

#### Emulators
When running emulator...
If the app launches and suddenly crashes you may need to reinstall your node package with this command:

```
rm -rf node_modules
npm install
```

Emulator needs Internet access enabled on your Android emulator. Use AVD Manager or:

#### Running
You may run into issues if you haven't added sdk and sdk platform-tools to path:
`export ANDROID_SDK_ROOT=/Users/<user>/Library/Android/sdk`
`export PATH=/Users/<user>/Library/Android/sdk/platform-tools:$PATH`

"error: Can't find the 'node' binary to build the React Native bundle." should be okay

If tools don't load, then swipe-away (kill) the app, then relaunch from app menu in the emulator. If still fails, then go to AVD Manager and 'wipe' the device and run the emulator again.
Could also be a problem with the backend container/app you're requesting the tools from (check that URL/Postman, check TDA job)

When developing locally, must point React Native to http://127.0.0.1:8080/products backend instead of https://localhost:8080/products backend.




## Other
update to java 17 or 20
```
sdk man curl -s "https://get.sdkman.io" | bash
sdk install java 17.0.8-zulu
```

upgrade android emulator


```
adb kill-server
adb start-server
```

uninstall the app from the emulator, if you're not sure it's getting refreshed.

TODO?
RN demo: rub 3.2.2 for RN iOS
root folder > bundle install > setups cocopods for ruby
pod install [or pod update first]


how do you NOT have to uninstall the app from the virtualdevice, and have to re-build, then installRelease. is there a more streamlined way to do it, that does not involve `npm run android` which has known issues?


TODO: put this in TDA's repo?
```
ngrok http file:///Users/wcap/thinkocapo/sentry_react_native/android/app/build/outputs/apk/release
//or do this if you served the file first via `python3 -m http.server` in the directory with the APK
ngrok http <PORT>
// Appium JSON config....+TDA?
https://1cd3-178-73-4-138.ngrok.io + app-release.apk
https://1cd3-178-73-4-138.ngrok.io/app-release.apk
```

```
//TDA
cd empower/tda
source env_new/bin/activate
py.test -s -n 4 mobile_native/android_react_native/test_checkout_react_native_android.py
// update the url in...empower/tda/conftest.py > android_react_native_emu_driver, with ngrok URL
```

now go check sentry for.... se:will?

0 comments on commit 9d05f98

Please sign in to comment.