add query param for frontend only slowdown (triggers quicker backend …

…products fetch)
sentry-demos · Nov 1, 2023 · 0d86f9b · 0d86f9b
1 parent 8ad6c09
commit 0d86f9b
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 14 deletions.
diff --git a/react/src/components/Products.js b/react/src/components/Products.js
@@ -19,13 +19,18 @@ class Products extends Component {
 
   // getProducts handles error responses differently, depending on the browser used
   async getProducts() {
-    let se, customerType, email;
+    let se, customerType, email, frontendSlowdown;
     Sentry.withScope(function (scope) {
-      [se, customerType] = [scope._tags.se, scope._tags.customerType];
+      const tags = scope._tags;
+      [se, customerType, frontendSlowdown] = [
+        tags.se,
+        tags.customerType,
+        tags.frontendSlowdown,
+      ];
       email = scope._user.email;
     });
 
-    ['/api', '/connect', '/organization'].forEach((endpoint) => {
+    [('/api', '/connect', '/organization')].forEach((endpoint) => {
       fetch(this.props.backend + endpoint, {
         method: 'GET',
         headers: {
@@ -40,7 +45,13 @@ class Products extends Component {
       });
     });
 
-    let result = await fetch(this.props.backend + '/products', {
+    // 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.
+    const productsEndpoint = frontendSlowdown ? '/products-join' : '/products';
+    console.log(`productsEndpoint: ${productsEndpoint}`);
+    let result = await fetch(this.props.backend + productsEndpoint, {
+      method: 'GET',
       method: 'GET',
       headers: { se, customerType, email, 'Content-Type': 'application/json' },
     }).catch((err) => {
@@ -66,10 +77,15 @@ class Products extends Component {
     try {
       products = await this.getProducts();
       // take first 4 products because that's all we have img/title/description for
-      this.props.setProducts(Array(200/4).fill(products.slice(0, 4)).flat().map((p, n) => {
-        p.id = n
-        return p
-      }));
+      this.props.setProducts(
+        Array(200 / 4)
+          .fill(products.slice(0, 4))
+          .flat()
+          .map((p, n) => {
+            p.id = n;
+            return p;
+          })
+      );
     } catch (err) {
       Sentry.captureException(new Error('app unable to load products: ' + err));
     }
@@ -80,7 +96,7 @@ class Products extends Component {
     return products.length > 0 ? (
       <div>
         <ul className="products-list">
-          {products.map((product,i) => {
+          {products.map((product, i) => {
             const averageRating = (
               product.reviews.reduce((a, b) => a + (b['rating'] || 0), 0) /
               product.reviews.length

diff --git a/react/src/index.js b/react/src/index.js
@@ -166,9 +166,7 @@ class App extends Component {
     let queryParams = new URLSearchParams(history.location.search);
 
     // Set desired backend
-    let backendTypeParam = new URLSearchParams(history.location.search).get(
-      'backend'
-    );
+    let backendTypeParam = queryParams.get('backend');
     const backendType = determineBackendType(backendTypeParam);
     BACKEND_URL = determineBackendUrl(backendType, ENVIRONMENT);
 
@@ -190,9 +188,16 @@ class App extends Component {
         scope.setTag('se', queryParams.get('se'));
         // for use in Checkout.js when deciding whether to pre-fill form
         // lasts for as long as the tab is open
-        sessionStorage.setItem('se', queryParams.get('se'));  
+        sessionStorage.setItem('se', queryParams.get('se'));
       }
 
+      if (queryParams.get('frontendSlowdown') === 'true') {
+        console.log('> frontend-only slowdown: true');
+        scope.setTag('frontendSlowdown', true);
+      } else {
+        console.log('> frontend + backend slowdown');
+        scope.setTag('frontendSlowdown', false);
+      }
       if (queryParams.get('userFeedback')) {
         sessionStorage.setItem('userFeedback', queryParams.get('userFeedback'));
       } else {
@@ -207,7 +212,34 @@ class App extends Component {
         email = queryParams.get('userEmail');
       } else {
         // making fewer emails so event and user counts for an Issue are not the same
-        let array=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',];
+        let array = [
+          'a',
+          'b',
+          'c',
+          'd',
+          'e',
+          'f',
+          'g',
+          'h',
+          'i',
+          'j',
+          'k',
+          'l',
+          'm',
+          'n',
+          'o',
+          'p',
+          'q',
+          'r',
+          's',
+          't',
+          'u',
+          'v',
+          'w',
+          'x',
+          'y',
+          'z',
+        ];
         let a = array[Math.floor(Math.random() * array.length)];
         let b = array[Math.floor(Math.random() * array.length)];
         let c = array[Math.floor(Math.random() * array.length)];