React better metrics (#584)

* [react] New # items in cart metrics + tags for existing metrics

* react fix

react/src/components/Cart.jsx

@@ -4,8 +4,13 @@ import * as Sentry from '@sentry/react';
 import Button from './ButtonLink';
 import { connect } from 'react-redux';
 import { setProducts, addProduct, removeProduct } from '../actions';
+import { getTag, itemsInCart } from '../utils/utils';
 
 function Cart({ cart, removeProduct, addProduct }) {
+
+  let tags = { 'backendType': getTag('backendType'), 'cexp': getTag('cexp') }
+  Sentry.metrics.increment('checkout.items_added_to_cart', itemsInCart(cart), { tags });
+
   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 { getTag, itemsInCart } from '../utils/utils';
 
 function Checkout({ backend, rageclick, checkout_success, cart }) {
   const navigate = useNavigate();
@@ -40,8 +41,11 @@ function Checkout({ backend, rageclick, checkout_success, cart }) {
   }
   const [form, setForm] = useState(initialFormValues);
 
+  let tags = { 'backendType': getTag('backendType'), 'cexp': getTag('cexp') }
+
   async function checkout(cart) {
-    Sentry.metrics.increment('checkout.click');
+    Sentry.metrics.increment('checkout.click', 1, { tags });
+    Sentry.metrics.increment('checkout.items_in_cart', itemsInCart(cart), { tags });
     const stopMeasurement = measureRequestDuration('/checkout');
     const response = await fetch(backend + '/checkout?v2=true', {
       method: 'POST',
@@ -64,15 +68,15 @@ function Checkout({ backend, rageclick, checkout_success, cart }) {
       });
     if (!response.ok) {
       Sentry.metrics.increment('checkout.error', 1, {
-        tags: { status: response.status },
+        tags: { status: response.status, ...tags },
       });
       throw new Error(
         [response.status, response.statusText || ' Internal Server Error'].join(
           ' -'
         )
       );
     }
-    Sentry.metrics.increment('checkout.success');
+    Sentry.metrics.increment('checkout.success', 1, { tags });
     Sentry.metrics.distribution('checkout.order.total', cart.total);
     return response;
   } 

react/src/utils/utils.js

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/react';
+
+function getTag(tag) {
+    return Sentry.getCurrentScope()._tags[tag]
+}
+
+function itemsInCart(cart) {
+    return Object.values(cart).reduce((a, b) => a + b, 0)
+}
+
+export { getTag, itemsInCart };