Merge pull request #5 from thinkocapo/will-performance

Transactions Updates

Author: thinkocapo

README.md

@@ -1,156 +1,152 @@
-## Who am I
-
 This is demo repo is used by Solution Engineers when demo'ing Sentry's [React Native](https://docs.sentry.io/platforms/react-native) SDK's capabilties. 
 
-## Versions Summary:
+## Versions
 
 | 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 |
 
+## Setup (Bootstrap)
 
+[INSTALL.md](./Install.md) was written by the CreateReactNativeApp maintainers and outlines some things you'll need.
 
-
-
-
-
-
-This is demo repo is used by Solution Engineers when demo'ing Sentry's [React Native](https://docs.sentry.io/platforms/react-native) SDK's capabilties. 
-
-## Where do I begin 
-
-Please see [INSTALL.md](./Install.md) to get started with the setup.
-
-## What next
-* If you are ready to demo:
+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:
 ```
-$git clone <this repo>
-Edit App.js to add your Sentry's react-native's project's DSN key
 $npx @sentry/wizard -i reactNative -p ios android
 ```
-### Above will :
-* Launch the [Sentry wizard](https://github.com/getsentry/sentry-wizard) allowing you to link with the correct Sentry react-native project.
-* Create `ios/sentry.properties` and `android/sentry.properties`.
-### Gotcha: 
-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
-
-From my test runs I've noted that it is 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`
-
+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:
 ```
-cp andoid/sentry.properties ios/sentry.properties
-cd ios
-pod install
+- 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.
 ```
-### Before Launching the Demo apps:
-
-Be sure to export your auth token: `export SENTRY_AUTH_TOKEN=<token>`
 
-### Versioning
+## Setup
 
-Don't foget to bump your release version depending on platform:
+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
+3. `export SENTRY_AUTH_TOKEN=<token>`
+4. Setup a Android Virtual Device via AVD Manager.
+5. If you don't have cocopods or get an error about cocopods out of date, run `gem install cocopods`
+6. `cd ios && pod install`
+7. `npm install`
 
-iOS: `Info.plist` `CFBundleShortVersionString`
-android: `app.build.gradle` `versionName`
+Don't forget to bump your release version depending on platform  
+iOS: `Info.plist` `CFBundleShortVersionString`  
+android: `app.build.gradle` `versionName`  
 
-Make sure to have Internet access enabled on your Android emulator. If you can't access the browser you may need to launch your emulator with the below commands:
+## Run
 
+1. Android (optional) start the emulator by AVD Manager or:
 ```
+// emulator executable is at /Users/<user>/Library/Android/sdk/emulator
 emulator -list-avds
-
-emulator @{YourEmulator} -dns-server 8.8.8.8
+emulator @<YourEmulator> -dns-server 8.8.8.8
+emulator @Pixel_3_API_30_x86_64 -dns-server 8.8.8.8
 ```
 
-If you are experiencing issues with running the following launch command:
-
-If the app launches and suddenly crashes you may need to reinstall your node package with this command:
-
+2. Run Ios or Android app
+* _iOS  version_: 
 ```
-rm -rf node_modules
+# opens the Metro debugger, has hot reload
+npx react-native run-ios --configuration Debug 
 
-npm install
+## builds a Release (takes longer)
+npx react-native run-ios --configuration Release
+npx react-native run-ios --simulator="iPhone 11"
 ```
-
-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):
-
+* _Android version_: 
 ```
-sudo rm -rf android/ ios/
-
-yarn add react-native-eject
-
-npx react-native eject
+npx react-native run-android --variant Release
 ```
+^ 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
 
-### To Launch the Demo apps:
 
-* _iOS  version_: `npx react-native run-ios --configuration Release`
-* _Android version_: `npx react-native run-android --variant Release`
 
-### When Launching Android
-You may run into issues if you haven't added sdk and sdk platform-tools to path:
-`export ANDROID_SDK_ROOT=/Users/dustinbailey/Library/Android/sdk`
-`export PATH=/Users/dustinbailey/Library/Android/sdk/platform-tools:$PATH`
+## Expected Behavior
 
 Toolstore            |  Checkout
 :-------------------------:|:-------------------------:
 ![list of tools](./img/toolstore.png)  |  ![checkout cart](./img/cart.png)| 
 
+## Upgrade path
+1. npm install
+2. SDK Manager -> install 'emulator' or anything missing
+3. Review previous PR so you know what to expect 
 
-## Why so many files
+## Troubleshooting 
 
-Actually, its so not that many :-) . The size of this repo is approx. 1.3MB while the size of the [original react-native](https://github.com/sentry-demos/react-native) is approx 350MB. 
-
-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.
+#### 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. 
 
-So now we are at point, where one can simply clone, make a few edits and like DSN, project name, auth token and be up and running.
-
-## Where's the "original" code
-
-Adam worked on App.js which I took as-is from him. I also got from him the 2 image files in the assets dir (which are also present in [original react-native repo ]( https://github.com/sentry-demos/react-native)
-
-## What else 
-
-It appears to me that we wanted to start fresh to create this demo. And while this was a good learning excercise as we expand our demo offering, I would like to "learn/see" how far off was the [original react-native repo ]( https://github.com/sentry-demos/react-native/commit/269f58d63426065a4de67a3f22d2e774787cd996)
-
-Since the assets are taken from there, and that it has its own App.js, it makes me wonder that a part/whole of it should already be working. I will investigate that as time permits. 
-
-### Update
-
-So I took the major files from this working demo viz. `package.json`, `package-lock.json`, `ios/Podfile`, `ios/Podfile.lock`, because it is such files that make the deliverable self-contained, amongst other changes like DSN. When I put them on top of [original react-native repo ]( https://github.com/sentry-demos/react-native/commit/269f58d63426065a4de67a3f22d2e774787cd996) , I am get comile errors for both ios and android versions. 
-
-At this time, I propose, we use this very repo (sentry_react_native) as the new working demo for RN stuff and forget about making them work on TOP of [original react-native repo](https://github.com/sentry-demos/react-native) . That to me is now a hacker's or pure development exercise.
-
-## What were the steps again
+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.
 ```
-npx react-native init sentry_react_native (where sentry_react_native is the project name) This generates the boiler plate code for the RN app
+// generates boilerplate code
+npx react-native init sentry_react_native
 cd sentry_react_native
-git init (Turn folder into a git repo)
 cd ios
-Edit Podfile to remove/comment out flipper install as suggested in the comments of the file itself
+// 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
-``` 
-
-Throw in your changes
-```
-cd ..
-Make any code changes you need to such as App.js
 ```
 
-Throw in Sentry SDKs
+#### 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`:  
 ```
-npm install --save @sentry/react-native
-npx @sentry/wizard -i reactNative -p ios android (and select you Sentry react native project )
+cp andoid/sentry.properties ios/sentry.properties
 cd ios
 pod install
-cd ..
 ```
-Ran git commit along the way and finally pushed to this repo.
 
+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)

ios/Podfile.lock

@@ -406,10 +406,10 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 49cbe4b43e445b06bf29199b6ad2057649e4c8f5
-  FBReactNativeSpec: 41c5b05d2437481e7feafaa7773f1d9285a4b325
-  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  FBReactNativeSpec: f21132940a8f408886313ded89588b774fbec4b7
+  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: 2f8cb5b7533219bf4218a045f92768129cf7050a
   RCTTypeSafety: 512728b73549e72ad7330b92f3d42936f2a4de5b
@@ -421,7 +421,7 @@ SPEC CHECKSUMS:
   React-jsi: 74341196d9547cbcbcfa4b3bbbf03af56431d5a1
   React-jsiexecutor: 06a9c77b56902ae7ffcdd7a4905f664adc5d237b
   React-jsinspector: 0ae35a37b20d5e031eb020a69cc5afdbd6406301
-  react-native-safe-area-context: e471852c5ed67eea4b10c5d9d43c1cebae3b231d
+  react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
   React-perflogger: 9c547d8f06b9bf00cb447f2b75e8d7f19b7e02af
   React-RCTActionSheet: 3080b6e12e0e1a5b313c8c0050699b5c794a1b11
   React-RCTAnimation: 3f96f21a497ae7dabf4d2f150ee43f906aaf516f
@@ -434,7 +434,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 0fd6b21751a33cb72fce1a4a33ab9678416d307a
   React-runtimeexecutor: cad74a1eaa53ee6e7a3620231939d8fe2c6afcf0
   ReactCommon: cfe2b7fd20e0dbd2d1185cd7d8f99633fbc5ff05
-  RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
+  RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNReanimated: 514a11da3a2bcc6c3dfd9de32b38e2b9bf101926
   RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d