feat: New react native docs (#1172)

* feat: First draft of new react native docs

* feat: Update docs

* ref: Update snapshot

* Apply suggestions from code review

Co-Authored-By: Tien "Mimi" Nguyen <tienmiminguyen@gmail.com>

* Apply suggestions from code review

Co-Authored-By: Tien "Mimi" Nguyen <tienmiminguyen@gmail.com>

* fix: Upgrading

* fix: DSN

* meta: Some additional changes

* meta: Deprecate old SDK

* fix: Platforms file

__tests__/__snapshots__/documentation.js.snap

@@ -347,6 +347,13 @@ Array [
  "platforms/python/sqlalchemy/index.html",
  "platforms/python/tornado/index.html",
  "platforms/python/wsgi/index.html",
+ "platforms/react-native/cocoapods/index.html",
+ "platforms/react-native/codepush/index.html",
+ "platforms/react-native/expo/index.html",
+ "platforms/react-native/index.html",
+ "platforms/react-native/manual-setup/index.html",
+ "platforms/react-native/ram-bundles/index.html",
+ "platforms/react-native/sourcemaps/index.html",
  "platforms/rust/actix/index.html",
  "platforms/rust/env_logger/index.html",
  "platforms/rust/error_chain/index.html",

src/_data/platforms.yml

@@ -436,6 +436,7 @@
  name: React-Native
  doc_link: /clients/react-native/
  wizard_parent: react-native
+ superseded_by: react-native
  wizard:
  - _documentation/clients/react-native/index.md
 -
@@ -590,3 +591,12 @@
  wizard_parent: minidump
  wizard:
  - _documentation/platforms/minidump/index.md
+-
+ slug: react-native
+ support_level: production
+ type: framework
+ name: React-Native
+ wizard: true
+ case_style: camelCase
+ doc_link: /platforms/react-native
+ fallback_platform: javascript

src/collections/_documentation/clients/react-native/index.md

@@ -1,6 +1,5 @@
 ---
 title: 'React Native'
-sidebar_relocation: platforms
 ---
 
 This is the documentation for our React-Native SDK. The React-Native SDK uses a native extension for iOS and Android but will fall back to a pure JavaScript version if necessary.

src/collections/_documentation/platforms/react-native/cocoapods.md

@@ -0,0 +1,23 @@
+---
+title: 'Setup With CocoaPods'
+---
+
+To use Sentry with CocoaPods, you have to install the packages with `npm` or `yarn` and link them locally in your `Podfile`.
+
+```bash
+npm install --save react react-native @sentry/react-native
+# OR
+yarn add react react-native @sentry/react-native
+```
+
+After that, change your `Podfile` to reference to the packages in your `node_modules` folder. For the latest reference on how to use react-native with CocoaPods see: [Integration with existing apps](https://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies)
+
+```ruby
+target 'YOUR-TARGET' do
+ # Your react-native and other pods
+
+ pod 'RNSentry', :path => '../node_modules/@sentry/react-native/RNSentry.podspec' # or your path to node_modules
+end
+```
+
+And then, run `pod install` which should link everything correctly. Please keep in mind that you need the build steps that upload your source maps and debug symbols.

src/collections/_documentation/platforms/react-native/codepush.md

@@ -0,0 +1,33 @@
+---
+title: 'Using Sentry with CodePush'
+---
+
+If you want to use Sentry together with CodePush you have to send us the CodePush version:
+
+```javascript
+import codePush from "react-native-code-push";
+
+codePush.getUpdateMetadata().then((update) => {
+ if (update) {
+ Sentry.setRelease(update.appVersion + '-codepush:' + update.label);
+ }
+});
+```
+
+Put this somewhere in your code where you already use CodePush. This makes sure that we can associate crashes with the right source maps. `Sentry.setRelease` sets the release to `version`. This works for iOS as well as Android. Make sure that you call this function otherwise Sentry is not able to symbolicate your crashes correctly.
+
+After updating your CodePush release, you have to upload the new assets to Sentry:
+
+```bash
+$ appcenter codepush release-react --app YourApp --output-dir ./build
+$ export SENTRY_PROPERTIES=./ios/sentry.properties
+$ sentry-cli react-native appcenter YourApp ios ./build/codePush
+```
+
+{% capture __alert_content -%}
+Exporting the `SENTRY_PROPERTIES` will tell sentry-cli to use the properties in your project. Alternatively, you can either pass it via parameters or a global settings file. To find more about this refer to [Working with Projects]({%- link _documentation/cli/configuration.md -%}#sentry-cli-working-with-projects).
+{%- endcapture -%}
+{%- include components/alert.html
+ title="Note"
+ content=__alert_content
+%}

src/collections/_documentation/platforms/react-native/expo.md

@@ -0,0 +1,47 @@
+---
+title: 'Using Sentry with Expo'
+---
+
+[Expo](https://expo.io/) is an excellent way to quickly create and play around with your react native app. Now you can also use Sentry together with Expo which is pretty simple todo:
+
+```bash
+npm install sentry-expo --save
+# OR
+yard add sentry-expo
+```
+
+In your `main.js` or `app.js`:
+
+```javascript
+import * as Sentry from 'sentry-expo';
+
+Sentry.init({
+ dsn: '__PUBLIC_DSN__',
+ enableInExpoDevelopment: true,
+ debug: true
+});
+```
+
+For uploading source maps you have to add this to your `exp.json` or `app.json`.
+
+```javascript
+{
+ // ... your existing exp.json configuration is here
+
+ "hooks": {
+ "postPublish": [
+ {
+ "file": "sentry-expo/upload-sourcemaps",
+ "config": {
+ "organization": "your team short name here",
+ "project": "your project short name here",
+ "authToken": "your auth token here"
+ }
+ }
+ ]
+ }
+ // ...
+}
+```
+
+If you still need more help you can out the docs directly on [Expo’s docs page](https://docs.expo.io/versions/latest/guides/using-sentry/).

src/collections/_documentation/platforms/react-native/index.md

@@ -0,0 +1,140 @@
+---
+title: 'React Native'
+---
+
+The React-Native SDK uses a native extension for iOS and Android but will fall back to a pure JavaScript version if necessary.
+
+<!-- WIZARD -->
+## Integrating the SDK
+
+Sentry captures data by using an SDK within your application’s runtime. These are platform-specific and allow Sentry to have a deep understanding of how your application works.
+
+NOTE: If you are using `expo-cli` you need to use another SDK see: [https://docs.expo.io/versions/latest/guides/using-sentry/](https://docs.expo.io/versions/latest/guides/using-sentry/)
+This SDK only works for ejected projects or projects that directly use React Native.
+
+To install the React Native SDK, add the dependency to your project by either using `npm` or `yarn`.
+
+```bash
+npm install @sentry/react-native --save
+# or
+yarn add @sentry/react-native
+```
+
+### Linking
+
+Since our SDK also supports native crashes, we need to link the SDK to your native projects.
+
+Above `react-native >= 0.60` you need to do:
+
+```bash
+yarn sentry-wizard -i reactNative -p ios android
+cd ios
+pod install
+```
+
+Since our SDK supports [auto-linking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) and iOS relies on CocoaPods, you need to install the dependencies.
+
+If you are running a project with `react-native < 0.60` you still need to call `react-native link`.
+
+```bash
+react-native link @sentry/react-native
+```
+
+The *link* step or the `sentry-wizard` call will patch your project accordingly. 
+
+The [Sentry Wizard](https://github.com/getsentry/sentry-wizard) will guide you through the process of setting everything up correctly. This has to be done only once, and the files created can go into your version control system.
+
+The following changes will be performed:
+
+- add the sentry-java 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_*.
+
+<!-- ENDWIZARD -->
+
+## Upgrading from react-native-sentry
+
+If you are upgrading from an earlier version of react-native-sentry you should unlink the package to ensure the generated code is updated to the latest version:
+
+```bash
+$ react-native unlink react-native-sentry
+```
+
+After that remove `react-native-sentry` from your `package.json` and follow the installation instructions.
+
+## iOS Specifics
+
+When you use Xcode, you can hook directly into the build process to upload debug symbols and source maps. However, if you are using bitcode, you will need to disable the “Upload Debug Symbols to Sentry” build phase and then separately upload debug symbols from iTunes Connect to Sentry.
+
+## Android Specifics
+
+For Android, we hook into Gradle for the source map build process. When you run `react-native link`, the Gradle files are automatically updated. When you run `./gradlew assembleRelease` source maps are automatically built and uploaded to Sentry.
+
+<!-- WIZARD -->
+## Connecting the SDK to Sentry
+
+After you’ve completed setting up a project in Sentry, Sentry will give you a value which we call a DSN or Data Source Name. It looks a lot like a standard URL, but it’s just a representation of the configuration required by the Sentry SDKs. It consists of a few pieces, including the protocol, public key, the server address, and the project identifier.
+
+To initialize the SDK, you need to call:
+
+```javascript
+import * as Sentry from '@sentry/react-native';
+
+Sentry.init({ 
+ dsn: '___PUBLIC_DSN___', 
+});
+```
+
+NOTE: The sentry-wizard will try to add it to your App.js
+
+## Verifying Your Setup
+
+Great! Now that you’ve completed setting up the SDK, maybe you want to quickly test out how Sentry works. You can trigger a JS exception by throwing one in your application:
+
+```javascript
+throw new Error("My first Sentry error!");
+```
+
+You can even try a native crash with:
+
+```javascript
+Sentry.nativeCrash();
+```
+<!-- ENDWIZARD -->
+
+## Capturing Errors
+
+In most situations, you can capture errors automatically with `captureException()`.
+
+```javascript
+try { 
+ aFunctionThatMightFail();
+} catch (err) { 
+ Sentry.captureException(err);
+}
+```
+
+## Setting Release / Dist
+
+```javascript
+Sentry.setRelease('release');
+Sentry.setDist('dist');
+```
+
+Since this SDK is unified, all function that are available for JavaScript are also available in this SDK, for more examples:
+- [Adding Context]({%- link _documentation/platforms/javascript/index.md -%}#adding-context)
+- [JavaScript Advanded Usage]({%- link _documentation/platforms/javascript/index.md -%}#advanced-usage)
+
+## Deep Dive
+
+- [Using Sentry with Expo]({%- link _documentation/platforms/react-native/expo.md -%})
+- [Using Sentry with CodePush]({%- link _documentation/platforms/react-native/codepush.md -%})
+- [Source maps for Other Platforms]({%- link _documentation/platforms/react-native/sourcemaps.md -%})
+- [Setup With CocoaPods]({%- link _documentation/platforms/react-native/cocoapods.md -%})
+- [Using RAM Bundles]({%- link _documentation/platforms/react-native/ram-bundles.md -%})
+- [Manual Setup]({%- link _documentation/platforms/react-native/manual-setup.md -%})
+ - [iOS]({%- link _documentation/platforms/react-native/manual-setup.md -%}#ios)
+ - [Android]({%- link _documentation/platforms/react-native/manual-setup.md -%}#android)