Skip to content

Commit 4158f35

Browse files
Merge branch 'master' into upgrade-rn-79
2 parents 664f725 + ef1b440 commit 4158f35

File tree

7 files changed

+56
-198
lines changed

7 files changed

+56
-198
lines changed

README.md

Lines changed: 37 additions & 195 deletions
Original file line numberDiff line numberDiff line change
@@ -1,220 +1,62 @@
1-
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.
1+
# Sentry Empower Plant React Native Demo
22

3-
<!-- ![Empower PLant](./img/empower-plant.png) -->
4-
<img src="./img/empower-plant.png" width="200" height="400">
3+
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 capabilities.
54

6-
[./img](./img) for more screenshots of Empower Plant
5+
| Home Screen | Product Detail | Cart |
6+
|------------|----------------|------|
7+
| <img src="./img/empower-plant.png" height="400"> | <img src="./img/empower-plant-product-detail.png" height="400"> | <img src="./img/empower-plant-cart.png" height="400"> |
78

89
## Versions
910

10-
The values specified in package.json may be more up to date.
11-
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.
12-
| dependency | version
13-
| ------------- |:-------------:|
14-
| react-native | 0.72.4 |
15-
| gradle | 8.0.1 |
16-
| react | 18.2.0 |
17-
| sentry/react-native | ^5.9.1 |
18-
| npx | 7.8.0? |
19-
| node | 20.5.0 |
20-
| npm | 9.8.0 |
21-
| java | 17.0.8 |
22-
| ruby | 3.2.2 |
23-
| AndroidStudio | Bumblebee 2021.1.1 Patch 2 |
24-
| Android Virtual Device | Pixel_6_API_30 |
25-
11+
See [package.json](./package.json) for the up to date information about the `@sentry/react-native` SDK and `react-native` versions.
2612

2713
## Setup
28-
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.
29-
30-
1. git clone [email protected]:sentry-demos/sentry_react_native.git
31-
2. Add your DSN and BACKEND_URL for back-end to src/config.ts
32-
3. `export const SENTRY_AUTH_TOKEN=<token>`
33-
4. Setup a Android Virtual Device via AVD Manager.
34-
5. If you don't have cocoapods or get an error about cocopods out of date, run `gem install cocoapods`
35-
6. `npm install`
36-
7. `cd ios && pod install`
37-
8. Optional - Create a .env file in project root and add `SE=<value>`
38-
39-
## Run Android
40-
These steps were last tested on Sept 6th, 2023:
41-
42-
1.
43-
```
44-
// this tends to give errors once you run the app. avoid this.
45-
cd android
46-
npm run android // this command executes `react-native run-android` and does hot-reload
47-
```
48-
If step 1 is failing, try building a release and running that in the emulator:
49-
50-
2.
51-
```
52-
// Creates the apk of the app in /android/app/build/outputs/apk/release/app-release.apk
53-
cd android
54-
./gradlew assembleRelease // add '--scan' will collect logs and tasks that happen during this
55-
```
56-
57-
3.
58-
```
59-
// runs the apk you created in steps1,2
60-
emulator -avd Pixel_6_API_34 -netdelay none -netspeed full -dns-server 8.8.8.8
61-
62-
// optional, do this if you think you're not getting the updated app on your emulator
63-
./gradlew installRelease // Installs release build of the app to the currently connected Android device/emulator
64-
```
65-
66-
optional
67-
```
68-
Gradle commands allow you to gradually control what you want to do, like avoiding rebuilding the app if you changed your emulator.
69-
cd android
70-
./gradlew installDebug // Installs debug build of the app to the currently connected Android device/emulator
71-
./gradlew installRelease // Installs release build of the app to the currently connected Android device/emulator
7214

73-
```
15+
Ensure you have working React Native Development Environment, for the latest steps follow the official guide at https://reactnative.dev/docs/set-up-your-environment. For specific Java versions use [sdkman](sdkman.io) and for Ruby use [rbenv](http://rbenv.org/).
7416

75-
Old Steps from before Sept 6th, 2023:
76-
```
77-
Android (optional) start the emulator by AVD Manager or:
17+
1. `git clone [email protected]:sentry-demos/sentry_react_native.git`
18+
2. Optional - Add your DSN and BACKEND_URL to `src/config.ts`
19+
3. Optional - Create a .env file in project root and add `SE=<value>`
20+
4. `export SENTRY_AUTH_TOKEN=<token>` [How to generate Sentry Auth Token](https://docs.sentry.io/account/auth-tokens/#organization-auth-tokens).
21+
5. `npm install`
22+
6. Only for iOS - `bundle install`
23+
7. Only for iOS - `npx pod-install`
7824

79-
// emulator executable is at /Users/<user>/Library/Android/sdk/emulator
80-
emulator -list-avds
81-
emulator @<YourEmulator> -dns-server 8.8.8.8
82-
emulator @Pixel_3_API_30_x86_64 -dns-server 8.8.8.8
25+
## Development
8326

84-
// This builds the APK for the arch and installs to the emulator.
85-
npx react-native run-android --variant Release
86-
```
87-
88-
## Run iOS
89-
90-
```
91-
npm run ios -- --mode=Release
92-
```
27+
For local build with hot reload capabilities use the following commands:
9328

94-
These steps were last tested before Sept 6th, 2023:
95-
Deprecation warning on using npx?
96-
```
97-
# opens the Metro debugger, has hot reload
98-
npx react-native run-ios --configuration Debug
29+
```bash
30+
# Metro Development Server - Optional
31+
# npm run start
9932

100-
## builds a Release (takes longer)
101-
npx react-native run-ios --configuration Release
102-
npx react-native run-ios --simulator="iPhone 11"
33+
npm run build-dev-android
34+
npm run build-dev-ios
10335
```
10436

105-
## SDK Upgrade Path
106-
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.
107-
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.
108-
109-
# How To Create a Release
110-
111-
You must complete all of the following steps when setting a new release version:
112-
113-
## 1. Tick the release version forward.
114-
115-
:warning: If you have edited the `.env` file to locally change the value of the `SE` tag, change it back to `SE=tda` ! Otherwise, whatever value you have set there will get inadvertently included in the release (ask me how I know). If you have no idea what the previous sentences mean, you can ignore this warning. :warning:
116-
117-
There is only one command needed here:
37+
For testing release builds (includes automatic upload of source maps and native debug files) use the following commands:
11838

39+
```bash
40+
npm run build-release-android
41+
npm run build-release-ios
11942
```
120-
$ npm version patch
121-
```
122-
123-
This:
124-
- Increments version by 0.0.1, i.e. `2.0.1` -> `2.0.2`.
125-
- Automatically keeps versioning consistent across package.json and associated android and ios files
126-
- Automatically creates a commit for the newly created release, i.e. `2.0.2`
127-
128-
You should see:
129-
130-
![Screen Shot 2021-12-08 at 12 42 36 PM](https://user-images.githubusercontent.com/12092849/145281424-5900b190-4369-4607-ac2d-b4a317e28eea.png)
131-
132-
We can run `git log` to confirm that the release commit for `2.0.2` was created:
133-
134-
![Screen Shot 2021-12-08 at 12 59 35 PM](https://user-images.githubusercontent.com/12092849/145283580-5b6186c7-4861-46b9-a6f0-0dfa8d20db58.png)
135-
136-
Be careful about which project you are pointing to when you start ticking releases forward or triggering them. Note that once you tick the release version forward locally (i.e. to `2.0.2`), if you locally trigger an error, the Sentry project you're pointing to will start reporting that error as associated with release `2.0.2` (even though your code is being run locally and is technically not deployed). Such are the dangers of having a demo app's release process not occur during a typical release pipeline.
137-
138-
The `npm version patch` command automatically keeps releases consistent across `package.json`, `Info.plist`, and `build.gradle` thanks to [react-native-version](https://github.com/stovmascript/react-native-version).
139-
140-
## 2. Create a Github Release
141-
142-
It's also crucial that we create a Github release so that our automated test jobs (located in the [application-monitoring repo](https://github.com/sentry-demos/application-monitoring/tree/master/tests)) can create data in Sentry based on the latest react native code.
143-
144-
What’s the purpose of this?
145-
146-
Basically in the Github releases, we want to make sure certain artifacts are uploaded. For example in this release I did, 1.9, we have .apk and .app.zip artifacts uploaded. The generated artifacts will be uploaded to the Github Release we create. Then, our automated ‘TDA’ (test data automation) tests will use these builds of the app to generate data and populate our Sentry demo projects.
147-
148-
This is a guide of how to build those artifacts and create a Github Release, while uploading the relevant artifacts along with the release.
149-
150-
### Generate Release/Debug Artifacts
15143

152-
(:pencil2: I'm hoping to make this a less manual process in the future so that you can just run one or two scripts. Unfortunately some things I haven't figured out about Xcode are preventing that. -Chris)
44+
## Release
15345

154-
First: ensure your local repo is up to date with the Github `master` branch via `git pull origin master`.
46+
A release is need to automatically generate data for [demo.sentry.io](https://demo.sentry.io)
15547

156-
#### iOS
48+
1. Merge all changes to the default branch (currently `master`).
49+
2. Go to [`Actions` -> `Release`](https://github.com/sentry-demos/sentry_react_native/actions/workflows/release.yml).
50+
3. Click `Run workflow` at the top of the view. If you don't see the button, you don't have permission to trigger the action in this repository.
51+
4. Select `branch` you want to make release from (typically `master`)
52+
5. Write the new version, follow https://semver.org/, for example `5.7.22`.
53+
6. Go to the [`Releases`](https://github.com/sentry-demos/sentry_react_native/releases) page and wait for the new release to appear. The Github workflow might take ~30 mins. Android is done faster ~10 mins, iOS takes longer ~30 mins. Both have to be done for the release to be published.
54+
7. Use the APK and APP zipped artifacts as needed.
15755

158-
1. Generate the Release build
159-
- `cd` into the root repository directory - `sentry_react_native`
160-
- Run `npx react-native run-ios --configuration Release`. This will start the iPhone simulator and launch the app but we don’t care about that -- this command also creates the release build.
161-
- This will result in a directory being populated under /Users/cstavitsky/Library/Developer/Xcode/DerivedData (replace cstavitsky with your local username). There will be a sentry-react-native-<bunch of random chars> directory. You will see it output once the `npx` command above completes:
56+
## Updating React Native Version
16257

163-
<img width="1792" alt="Screen Shot 2021-12-21 at 9 28 06 AM" src="https://user-images.githubusercontent.com/12092849/147010734-a3ef72b0-8f4f-4ee5-9eca-a569419d5a0e.png">
164-
165-
- Copy the newly created release artifact into the current directory from the output (marked in blue underline above): `cp -r /Users/cstavitsky/Library/Developer/Xcode/DerivedData/sentry_react_native-dgoblbkgunhkxscqaagaqprvjqus/Build/Products/Release-iphonesimulator/sentry_react_native.app sentry_react_native.app` [your hash sentry_react_native-<....> will probably be different]
166-
- Zip the copied directory so that the .zip can be uploaded along with the Github release: `zip -r sentry_react_native.app.zip sentry_react_native.app`
167-
- If you do a `git status` you should see that `sentry_react_native.app.zip` was `modified`.
168-
- Run `git add sentry_react_native.app.zip`
169-
170-
2. Generate the Debug build
171-
- Run `npx react-native run-ios --configuration Debug`. This will start the iPhone simulator and launch the app but we don’t care about that -- this command also creates the debug build.
172-
- This will result in a directory being populated under /Users/cstavitsky/Library/Developer/Xcode/DerivedData (replace cstavitsky with your local username). There will be a sentry-react-native-<bunch of random chars> directory.
173-
- Copy the newly created release artifact (shown in output after running the `npx` command, similar to the Release screenshot above with filepath underlined in blue) into the current directory: `cp -r /Users/cstavitsky/Library/Developer/Xcode/DerivedData/sentry_react_native-dgoblbkgunhkxscqaagaqprvjqus/Build/Products/Debug-iphonesimulator/sentry_react_native.app sentry_react_native_debug.app` [your hash sentry_react_native-<....> will probably be different]
174-
- Zip the copied directory `zip -r sentry_react_native_debug.app.zip sentry_react_native_debug.app`
175-
- Run `git add sentry_react_native_debug.app.zip`
176-
177-
### Android
178-
179-
1. Generate the Release build
180-
- Run `npx react-native run-android --variant Release`. This will generate the Android release build. Ignore the emulator.
181-
- Copy the release build to the root directory of the project: `cp android/app/build/outputs/apk/release/app-release.apk ./`
182-
- Run `git add app-release.apk`
183-
184-
2. Generate the Debug build
185-
- Run `npx react-native run-android --variant Debug`. This will generate the Android debug build. Ignore the emulator.
186-
- Copy the debug build to the root directory of the project: `cp android/app/build/outputs/apk/debug/app-debug.apk ./`
187-
- Run `git add app-debug.apk`
188-
189-
Create a Github Release:
190-
191-
Note: do not proceed with this until you have done all the previous steps.
192-
193-
1. (If this is your first time doing this, run `brew install gh` to install the Github CLI tool. Once you install it, you can skip this step in the future)
194-
2. Commit the four files `git commit -m “Add release artifacts”`
195-
3. Run the release script `./github_release.sh`, and select yes when prompted.
196-
197-
Your new release should be [visible on Github](https://github.com/sentry-demos/sentry_react_native/releases).
198-
199-
### Updating the version of the Demo App itself
200-
Don't forget to bump your release version depending on platform.
201-
iOS: `Info.plist` `CFBundleShortVersionString`
202-
android: `app.build.gradle` `versionName`
58+
Follow https://react-native-community.github.io/upgrade-helper/
20359

20460
## Troubleshooting
205-
[Troubleshooting.md](./troubleshooting.md)
206-
207-
### [Troubleshooting - Locally undoing an accidental increment of the release version]
208-
209-
If you accidentally tick the version forward by running `npm version patch`, and did not intend to do so, you can undo this.
210-
211-
Let's say we were previously on `2.0.1` and accidentally ran the command twice, ticking the release to `2.0.2` and `2.0.3`, but we only wanted to go to `2.0.2`.
212-
213-
- First, run `git log`.
214-
- Copy the commit hash associated with the previous commit that you want to reset to.
215-
216-
![Screen Shot 2021-12-08 at 12 55 09 PM](https://user-images.githubusercontent.com/12092849/145283369-2130cae7-fe0c-42ff-b826-0015c3cd565b.png)
217-
218-
- run `git reset <the commit hash>`.
219-
- Check out any unwanted files that are no longer staged for commit.
22061

62+
See [troubleshooting.md](./troubleshooting.md) for more tips and tricks.

img/empower-plant-cart.png

315 KB
Loading

img/empower-plant-contactinfo.png

-441 KB
Binary file not shown.
841 KB
Loading

img/empower-plant.png

-51.4 KB
Loading

package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
"version": "999.0.0",
44
"private": true,
55
"scripts": {
6-
"android": "react-native run-android",
7-
"ios": "react-native run-ios",
6+
"build-dev-android": "react-native run-android",
7+
"build-dev-ios": "react-native run-ios",
8+
"build-release-android": "react-native run-android --mode Release",
9+
"build-release-ios": "react-native run-ios --mode Release",
810
"lint": "eslint .",
911
"start": "react-native start",
1012
"postversion": "react-native-version",

troubleshooting.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,4 +135,18 @@ py.test -s -n 4 mobile_native/android_react_native/test_checkout_react_native_an
135135
// update the url in...empower/tda/conftest.py > android_react_native_emu_driver, with ngrok URL
136136
```
137137

138-
now go check sentry for.... se:will?
138+
now go check sentry for.... se:will?
139+
140+
## [Troubleshooting - Locally undoing an accidental increment of the release version]
141+
142+
If you accidentally tick the version forward by running `npm version patch`, and did not intend to do so, you can undo this.
143+
144+
Let's say we were previously on `2.0.1` and accidentally ran the command twice, ticking the release to `2.0.2` and `2.0.3`, but we only wanted to go to `2.0.2`.
145+
146+
- First, run `git log`.
147+
- Copy the commit hash associated with the previous commit that you want to reset to.
148+
149+
![Screen Shot 2021-12-08 at 12 55 09 PM](https://user-images.githubusercontent.com/12092849/145283369-2130cae7-fe0c-42ff-b826-0015c3cd565b.png)
150+
151+
- run `git reset <the commit hash>`.
152+
- Check out any unwanted files that are no longer staged for commit.

0 commit comments

Comments
 (0)