Merge pull request newrelic#13783 from newrelic/react-native-logs

feat(Mobile): Added JavaScript console logs

src/content/docs/mobile-monitoring/new-relic-monitoring-react-native/monitor-your-react-native-application.mdx

@@ -13,7 +13,7 @@ import mobileReactNativeSummary from 'images/mobile_screenshot-full_react-native
 
 import mobileQueryExample from 'images/mobile_screenshot-full_query-example.webp'
 
-With our React Native agent, your team can monitor the performance of its hybrid apps and identify code errors. Our agent collects crash data, network traffic, and other information for hybrid apps using native components. Then the agent sends that data for you to analyze in the UI. 
+With our React Native agent, your team can monitor the performance of its hybrid apps and identify code errors. Our agent collects crash data, network traffic, and other information for hybrid apps using native components. Then the agent sends that data for you to analyze in the UI.
 
 <img
     title="UI Summary page"
@@ -46,17 +46,22 @@ If you haven't already, create your free New Relic account below to start monito
 
 Complete these five steps to monitor your React Native applications.
 
-### Step one: Agent installation  [#step-one-of-install]
+<Steps>
+<Step>
+### Agent installation [#step-one-of-install]
 
 Run the following:
 
   ```shell
   npm i newrelic-react-native-agent
   ```
 
-### Step two: React Native setup [#step-two-of-install]
+</Step>
 
-Now open your `index.js` and add the following code to launch NewRelic:
+<Step>
+### React Native setup [#step-two-of-install]
+
+Now open your `index.js` and add the following code to launch New Relic:
 
 <Callout variant="important">
 Please be sure to enter your proper application tokens. `appToken` is platform-specific. You  will need to generate the separate token for Android and iOS apps.
@@ -123,14 +128,18 @@ NewRelic.setJSAppVersion(version);
 AppRegistry.registerComponent(name, () => App);
 ```
 
-### Step three: Android setup [#step-three-android-setup]
+</Step>
+
+<Step>
+### Android setup [#step-three-android-setup]
 
 To ensure that the React Native agent is compatible with Android, install the Android specific agent:
 
-1. Install the New Relic native Android agent using these [instructions ](/docs/mobile-monitoring/new-relic-mobile-android/install-configure/install-android-apps-gradle-android-studio).
+1. Install the New Relic native Android agent using these [instructions](/docs/mobile-monitoring/new-relic-mobile-android/install-configure/install-android-apps-gradle-android-studio).
+
 2. Update `build.gradle`:
-  ```js
-    buildscript {
+
+  ```  buildscript {
     ...
     repositories {
       ...
@@ -143,6 +152,7 @@ To ensure that the React Native agent is compatible with Android, install the An
   ```
 
 3. Update `app/build.gradle`:
+
   ```
   apply plugin: "com.android.application"
   apply plugin: 'newrelic' // <-- add this
@@ -155,18 +165,25 @@ To ensure that the React Native agent is compatible with Android, install the An
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   ```
 
-### Step four: iOS setup [#step-four-iOS-setup]
+</Step>
+
+<Step>
+
+### iOS setup [#step-four-iOS-setup]
 
 To ensure that the React Native agent is compatible with all iOS frameworks, install the New Relic iOS agent:
 
 ```shell
 npx pod-install
 ```
+</Step>
 
-### Step five: Autolinking and rebuilding [#step-five-autolinking-and-rebuilding]
+<Step>
+### Autolinking and rebuilding [#step-five-autolinking-and-rebuilding]
 
 The React Native New Relic library must be linked to your project and your application needs to be rebuilt. If you use React Native 0.60+, you automatically have access to autolinking, requiring no further manual installation steps.
 
+
 #### Android applications [#android-linking]
 
 ```
@@ -191,6 +208,9 @@ npx react-native run-ios --configuration Release
 ```
 npx react-native run-android --variant=release
 ```
+</Step>
+
+</Steps>
 
 <InstallFeedback />
 
@@ -199,6 +219,7 @@ npx react-native run-android --variant=release
 Integration with Expo is automatic with [bare workflow](https://docs.expo.dev/introduction/managed-vs-bare/#bare-workflow) but requires some extra steps for [custom managed workflow](https://docs.expo.io/workflow/customizing/) via [config plugins](https://docs.expo.io/guides/config-plugins/).
 
 To set up [custom managed workflow](https://docs.expo.dev/introduction/managed-vs-bare/#bare-workflow), after installing our package, add the config plugin to the plugins array of your `app.json` or `app.config.js`.
+
 ```javascript
     {
       "name": "my app",
@@ -208,7 +229,7 @@ To set up [custom managed workflow](https://docs.expo.dev/introduction/managed-v
 
 For the managed work flow, you need to use the `expo prebuild --clean` command as described in the [Adding custom native code](https://docs.expo.dev/workflow/customizing/) guide to rebuild your app with the plugin changes. If this command is not running, you'll get errors when starting the New Relic agent. For Expo Go users, the agent will require using native code. Since Expo Go does not support sending custom native code over-the-air, you can follow Expo's documentation on [how to use custom native code in Expo Go](https://docs.expo.dev/bare/using-expo-client/).
 
-## Routing Instrumentation(Capturing Current Screen Name)
+## Routing Instrumentation (Capturing Current Screen Name)
 
 We currently provide two routing instrumentations out of the box to instrument route changes for and route changes record as Breadcrumb.
 
@@ -238,6 +259,7 @@ We currently provide two routing instrumentations out of the box to instrument r
 * **[react-native-navigation](https://github.com/wix/react-native-navigation)**
 
 		Register `NewRelic.componentDidAppearListener` listener using:
+
 		```javascript
 		Navigation.events().registerComponentDidAppearListener( NewRelic.componentDidAppearListener );
 		```
@@ -275,7 +297,7 @@ const App = () => (
 
 ## JavaScript errors [#javascript-errors]
 
-### React Native Agent v1.2.0 and above:
+### React Native Agent v1.2.0 and higher:
 JavaScript errors and promise rejections can be seen in the `Handled Exceptions` tab in New Relic One. You will be able to see the event trail, attributes, and stack trace for each JavaScript error recorded. 
 
 You can also find these errors by running this query:
@@ -284,26 +306,34 @@ You can also find these errors by running this query:
 SELECT * FROM MobileHandledException SINCE 24 hours ago
 ```
 
-### React Native Agent v1.1.0 and below:
+### React Native Agent v1.1.0 and lower:
 The React Native agent creates custom events for JavaScript errors and reports them to New Relic. In the UI, you can track these JavaScript error events with a custom dashboard.
 
 To create a custom dashboard:
 1. Go to [one.newrelic.com](https://one.newrelic.com/all-capabilities).
-2. Click **Query builder**.
+2. Click **Query your data**.
 3. Run this query:
 
   ```sql
   SELECT * FROM `JS Errors`
   ```
 4. Click **Add to dashboard**.
 <img
-    title="Query builder"
+    title="Query your data"
     alt="This is an image of a sample query in the Query builder."
     src={mobileQueryExample}
   />
 
 <figcaption>
-  **[one.newrelic.com](https://one.newrelic.com/all-capabilities) > Query builder**: Use the **Query builder** to create a custom dashboard for tracking JavaScript errors from your React app.
+  **[one.newrelic.com](https://one.newrelic.com/all-capabilities)** > **Query your data**: Use the **Query builder** to create a custom dashboard for tracking JavaScript errors from your React app.
 </figcaption>
 
 If you need help getting started with dashboards, see [Introduction to dashboards](/docs/query-your-data/explore-query-data/dashboards/introduction-dashboards/#get-started).
+
+## JavaScript console logs [#javascript-logs]
+
+We capture console logs from JavaScript. Go to **[one.newrelic.com](https://one.newrelic.com/all-capabilities)** > **Query your data** and add this query to find those JavaScript console logs:
+
+```sql
+SELECT * FROM consoleEvents SINCE 24 HOURS AGO
+```