Fix metadata (se, email) sent in headers to backend request (#542)

react/src/index.js

@@ -164,18 +164,27 @@ class App extends Component {
     console.log(`> backendType: ${backendType} | backendUrl: ${BACKEND_URL}`);
 
     // These also get passed via request headers (see window.fetch below)
+
+    // NOTE: because the demo extracts tags from the scope in order to pass them
+    // as headers to the backend, we need to make sure we are calling `setTag()`
+    // on the current scope. We don't want to call Sentry.setTag() as is usually
+    // recommended (https://docs.sentry.io/platforms/javascript/enriching-events/scopes/#isolation-scope),
+    // because that would set the tag on the isolation scope, and make it inaccessible
+    // when it's time to set the headers.
+    let currentScope = Sentry.getCurrentScope()
+
     const customerType = [
       'medium-plan',
       'large-plan',
       'small-plan',
       'enterprise',
     ][Math.floor(Math.random() * 4)];
-    Sentry.setTag('customerType', customerType);
+    currentScope.setTag('customerType', customerType);
 
     if (queryParams.get('se')) {
       // Route components (navigation changes) will now have 'se' tag on scope
       console.log('> src/index.js se', queryParams.get('se'));
-      Sentry.setTag('se', queryParams.get('se'));
+      currentScope.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'));
@@ -184,10 +193,10 @@ class App extends Component {
     if (queryParams.get('frontendSlowdown') === 'true') {
       console.log('> frontend-only slowdown: true');
       FRONTEND_SLOWDOWN = true;
-      Sentry.setTag('frontendSlowdown', true);
+      currentScope.setTag('frontendSlowdown', true);
     } else {
       console.log('> frontend + backend slowdown');
-      Sentry.setTag('frontendSlowdown', false);
+      currentScope.setTag('frontendSlowdown', false);
     }
 
     if (queryParams.get('rageclick') === 'true') {
@@ -201,7 +210,7 @@ class App extends Component {
     }
     sessionStorage.removeItem('lastErrorEventId');
 
-    Sentry.setTag('backendType', backendType);
+    currentScope.setTag('backendType', backendType);
 
     let email = null;
     if (queryParams.get('userEmail')) {
@@ -241,7 +250,7 @@ class App extends Component {
       let c = array[Math.floor(Math.random() * array.length)];
       email = a + b + c + '@example.com';
     }
-    Sentry.setUser({ email: email });
+    currentScope.setUser({ email: email });
 
     // Automatically append `se`, `customerType` and `userEmail` query params to all requests
     // (except for requests to Sentry)