Merge pull request #71 from sentry-demos/add-replay

Add replay

Author: dachakra

.gitignore

@@ -64,3 +64,6 @@ yarn-error.log
 /coverage
 
 .env
+.yalc
+yalc.lock
+.sentry

ios/sentry_react_native.xcodeproj/project.pbxproj

@@ -604,7 +604,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
@@ -677,7 +680,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

metro.config.js

@@ -11,4 +11,6 @@ const userConfig = {};
 
 const config = mergeConfig(getDefaultConfig(__dirname), userConfig);
 
-module.exports = withSentryConfig(config);
+module.exports = withSentryConfig(config, {
+  annotateReactComponents: true,
+});

package-lock.json

@@ -25,7 +25,7 @@
     "react-native-linear-gradient": "^2.8.2",
     "react-native-safe-area-context": "^4.8.2",
     "react-native-screens": "^3.31.0",
-    "react-native-toast-message": "^2.1.6",
+    "react-native-toast-message": "^2.2.0",
     "react-native-vector-icons": "^10.1.0",
     "react-redux": "^8.1.2",
     "redux": "^4.2.1"

package.json

@@ -17,6 +17,7 @@ import TrackerScreen from './screens/TrackerScreen';
 import ManualTrackerScreen from './screens/ManualTrackerScreen';
 import PerformanceTimingScreen from './screens/PerformanceTimingScreen';
 import EndToEndTestsScreen from './screens/EndToEndTestsScreen';
+import ProductDetailScreen from './screens/ProductDetailScreen';
 import ReduxScreen from './screens/ReduxScreen';
 import CartScreen from './screens/CartScreen';
 import CheckoutScreen from './screens/CheckoutScreen';
@@ -61,10 +62,16 @@ Sentry.init({
     Sentry.reactNativeTracingIntegration({
       traceFetch: false, // RN uses XHR to implement fetch, this prevents duplicates
     }),
+    Sentry.mobileReplayIntegration({
+      maskAllImages: true,
+      maskAllText: true,
+    }),
     reactNavigationIntegration,
   ],
   tracesSampleRate: 1.0,
   profilesSampleRate: 1.0,
+  replaysOnErrorSampleRate: 1.0,
+  replaysSessionSampleRate: 1.0,
   enableUserInteractionTracing: true,
   enableAutoSessionTracking: true,
   sessionTrackingIntervalMillis: 5000, // For testing, session close when 5 seconds (instead of the default 30) in the background.
@@ -107,7 +114,7 @@ const App = () => {
               );
             }}>
             <BottomTabNavigator />
-            <Toast />
+            {/* <Toast /> */}
           </NavigationContainer>
         </GestureHandlerRootView>
       </SafeAreaProvider>
@@ -190,6 +197,7 @@ const ShopNavigator = () => {
         headerShown: false,
       }}>
       <Stack.Screen name="Home" component={HomeScreen} />
+      <Stack.Screen name="ProductDetail" component={ProductDetailScreen} />
     </Stack.Navigator>
   );
 };

src/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import {View, Text, StyleSheet, Pressable} from 'react-native';
 import Toast from 'react-native-toast-message';
 import {AppDispatch} from '../reduxApp';
 import {StyledButton} from './StyledButton';
@@ -12,6 +12,8 @@ export const StyledProductCard = (props: {
   price: number;
   title: string;
   imgcropped: string;
+  description: string;
+  onPress: () => void;
   appDispatch: AppDispatch;
 }): React.ReactElement => {
   const onAddToCartPressed = () => {
@@ -25,20 +27,22 @@ export const StyledProductCard = (props: {
         imgcropped: props.imgcropped,
       },
     });
+    const visibilityTimeMs = 1000;
     Toast.show({
       type: 'success',
       position: 'bottom',
       text1: 'Added to Cart',
-      visibilityTime: 0.5,
+      visibilityTime: visibilityTimeMs,
     });
   };
 
   return (
-    <View style={styles.cardContainer}>
+    <Pressable style={styles.cardContainer} onPress={props.onPress}>
       <View style={styles.cardHero}>{selectImage(props.imgcropped)}</View>
       <View style={styles.cardDetail}>
         <View style={styles.cardDetailContent}>
           <Text style={styles.cardTitle}>{props.title}</Text>
+          <Text style={styles.cardDescription}>{props.description}</Text>
           <Text style={styles.itemPrice}>${props.price}</Text>
         </View>
         <View style={styles.cardDetailAction}>
@@ -52,7 +56,7 @@ export const StyledProductCard = (props: {
           />
         </View>
       </View>
-    </View>
+    </Pressable>
   );
 };
 
@@ -111,4 +115,7 @@ const styles = StyleSheet.create({
   addToCartButtonDefault: {
     margin: 10,
   },
+  cardDescription: {
+    fontSize: 14,
+  },
 });

src/components/StyledProductCard.tsx

@@ -1,6 +1,10 @@
 export const DSN =
   'https://[email protected]/5716557';
 
+// SENTRY_INTERNAL_DSN for testing
+// export const DSN =
+//   'https://[email protected]/5428561';
+
 export const BACKEND_URL =
   'https://application-monitoring-flask-dot-sales-engineering-sf.appspot.com';
 // 'http://127.0.0.1:8080'; // for local flask backend

src/config.ts

@@ -1,3 +1,5 @@
+import {Product} from './types/Product';
+
 export type RootStackParamList = {
   Home: undefined;
   Tracker: undefined;
@@ -10,4 +12,5 @@ export type RootStackParamList = {
   ListApp: undefined;
   Checkout: undefined;
   CartScreen: undefined;
+  ProductDetail: Product;
 };

src/navigation.ts

@@ -62,6 +62,13 @@ const CartScreen = ({
   }, [navigation]);
 
   const cartItems: Array<CartData> | [] = Object.values(cartData);
+
+  if (cartItems.length === 0) {
+    setTimeout(() => {
+      console.error('No products in the cart.');
+    });
+  }
+
   const subTotalDisplay = (props: subTotal): React.ReactElement => {
     const {quantity: q, total: t} = props;
     const multiple = q > 1 ? 's' : '';