feat: Add demo logs

src/App.tsx

@@ -49,6 +49,7 @@ Sentry.init({
   dsn: DSN,
   debug: true,
   environment: 'dev',
+  enableLogs: true,
   beforeSend: (event) => {
     if (SE === 'tda') {
       // Make issues unique to the release (app version) for Release Health
@@ -73,6 +74,7 @@ Sentry.init({
       maskAllImages: true,
       maskAllText: true,
     }),
+    Sentry.consoleLoggingIntegration({levels: ['log', 'warn', 'error']}),
     reactNavigationIntegration,
   ],
   tracesSampleRate: 1.0,
@@ -109,6 +111,14 @@ const App = () => {
   let email = Math.random().toString(36).substring(2, 6) + '@yahoo.com';
   scope.setUser({email: email});
 
+  // Log app initialization
+  Sentry.logger.info('App initialized', {
+    customerType,
+    email,
+    se: SE,
+    version: packageJson.version,
+  });
+
   return (
     <Provider store={store}>
       <SafeAreaProvider>
@@ -119,6 +129,7 @@ const App = () => {
               reactNavigationIntegration.registerNavigationContainer(
                 navigation,
               );
+              Sentry.logger.info('Navigation container ready');
             }}>
             <BottomTabNavigator />
             {/* <Toast /> */}

src/components/StyledCartProductCard.tsx

@@ -14,6 +14,15 @@ export const StyledCartProductCard = (props: {
   title: string;
 }): React.ReactElement => {
   const deleteItem = (id: string) => {
+    Sentry.logger.info(
+      Sentry.logger.fmt`'${props.title}' removed from cart`,
+      {
+        productId: props.id,
+        productTitle: props.title,
+        price: props.price,
+        quantity: props.quantity,
+      },
+    );
     props.appDispatch({type: 'DELETE_FROM_CART', payload: id});
   };
 

src/components/StyledProductCard.tsx

@@ -34,6 +34,15 @@ export const StyledProductCard = (props: {
       text1: 'Added to Cart',
       visibilityTime: visibilityTimeMs,
     });
+    Sentry.logger.info(
+      Sentry.logger.fmt`'${props.title}' added to cart`,
+      {
+        productId: props.id,
+        productTitle: props.title,
+        price: props.price,
+        productType: props.type,
+      },
+    );
   };
 
   return (

src/components/UserFeedbackModal.tsx

@@ -36,6 +36,7 @@ export const SentryUserFeedbackActionButton = () => {
       : [style.container, style.shadowProp];
 
   const onGiveFeedbackButtonPress = () => {
+    Sentry.logger.info('User feedback modal opened');
     setFromVisibility(true);
   };
 
@@ -111,6 +112,11 @@ export function UserFeedbackModal(props: {onDismiss: () => void}) {
       message: comments,
     };
 
+    Sentry.logger.info('User feedback submitted', {
+      eventId: sentryId,
+      messageLength: comments.length,
+    });
+
     Sentry.captureFeedback(userFeedback);
     clearComments();
     dispatch(hideFeedbackActionButton());

src/reduxApp.ts

@@ -45,17 +45,29 @@ const reducer = (state = initialState, action) => {
       }
     case 'ADD_TO_CART':
       if (state.cart[payload.id]) {
+        const newQuantity = state.cart[payload.id].quantity + 1;
+        Sentry.logger.info(`Adding quantity: ${newQuantity}`, {
+          productId: payload.id,
+          productTitle: payload.title,
+          previousQuantity: state.cart[payload.id].quantity,
+          newQuantity: newQuantity,
+        });
         return {
           ...state,
           cart: {
             ...state.cart,
             [payload.id]: {
               ...state.cart[payload.id],
-              quantity: state.cart[payload.id].quantity + 1,
+              quantity: newQuantity,
             },
           },
         };
       }
+      Sentry.logger.info('Adding new item to cart', {
+        productId: payload.id,
+        productTitle: payload.title,
+        quantity: payload.quantity,
+      });
       return {
         ...state,
         cart: {...state.cart, [action.payload.id]: action.payload},

src/screens/CartScreen.tsx

@@ -28,6 +28,7 @@ const CheckoutButton = ({
   return (
     <Button
       onPress={() => {
+        Sentry.logger.info('Navigating to checkout');
         navigation.navigate('Checkout');
       }}
       title="Checkout"
@@ -44,6 +45,11 @@ const computeCartTotal = (cartItems: Array<CartData>): subTotal => {
     total += itemTotal;
   });
   let aggregate = {total, quantity};
+
+  // Log cart calculation
+  Sentry.logger.debug(`Calculated itemsInCart: ${quantity}`);
+  Sentry.logger.debug(`Cart total calculated: $${total.toFixed(2)}`);
+
   return aggregate;
 };
 
@@ -127,7 +133,13 @@ const CartScreen = ({
 
   React.useEffect(() => {
     fetch(`${BACKEND_URL}/success`); // exists just to add span data to demo
-  }, []);
+    const cartItems = Object.values(cartData);
+    Sentry.logger.info('Cart screen viewed', {
+      itemCount: cartItems.length,
+      totalItems: cartItems.reduce((sum, item) => sum + item.quantity, 0),
+      totalValue: cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0),
+    });
+  }, [cartData]);
 
   const recordFullDisplay = !!cartData;
 

src/screens/CheckoutScreen.tsx

@@ -48,9 +48,42 @@ const CheckoutScreen = () => {
   const email = scopeData.user?.email;
 
   const performCheckoutOnServer = async () => {
+    const cartItems = Object.values(cartData);
+    const itemsInCart = cartItems.reduce((sum, item) => sum + item.quantity, 0);
+
+    Sentry.logger.info(`Calculated itemsInCart: ${itemsInCart}`);
+    Sentry.logger.info('Checkout initiated', {
+      itemCount: cartItems.length,
+      totalItems: itemsInCart,
+    });
+
     await Sentry.startSpan(
       {name: 'Submit Checkout Form', forceTransaction: true},
-      async () => {
+      async (span) => {
+        // Log checkout span details
+        const spanContext = span?.spanContext?.() || {};
+        const transaction = Sentry.getCurrentScope().getTransaction();
+        Sentry.logger.info('Checkout span', {
+          _traceId: transaction?.traceId || spanContext.traceId,
+          _spanId: spanContext.spanId,
+          _startTime: Date.now() / 1000,
+          _attributes: {
+            cartItemCount: cartItems.length,
+            totalItems: itemsInCart,
+          },
+        });
+
+        // Log detailed cart contents
+        Sentry.logger.info('Checkout called with cart', {
+          items: cartItems.map((item) => ({
+            id: item.id,
+            title: item.title,
+            description: item.description,
+            price: item.price,
+            quantity: item.quantity,
+          })),
+        });
+
         // Span starts here
         let data = await placeOrder(Toast);
 
@@ -59,6 +92,9 @@ const CheckoutScreen = () => {
           () => {
             // Child span starts here and ends when the function returns
             console.log('Processing shopping cart result...', data);
+            Sentry.logger.debug('Processing shopping cart result', {
+              responseStatus: data?.status,
+            });
           },
         );
         // Span ends with the function returning
@@ -79,12 +115,24 @@ const CheckoutScreen = () => {
       }
     });
 
+    const totalQuantity = Object.values(quantities).reduce(
+      (sum: number, qty: number) => sum + qty,
+      0,
+    ) as number;
+    Sentry.logger.info(`Adding quantity: ${totalQuantity}`);
+
     const data = {
       // This is the data structure implemented by application-monitoring-react and flask
       cart: {items: cart, quantities},
       form: contactInfoData,
     };
 
+    Sentry.logger.debug('Sending checkout request', {
+      itemCount: cart.length,
+      endpoint: `${BACKEND_URL}/checkout`,
+      cart: JSON.stringify(data.cart),
+    });
+
     let response = await fetch(`${BACKEND_URL}/checkout`, {
       method: 'POST',
       headers: {
@@ -95,6 +143,10 @@ const CheckoutScreen = () => {
       },
       body: JSON.stringify(data),
     }).catch((err) => {
+      Sentry.logger.error('Checkout request failed', {
+        error: err.message,
+        endpoint: `${BACKEND_URL}/checkout`,
+      });
       throw new Error(err);
     });
     setOrderStatusUI(false);
@@ -107,14 +159,23 @@ const CheckoutScreen = () => {
           })
         : null;
 
+      const errorMessage = `${response.status} - ${response.statusText || 'INTERNAL SERVER ERROR'}`;
+      Sentry.logger.error(`Error: ${errorMessage}`, {
+        status: response.status,
+        statusText: response.statusText || 'INTERNAL SERVER ERROR',
+        itemCount: cart.length,
+      });
+
       Sentry.captureException(
-        new Error(
-          response.status +
-            ' - ' +
-            (response.statusText || ' INTERNAL SERVER ERROR'),
-        ),
+        new Error(errorMessage),
       );
     } else {
+      Sentry.logger.info('Checkout completed successfully', {
+        status: response.status,
+        itemCount: cart.length,
+        totalValue: cart.reduce((sum, item) => sum + item.price * item.quantity, 0),
+      });
+
       uiToast
         ? uiToast.show({
             type: 'success',

src/screens/HomeScreen.tsx

@@ -46,18 +46,32 @@ const EmpowerPlant = ({navigation}: StackScreenProps<RootStackParamList>) => {
       email: email ?? '',
       'Content-Type': 'application/json',
     };
+    Sentry.logger.debug('Loading products', {
+      endpoint: `${BACKEND_URL}/products`,
+    });
+
     fetch(`${BACKEND_URL}/products`, {
       method: 'GET',
       headers,
     })
       .then((response) => response.json())
       .then((json) => {
         setProductData(json);
+        Sentry.logger.info('Products loaded', {
+          productCount: json.length,
+        });
       })
-      .catch((err) => console.log('> api Erorr: ', err));
+      .catch((err) => {
+        Sentry.logger.error('Failed to load products', {
+          error: err.message,
+          endpoint: `${BACKEND_URL}/products`,
+        });
+        console.log('> api Erorr: ', err);
+      });
   };
 
   React.useEffect(() => {
+    Sentry.logger.info('Home screen viewed');
     loadData(); // this line is not blocking
   }, []);
 
@@ -74,6 +88,10 @@ const EmpowerPlant = ({navigation}: StackScreenProps<RootStackParamList>) => {
   const recordFullDisplay = !!toolData;
 
   const onProductCardPress = (item: Product) => {
+    Sentry.logger.info('Product card pressed', {
+      productId: item.id,
+      productTitle: item.title,
+    });
     navigation.navigate('ProductDetail', item);
   };
 

src/screens/ProductDetailScreen.tsx

@@ -31,6 +31,16 @@ const ProductDetailScreen = ({
   const showProductDetail = !!params;
   const onClosePress = () => navigation.goBack();
 
+  React.useEffect(() => {
+    if (params) {
+      Sentry.logger.info('Product detail viewed', {
+        productId: params.id,
+        productTitle: params.title,
+        price: params.price,
+      });
+    }
+  }, [params]);
+
   useEffect(() => {
     fetch(`${BACKEND_URL}/success`); // Extra fetch to add spans to the demo
   }, []);
@@ -67,6 +77,15 @@ const ProductDetail = (props: Product) => {
         imgcropped: props.imgcropped,
       },
     });
+    Sentry.logger.info(
+      Sentry.logger.fmt`'${props.title}' added to cart from product detail`,
+      {
+        productId: props.id,
+        productTitle: props.title,
+        price: props.price,
+        productType: props.type,
+      },
+    );
   };
 
   return (