Skip to content

Commit 269f58d

Browse files
thinkocapothinkocapo
authored
Merge pull request #3 from sentry-demos/neil-rm-linking
No need for linking anymore. Just clone, setup, and run.
2 parents 1fbe894 + 553b6b3 commit 269f58d

File tree

10 files changed

+143
-41
lines changed

10 files changed

+143
-41
lines changed

‎ReactNativeDemo/.nvmrc ‎.nvmrc

File renamed without changes.

‎README.md

+21-29
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,38 @@
11
# sentry-demos/react-native
2-
32
https://docs.sentry.io/clients/react-native/
43

54
## Goal/Summary:
65
Show how Sentry works to surface errors in react-native applications (stacktraces will be symbolicated + unminified)
76

8-
## First-time Setup
9-
this project uses:
10-
React Native v0.59.10
11-
react-native-sentry ^0.43.2
12-
react-native-cli: 2.0.1
13-
14-
0. create a React Native project on Sentry.io (the `link` command below will have you select your RN project)
15-
1. cd ReactNativeDemo
16-
2. Install dependencies
7+
## Setup
8+
1. Install dependencies listed under https://facebook.github.io/react-native/docs/getting-started.html#node-watchman-jdk (all except for node):
179
```
18-
npm install -g react-native-cli
19-
npm install && yarn install
10+
brew install watchman
11+
brew tap AdoptOpenJDK/openjdk
12+
brew cask install adoptopenjdk8
2013
```
21-
3. Remove Sentry import and install code (lines 4-8) in App.js
22-
4. `sentry`react-native link react-native-sentry`
23-
updates the following:
24-
modified: android/app/build.gradle
25-
modified: android/app/src/main/java/com/reactnativedemo/MainApplication.java
26-
modified: android/settings.gradle
27-
modified: ios/ReactNativeDemo.xcodeproj/project.pbxproj
28-
modified: ios/ReactNativeDemo/AppDelegate.m
29-
modified: ios/sentry.properties
30-
modified: package-lock.json
31-
modified: yarn.lock
32-
modified: App.js
33-
5. Run it
34-
ios
14+
2. Install cocoapods (`gem install cocoapods`)
15+
3. Use nvm version specified in .nvmrc: `nvm use`
16+
4. Install react-native-cli: `npm install -g react-native-cli@2.0.1`
17+
5. `cd ReactNativeDemo`
18+
6. Install packages: `npm install`
19+
7. Make sure `SENTRY_AUTH_TOKEN` environment variable is set (https://docs.sentry.io/cli/configuration/#to-authenticate-manually)
20+
21+
# Run
22+
23+
### iOS:
3524
```
3625
$ react-native run-ios --configuration Release
3726
```
38-
android
27+
### Android
3928
```
40-
$ react-native run-android --variant
29+
$ react-native run-android --variant Release
4130
```
31+
-> Simulator/Emulator should have launched with sample app. Trigger errors and go to Sentry to see them!
4232

43-
6. Simulator/Emulator should have launched with sample app. Trigger errors and go to Sentry to see them!
33+
# Change project
34+
1. Replace DSN in App.js
35+
2. Replace org and project in ios/sentry.properties + android/sentry.properties.
4436

4537
# GIF (JS error)
4638
![Alt Text](react-native-demo.gif)

‎ReactNativeDemo/App.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import React, {Component} from 'react';
22
import {Button, Platform, StyleSheet, Text, View, TextInput, ImageBackground, Image} from 'react-native';
33

4-
import { Sentry, SentrySeverity, SentryLog } from 'react-native-sentry';
5-
Sentry.config('<your_dsn_key>', {
4+
import {Sentry, SentrySeverity, SentryLog} from 'react-native-sentry';
5+
6+
Sentry.config('https://4f4c77ac999c47248f4b202aaa39c9f0@sentry.io/1481922', {
67
logLevel: SentryLog.Debug,
78
deactivateStacktraceMerging: false
89
}).install();
910

10-
11-
1211
type Props = {};
1312
export default class App extends Component<Props> {
1413
render() {

‎ReactNativeDemo/android/app/build.gradle

+2
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ project.ext.react = [
7777
]
7878

7979
apply from: "../../node_modules/react-native/react.gradle"
80+
apply from: "../../node_modules/react-native-sentry/sentry.gradle"
8081

8182
/**
8283
* Set this to true to create two separate APKs instead of one:
@@ -138,6 +139,7 @@ android {
138139
}
139140

140141
dependencies {
142+
implementation project(':react-native-sentry')
141143
implementation fileTree(dir: "libs", include: ["*.jar"])
142144
implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
143145
implementation "com.facebook.react:react-native:+" // From node_modules

‎ReactNativeDemo/android/app/src/main/java/com/reactnativedemo/MainApplication.java

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import android.app.Application;
44

55
import com.facebook.react.ReactApplication;
6+
import io.sentry.RNSentryPackage;
67
import com.facebook.react.ReactNativeHost;
78
import com.facebook.react.ReactPackage;
89
import com.facebook.react.shell.MainReactPackage;
@@ -22,7 +23,8 @@ public boolean getUseDeveloperSupport() {
2223
@Override
2324
protected List<ReactPackage> getPackages() {
2425
return Arrays.<ReactPackage>asList(
25-
new MainReactPackage()
26+
new MainReactPackage(),
27+
new RNSentryPackage()
2628
);
2729
}
2830

‎ReactNativeDemo/android/sentry.properties

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
defaults.url=https://sentry.io/
2+
defaults.org=testorg-az
3+
defaults.project=react-native-mobile
4+
cli.executable=node_modules/@sentry/cli/bin/sentry-cli

‎ReactNativeDemo/android/settings.gradle

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
rootProject.name = 'ReactNativeDemo'
2+
include ':react-native-sentry'
3+
project(':react-native-sentry').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sentry/android')
24

35
include ':app'

‎ReactNativeDemo/ios/ReactNativeDemo.xcodeproj/project.pbxproj

+100-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
};
66
objectVersion = 46;
77
objects = {
8-
98
/* Begin PBXBuildFile section */
109
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
1110
00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -40,6 +39,9 @@
4039
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
4140
ED297163215061F000B7C4FE /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = ED297162215061F000B7C4FE /* JavaScriptCore.framework */; };
4241
ED2971652150620600B7C4FE /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = ED2971642150620600B7C4FE /* JavaScriptCore.framework */; };
42+
2A0B6FCF2D4040E89C2809C3 /* libRNSentry.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 02C4D22390E14D128480CFEB /* libRNSentry.a */; };
43+
79AAFB8EDBFC426DB3EFF665 /* libRNSentry-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E05E6D957D6D4B06B1887155 /* libRNSentry-tvOS.a */; };
44+
2A07FC79859A46C8871426F4 /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 36E5853EC32A4E038062B231 /* libz.tbd */; };
4345
/* End PBXBuildFile section */
4446

4547
/* Begin PBXContainerItemProxy section */
@@ -347,6 +349,10 @@
347349
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
348350
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
349351
ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
352+
E8A63F7A50544A6290CF191A /* RNSentry.xcodeproj */ = {isa = PBXFileReference; name = "RNSentry.xcodeproj"; path = "../node_modules/react-native-sentry/ios/RNSentry.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
353+
02C4D22390E14D128480CFEB /* libRNSentry.a */ = {isa = PBXFileReference; name = "libRNSentry.a"; path = "libRNSentry.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
354+
E05E6D957D6D4B06B1887155 /* libRNSentry-tvOS.a */ = {isa = PBXFileReference; name = "libRNSentry-tvOS.a"; path = "libRNSentry-tvOS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
355+
36E5853EC32A4E038062B231 /* libz.tbd */ = {isa = PBXFileReference; name = "libz.tbd"; path = "usr/lib/libz.tbd"; sourceTree = SDKROOT; fileEncoding = undefined; lastKnownFileType = sourcecode.text-based-dylib-definition; explicitFileType = undefined; includeInIndex = 0; };
350356
/* End PBXFileReference section */
351357

352358
/* Begin PBXFrameworksBuildPhase section */
@@ -375,6 +381,8 @@
375381
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
376382
00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
377383
139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
384+
2A0B6FCF2D4040E89C2809C3 /* libRNSentry.a in Frameworks */,
385+
2A07FC79859A46C8871426F4 /* libz.tbd in Frameworks */,
378386
);
379387
runOnlyForDeploymentPostprocessing = 0;
380388
};
@@ -391,6 +399,7 @@
391399
2D02E4C61E0B4AEC006451C7 /* libRCTSettings-tvOS.a in Frameworks */,
392400
2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */,
393401
2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */,
402+
79AAFB8EDBFC426DB3EFF665 /* libRNSentry-tvOS.a in Frameworks */,
394403
);
395404
runOnlyForDeploymentPostprocessing = 0;
396405
};
@@ -527,6 +536,7 @@
527536
ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
528537
ED2971642150620600B7C4FE /* JavaScriptCore.framework */,
529538
2D16E6891FA4F8E400B85C8A /* libReact.a */,
539+
36E5853EC32A4E038062B231 /* libz.tbd */,
530540
);
531541
name = Frameworks;
532542
sourceTree = "<group>";
@@ -564,6 +574,7 @@
564574
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
565575
00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
566576
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
577+
E8A63F7A50544A6290CF191A /* RNSentry.xcodeproj */,
567578
);
568579
name = Libraries;
569580
sourceTree = "<group>";
@@ -611,6 +622,14 @@
611622
name = Products;
612623
sourceTree = "<group>";
613624
};
625+
DFB1E007DE0B48BCBA1ADC00 /* Frameworks */ = {
626+
isa = PBXGroup;
627+
children = (
628+
);
629+
name = Frameworks;
630+
path = Application;
631+
sourceTree = "<group>";
632+
};
614633
/* End PBXGroup section */
615634

616635
/* Begin PBXNativeTarget section */
@@ -640,6 +659,7 @@
640659
13B07F8C1A680F5B00A75B9A /* Frameworks */,
641660
13B07F8E1A680F5B00A75B9A /* Resources */,
642661
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
662+
1867AED7630B4E57936F13D0 /* Upload Debug Symbols to Sentry */,
643663
);
644664
buildRules = (
645665
);
@@ -692,7 +712,7 @@
692712
83CBB9F71A601CBA00E9B192 /* Project object */ = {
693713
isa = PBXProject;
694714
attributes = {
695-
LastUpgradeCheck = 0940;
715+
LastUpgradeCheck = 940;
696716
ORGANIZATIONNAME = Facebook;
697717
TargetAttributes = {
698718
00E356ED1AD99517003FC87E = {
@@ -1090,7 +1110,7 @@
10901110
);
10911111
runOnlyForDeploymentPostprocessing = 0;
10921112
shellPath = /bin/sh;
1093-
shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
1113+
shellScript = "export SENTRY_PROPERTIES=sentry.properties\nexport NODE_BINARY=node\n../node_modules/@sentry/cli/bin/sentry-cli react-native xcode ../node_modules/react-native/scripts/react-native-xcode.sh";
10941114
};
10951115
2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
10961116
isa = PBXShellScriptBuildPhase;
@@ -1104,7 +1124,21 @@
11041124
);
11051125
runOnlyForDeploymentPostprocessing = 0;
11061126
shellPath = /bin/sh;
1107-
shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
1127+
shellScript = "export SENTRY_PROPERTIES=sentry.properties\nexport NODE_BINARY=node\n../node_modules/@sentry/cli/bin/sentry-cli react-native xcode ../node_modules/react-native/scripts/react-native-xcode.sh";
1128+
};
1129+
1867AED7630B4E57936F13D0 /* Upload Debug Symbols to Sentry */ = {
1130+
isa = PBXShellScriptBuildPhase;
1131+
buildActionMask = 2147483647;
1132+
files = (
1133+
);
1134+
runOnlyForDeploymentPostprocessing = 0;
1135+
name = "Upload Debug Symbols to Sentry";
1136+
inputPaths = (
1137+
);
1138+
outputPaths = (
1139+
);
1140+
shellPath = /bin/sh;
1141+
shellScript = "export SENTRY_PROPERTIES=sentry.properties\n../node_modules/@sentry/cli/bin/sentry-cli upload-dsym";
11081142
};
11091143
/* End PBXShellScriptBuildPhase section */
11101144

@@ -1189,6 +1223,15 @@
11891223
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
11901224
PRODUCT_NAME = "$(TARGET_NAME)";
11911225
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/ReactNativeDemo.app/ReactNativeDemo";
1226+
LIBRARY_SEARCH_PATHS = (
1227+
"$(inherited)",
1228+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1229+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1230+
);
1231+
HEADER_SEARCH_PATHS = (
1232+
"$(inherited)",
1233+
"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
1234+
);
11921235
};
11931236
name = Debug;
11941237
};
@@ -1207,6 +1250,15 @@
12071250
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
12081251
PRODUCT_NAME = "$(TARGET_NAME)";
12091252
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/ReactNativeDemo.app/ReactNativeDemo";
1253+
LIBRARY_SEARCH_PATHS = (
1254+
"$(inherited)",
1255+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1256+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1257+
);
1258+
HEADER_SEARCH_PATHS = (
1259+
"$(inherited)",
1260+
"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
1261+
);
12101262
};
12111263
name = Release;
12121264
};
@@ -1226,6 +1278,10 @@
12261278
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
12271279
PRODUCT_NAME = ReactNativeDemo;
12281280
VERSIONING_SYSTEM = "apple-generic";
1281+
HEADER_SEARCH_PATHS = (
1282+
"$(inherited)",
1283+
"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
1284+
);
12291285
};
12301286
name = Debug;
12311287
};
@@ -1244,6 +1300,10 @@
12441300
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
12451301
PRODUCT_NAME = ReactNativeDemo;
12461302
VERSIONING_SYSTEM = "apple-generic";
1303+
HEADER_SEARCH_PATHS = (
1304+
"$(inherited)",
1305+
"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
1306+
);
12471307
};
12481308
name = Release;
12491309
};
@@ -1270,6 +1330,15 @@
12701330
SDKROOT = appletvos;
12711331
TARGETED_DEVICE_FAMILY = 3;
12721332
TVOS_DEPLOYMENT_TARGET = 9.2;
1333+
LIBRARY_SEARCH_PATHS = (
1334+
"$(inherited)",
1335+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1336+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1337+
);
1338+
HEADER_SEARCH_PATHS = (
1339+
"$(inherited)",
1340+
"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
1341+
);
12731342
};
12741343
name = Debug;
12751344
};
@@ -1296,6 +1365,15 @@
12961365
SDKROOT = appletvos;
12971366
TARGETED_DEVICE_FAMILY = 3;
12981367
TVOS_DEPLOYMENT_TARGET = 9.2;
1368+
LIBRARY_SEARCH_PATHS = (
1369+
"$(inherited)",
1370+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1371+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1372+
);
1373+
HEADER_SEARCH_PATHS = (
1374+
"$(inherited)",
1375+
"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
1376+
);
12991377
};
13001378
name = Release;
13011379
};
@@ -1321,6 +1399,15 @@
13211399
SDKROOT = appletvos;
13221400
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/ReactNativeDemo-tvOS.app/ReactNativeDemo-tvOS";
13231401
TVOS_DEPLOYMENT_TARGET = 10.1;
1402+
LIBRARY_SEARCH_PATHS = (
1403+
"$(inherited)",
1404+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1405+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1406+
);
1407+
HEADER_SEARCH_PATHS = (
1408+
"$(inherited)",
1409+
"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
1410+
);
13241411
};
13251412
name = Debug;
13261413
};
@@ -1346,6 +1433,15 @@
13461433
SDKROOT = appletvos;
13471434
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/ReactNativeDemo-tvOS.app/ReactNativeDemo-tvOS";
13481435
TVOS_DEPLOYMENT_TARGET = 10.1;
1436+
LIBRARY_SEARCH_PATHS = (
1437+
"$(inherited)",
1438+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1439+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1440+
);
1441+
HEADER_SEARCH_PATHS = (
1442+
"$(inherited)",
1443+
"$(SRCROOT)/../node_modules/react-native-sentry/ios/**",
1444+
);
13491445
};
13501446
name = Release;
13511447
};

‎ReactNativeDemo/ios/ReactNativeDemo/AppDelegate.m

+7-1
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,21 @@
1010
#import <React/RCTBridge.h>
1111
#import <React/RCTBundleURLProvider.h>
1212
#import <React/RCTRootView.h>
13+
#if __has_include(<React/RNSentry.h>)
14+
#import <React/RNSentry.h> // This is used for versions of react >= 0.40
15+
#else
16+
#import "RNSentry.h" // This is used for versions of react < 0.40
17+
#endif
1318

1419
@implementation AppDelegate
1520

1621
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
1722
{
1823
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
19-
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
24+
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
2025
moduleName:@"ReactNativeDemo"
2126
initialProperties:nil];
27+
[RNSentry installWithRootView:rootView];
2228

2329
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
2430

0 commit comments

Comments
 (0)