feat(sdk): Add JS Core metrics (#3590)

Author: krystofwoldrich

CHANGELOG.md

@@ -7,6 +7,24 @@ This release contains upgrade of `sentry-android` dependency to major version 7.
 ### Features
 
 - Add Android profiles to React Native Profiling ([#3397](https://github.com/getsentry/sentry-react-native/pull/3397))
+- Add `Sentry.metrics` ([#3590](https://github.com/getsentry/sentry-react-native/pull/3590))
+
+  To learn more, see the [Set Up Metrics](https://docs.sentry.io/platforms/react-native/metrics/) guide.
+
+  ```javascript
+  import * as Sentry from '@sentry/react-native';
+
+  Sentry.init({
+    dsn: '___DSN___',
+    integrations: [
+      Sentry.metrics.metricsAggregatorIntegration(),
+    ],
+  });
+
+  Sentry.metrics.increment("button_click", 1, {
+    tags: { system: "iOS", app_version: "1.0.0" },
+  });
+  ```
 
 ### Fixes
 

samples/expo/app/(tabs)/index.tsx

@@ -6,6 +6,8 @@ import { Text, View } from '@/components/Themed';
 import { SENTRY_INTERNAL_DSN } from '@/utils/dsn';
 import { HttpClient } from '@sentry/integrations';
 import { setScopeProperties } from '@/utils/setScopeProperties';
+import { timestampInSeconds } from '@sentry/utils';
+import React from 'react';
 
 const isRunningInExpoGo = Constants.appOwnership === 'expo'
 
@@ -38,6 +40,7 @@ Sentry.init({
         // default: [/.*/]
         failedRequestTargets: [/.*/],
       }),
+      Sentry.metrics.metricsAggregatorIntegration(),
     );
     return integrations.filter(i => i.name !== 'Dedupe');
   },
@@ -66,6 +69,25 @@ Sentry.init({
 });
 
 export default function TabOneScreen() {
+  const [componentMountStartTimestamp] = React.useState<number>(() => {
+    return timestampInSeconds();
+  });
+
+  React.useEffect(() => {
+    if (componentMountStartTimestamp) {
+      // Distributions help you get the most insights from your data by allowing you to obtain aggregations such as p90, min, max, and avg.
+      Sentry.metrics.distribution(
+        'tab_one_mount_time',
+        timestampInSeconds() - componentMountStartTimestamp,
+        {
+          unit: "seconds",
+        },
+      );
+    }
+    // We only want this to run once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <View style={styles.container}>
       <Text>Welcome to Sentry Expo Sample App!</Text>
@@ -78,6 +100,7 @@ export default function TabOneScreen() {
       <Button
         title="Capture exception"
         onPress={() => {
+          Sentry.metrics.increment('tab_one.capture_exception_button_press', 1);
           Sentry.captureException(new Error('Captured exception'));
         }}
       />

samples/react-native/src/App.tsx

@@ -69,6 +69,7 @@ Sentry.init({
         // default: [/.*/]
         failedRequestTargets: [/.*/],
       }),
+      Sentry.metrics.metricsAggregatorIntegration(),
     );
     return integrations.filter(i => i.name !== 'Dedupe');
   },

samples/react-native/src/Screens/HomeScreen.tsx

@@ -19,6 +19,7 @@ import { CommonActions } from '@react-navigation/native';
 import { UserFeedbackModal } from '../components/UserFeedbackModal';
 import { FallbackRender } from '@sentry/react';
 import NativeSampleModule from '../../tm/NativeSampleModule';
+import { timestampInSeconds } from '@sentry/utils';
 
 const { AssetsModule, CppModule, CrashModule } = NativeModules;
 
@@ -27,6 +28,25 @@ interface Props {
 }
 
 const HomeScreen = (props: Props) => {
+  const [componentMountStartTimestamp] = React.useState<number>(() => {
+    return timestampInSeconds();
+  });
+
+  React.useEffect(() => {
+    if (componentMountStartTimestamp) {
+      // Distributions help you get the most insights from your data by allowing you to obtain aggregations such as p90, min, max, and avg.
+      Sentry.metrics.distribution(
+        'home_mount_time',
+        timestampInSeconds() - componentMountStartTimestamp,
+        {
+          unit: 'seconds',
+        },
+      );
+    }
+    // We only want this to run once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // Show bad code inside error boundary to trigger it.
   const [showBadCode, setShowBadCode] = React.useState(false);
   const [isFeedbackVisible, setFeedbackVisible] = React.useState(false);

samples/react-native/src/Screens/TrackerScreen.tsx

@@ -39,6 +39,13 @@ const TrackerScreen = () => {
       });
   };
 
+  const onRefreshButtonPress = () => {
+    Sentry.metrics.increment('tracker_screen.refresh_button_press', 1, {
+      tags: { graph: 'none', public_data: true },
+    });
+    loadData();
+  };
+
   React.useEffect(() => {
     loadData();
   }, []);
@@ -71,7 +78,11 @@ const TrackerScreen = () => {
           <ActivityIndicator size="small" color="#F6F6F8" />
         )}
       </View>
-      <Button sentry-label="refresh" title="Refresh" onPress={loadData} />
+      <Button
+        sentry-label="refresh"
+        title="Refresh"
+        onPress={onRefreshButtonPress}
+      />
     </View>
   );
 };

src/js/index.ts

@@ -45,6 +45,7 @@ export {
   getClient,
   setCurrentClient,
   addEventProcessor,
+  metrics,
 } from '@sentry/core';
 
 import { _addTracingExtensions } from './tracing/addTracingExtensions';