[react] automatically propagete tags (se, etc.) as headers for all fe…

…tch requests
sentry-demos · Nov 24, 2023 · 64676ab · 64676ab
1 parent 604aee0
commit 64676ab
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 43 deletions.
diff --git a/react/src/components/About.js b/react/src/components/About.js
@@ -25,24 +25,15 @@ class About extends Component {
   }
 
   async componentDidMount() {
-    let se, customerType, email;
-    Sentry.withScope(function (scope) {
-      [se, customerType] = [scope._tags.se, scope._tags.customerType];
-      email = scope._user.email;
-    });
-
     // Http requests to make in parallel, so the Transaction has more Spans
     let request1 = fetch(this.props.backend + '/api', {
       method: 'GET',
-      headers: { se, customerType, email, 'Content-Type': 'application/json' },
     });
     let request2 = fetch(this.props.backend + '/organization', {
       method: 'GET',
-      headers: { se, customerType, email, 'Content-Type': 'application/json' },
     });
     let request3 = fetch(this.props.backend + '/connect', {
       method: 'GET',
-      headers: { se, customerType, email, 'Content-Type': 'application/json' },
     });
 
     // Need Safari13 in tests/config.py in order for this modern javascript to work in Safari Browser

diff --git a/react/src/components/Checkout.js b/react/src/components/Checkout.js
@@ -38,15 +38,9 @@ function Checkout(props) {
   const [form, setForm] = useState(initialFormValues);
 
   async function checkout(cart) {
-    let se, customerType, email;
-    Sentry.withScope(function (scope) {
-      [se, customerType] = [scope._tags.se, scope._tags.customerType];
-      email = scope._user.email;
-    });
-
     const response = await fetch(props.backend + '/checkout?v2=true', {
       method: 'POST',
-      headers: { se, customerType, email, 'Content-Type': 'application/json' },
+      headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         cart: cart,
         form: form,

diff --git a/react/src/components/Home.js b/react/src/components/Home.js
@@ -12,19 +12,11 @@ class Home extends Component {
   static contextType = Context;
 
   async componentDidMount() {
-    let se, customerType, email;
-    Sentry.withScope(function (scope) {
-      [se, customerType] = [scope._tags.se, scope._tags.customerType];
-      email = scope._user.email;
-    });
     try {
       // This should be the only http request for home page, for health check purposes
       await fetch(this.props.backend + '/success', {
         method: 'GET',
         headers: {
-          se,
-          customerType,
-          email,
           'Content-Type': 'application/json',
         },
       });

diff --git a/react/src/components/Products.js b/react/src/components/Products.js
@@ -19,19 +19,10 @@ class Products extends Component {
 
   // getProducts handles error responses differently, depending on the browser used
   async getProducts(frontendSlowdown) {
-    let se, customerType, email;
-    Sentry.withScope(function (scope) {
-      [se, customerType] = [scope._tags.se, scope._tags.customerType];
-      email = scope._user.email;
-    });
-
     [('/api', '/connect', '/organization')].forEach((endpoint) => {
       fetch(this.props.backend + endpoint, {
         method: 'GET',
         headers: {
-          se,
-          customerType,
-          email,
           'Content-Type': 'application/json',
         },
       }).catch((err) => {
@@ -47,8 +38,7 @@ class Products extends Component {
     console.log(`productsEndpoint: ${productsEndpoint}`);
     let result = await fetch(this.props.backend + productsEndpoint, {
       method: 'GET',
-      method: 'GET',
-      headers: { se, customerType, email, 'Content-Type': 'application/json' },
+      headers: { 'Content-Type': 'application/json' },
     }).catch((err) => {
       return { ok: false, status: 500 };
     });

diff --git a/react/src/components/ProductsJoin.js b/react/src/components/ProductsJoin.js
@@ -12,15 +12,9 @@ class ProductsJoin extends Component {
 
   // getProductsJoin handles error responses differently, depending on the browser used
   async getProductsJoin() {
-    let se, customerType, email;
-    Sentry.withScope(function (scope) {
-      [se, customerType] = [scope._tags.se, scope._tags.customerType];
-      email = scope._user.email;
-    });
-
     let result = await fetch(this.props.backend + '/products-join', {
       method: 'GET',
-      headers: { se, customerType, email, 'Content-Type': 'application/json' },
+      headers: { 'Content-Type': 'application/json' },
     }).catch((err) => {
       return { ok: false, status: 500 };
     });

diff --git a/react/src/index.js b/react/src/index.js
@@ -173,7 +173,7 @@ class App extends Component {
 
     console.log(`> backendType: ${backendType} | backendUrl: ${BACKEND_URL}`);
 
-    // These also get passed via request headers
+    // These also get passed via request headers (see window.fetch below)
     Sentry.configureScope((scope) => {
       const customerType = [
         'medium-plan',
@@ -250,6 +250,23 @@ class App extends Component {
       scope.setUser({ email: email });
     });
 
+    // Automatically append `se`, `customerType` and `userEmail` query params to all requests
+    // (except for requests to Sentry)
+    const nativeFetch = window.fetch;
+    window.fetch = function(...args) {
+      let url = args[0];
+      let ignore_match = url.match(/^http[s]:\/\/([^.]+\.ingest\.sentry\.io\/|localhost:9989|127.0.0.1:9989).*/);
+      if (!ignore_match) {
+        Sentry.withScope(function (scope) {
+          let se, customerType, email;
+          [se, customerType] = [scope._tags.se, scope._tags.customerType];
+          email = scope._user.email;
+          args[1].headers = {...args[1].headers, se, customerType, email};
+        });
+      }
+      return nativeFetch.apply(window, args);
+    };
+
     // Crasher parses query params sent by /tests for triggering crashes for Release Health
     crasher();
   }