Squashed update metrics with span attributes

Author: gid-sentry

env-config/example.env

@@ -1,5 +1,20 @@
 SENTRY_ORG=
 
+NEXT_PUBLIC_DSN=
+NEXT_PUBLIC_ENVIRONMENT=
+NEXT_RELEASE_PACKAGE_NAME=
+NEXT_SENTRY_PROJECT=
+NEXT_SOURCEMAPS_DIR=build/static/js
+NEXT_SOURCEMAPS_URL_PREFIX=~/static/js
+NEXT_PUBLIC_FLASK_BACKEND=
+NEXT_PUBLIC_EXPRESS_BACKEND=
+NEXT_PUBLIC_SPRINGBOOT_BACKEND=
+NEXT_PUBLIC_ASPNETCORE_BACKEND=
+NEXT_PUBLIC_LARAVEL_BACKEND=
+NEXT_PUBLIC_RUBY_BACKEND=
+NEXT_PUBLIC_RUBYONRAILS_BACKEND=
+NEXT_LOCAL_PORT=3000  # only needed in local.env
+
 REACT_APP_DSN=
 REACT_APP_ENGINE_SERVICE=
 REACT_APP_ENVIRONMENT=
@@ -78,4 +93,4 @@ CRONSPYTHON_APP_DSN=
 CRONSPYTHON_MONITOR_SLUG=
 CRONSPYTHON_DEPLOY_HOST=
 CRONSPYTHON_DEPLOY_DIR=
-CRONSPYTHON_CRONTAB_USER= # if change this must clear crontab for previus user or will have 2 running simult.
+CRONSPYTHON_CRONTAB_USER= # if change this must clear crontab for previus user or will have 2 running simult.

react/config-overrides.js

@@ -0,0 +1,25 @@
+const SentryWebpackPlugin = require('@sentry/webpack-plugin');
+const reactsourceMapPlugin = require('@acemarke/react-prod-sourcemaps');
+
+module.exports = function override(config, env) {
+  //do stuff with the webpack config...
+  config.plugins.push(
+    reactsourceMapPlugin.WebpackReactSourcemapsPlugin({
+      mode: 'strict',
+    })
+  );
+
+  config.plugins.push(
+    SentryWebpackPlugin.sentryWebpackPlugin({
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      include: '.',
+      org: 'demo',
+      project: 'javascript-react',
+      ignoreFile: '.sentrycliignore',
+      ignore: ['webpack.config.js'],
+      configFile: 'sentry.properties',
+      reactComponentAnnotation: {enabled:true},
+    })
+  );
+  return config;
+};

react/src/components/Cart.jsx

@@ -4,8 +4,15 @@ import * as Sentry from '@sentry/react';
 import Button from './ButtonLink';
 import { connect } from 'react-redux';
 import { setProducts, addProduct, removeProduct } from '../actions';
+import countItemsInCart from '../utils/cart';
 
 function Cart({ cart, removeProduct, addProduct }) {
+  console.log("Cart component rendered with cart:", cart);
+  const itemsInCart = countItemsInCart(cart);
+  console.log("Items in cart calculated in Cart component:", itemsInCart);
+  const span = Sentry.startInactiveSpan({ name: "items_added_to_cart", op: "function"});
+  span.setAttribute("items_in_cart", itemsInCart);
+  span.end();
   return (
     <div className="cart-container">
       <h2 className="sentry-unmask">Cart</h2>

react/src/components/Checkout.jsx

@@ -5,6 +5,7 @@ import './checkout.css';
 import * as Sentry from '@sentry/react';
 import { connect } from 'react-redux';
 import Loader from 'react-loader-spinner';
+import countItemsInCart from '../utils/cart';
 
 function Checkout({ backend, rageclick, cart }) {
   const navigate = useNavigate();
@@ -40,7 +41,12 @@ function Checkout({ backend, rageclick, cart }) {
   const [form, setForm] = useState(initialFormValues);
 
   async function checkout(cart, checkout_span) {
-    checkout_span.setAttribute("checkout.click.span", 1);
+    console.log("Checkout called with cart:", cart);
+    console.log("Cart quantities:", cart.quantities);
+    const itemsInCart = countItemsInCart(cart);
+    console.log("Calculated itemsInCart:", itemsInCart);
+    checkout_span.setAttribute("checkout.click", 1);
+    checkout_span.setAttribute("items_at_checkout", itemsInCart);
     const stopMeasurement = measureRequestDuration('/checkout');
     const response = await fetch(backend + '/checkout?v2=true', {
       method: 'POST',

react/src/components/Products.jsx

@@ -40,7 +40,6 @@ function Products({ frontendSlowdown, backend }) {
 
   // intentionally supposed to be slow
   function renderProducts(data) {
-    console.log(Sentry.getActiveSpan())
     try {
       // Trigger a Sentry 'Performance Issue' in the case of
       // a frontend slowdown
@@ -80,7 +79,7 @@ function Products({ frontendSlowdown, backend }) {
     related to the async keyword + babel transform, hence why it probably got
     fixed with hooks (no transform on that class method anymore)"
   */
-  function getProducts(frontendSlowdown) {
+  async function getProducts(frontendSlowdown) {
     [('/api', '/connect', '/organization')].forEach((endpoint, activeSpan) => {
       fetch(backend + endpoint, {
         method: 'GET',
@@ -91,70 +90,32 @@ function Products({ frontendSlowdown, backend }) {
       });
     });
     const productsEndpoint = determineProductsEndpoint();
-    const stopMeasurement = measureRequestDuration(productsEndpoint);
-    fetch(backend + productsEndpoint, {
-      method: 'GET',
-      headers: { 'Content-Type': 'application/json' },
-    })
-    .then((result) => {
-      if (!result.ok) {
+    Sentry.startSpan({ name: "Fetch Products"}, async (span) => {
+      const stopMeasurement = measureRequestDuration(productsEndpoint, span);
+      const response = await fetch(backend + productsEndpoint, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
+      const data = await response.json();
+
+      if (!response.ok) {
         Sentry.setContext('err', {
-          status: result.status,
-          statusText: result.statusText,
+          status: response.status,
+          statusText: response.statusText,
         });
-        return Promise.reject();
-      } else {
-        return result.json();
+        return;
       }
+      renderProducts(data);
+      stopMeasurement();
     })
-    .then(renderProducts)
-    .catch((err) => {
-      return { ok: false, status: 500 };
-    }).then((res) => {
-      stopMeasurement()
-      return res
-    });
-
-    /*
-
-    // When triggering a frontend-only slowdown, use the products-join endpoint
-    // because it returns product data with a fast backend response.
-    // Otherwise use the /products endpoint, which provides a slow backend response.
-    Sentry.withActiveSpan(null, () => {
-      Sentry.startSpan({ name: "Products" }, () => {
-        const productsEndpoint = determineProductsEndpoint();
-        const stopMeasurement = measureRequestDuration(productsEndpoint);
-        fetch(backend + productsEndpoint, {
-          method: 'GET',
-          headers: { 'Content-Type': 'application/json' },
-        })
-        .then((result) => {
-          if (!result.ok) {
-            Sentry.setContext('err', {
-              status: result.status,
-              statusText: result.statusText,
-            });
-            return Promise.reject();
-          } else {
-            return result.json();
-          }
-        })
-        .then(renderProducts)
-        .catch((err) => {
-          return { ok: false, status: 500 };
-        }).then((res) => {
-          stopMeasurement()
-          return res
-        });
-      })
-    })*/
-    
   }
 
   useEffect(() => {
-    Sentry.startSpan({ name: "Fetch Products"}, () => {
-      getProducts(frontendSlowdown);
-    })
+     try {
+      getProducts(frontendSlowdown)
+     } catch (error) {
+      Sentry.captureException(error)
+     }
   }, []);
 
   return products.length > 0 ? (

react/src/utils/cart.js

@@ -0,0 +1,21 @@
+export default function countItemsInCart(cart) {
+    console.log("countItemsInCart called with:", cart);
+    let totalItems = 0;
+    
+    if (!cart || !cart.quantities) {
+        console.log("Cart or cart.quantities is undefined!");
+        return totalItems;
+    }
+
+    console.log("Cart quantities object:", cart.quantities);
+    console.log("Object.values(cart.quantities):", Object.values(cart.quantities));
+    
+    totalItems = Object.values(cart.quantities)
+        .reduce((sum, quantity) => {
+            console.log("Adding quantity:", quantity);
+            return sum + quantity;
+        }, 0);
+
+    console.log("Final total:", totalItems);
+    return totalItems;
+}