diff --git a/react/src/components/About.js b/react/src/components/About.js index 3d53aac4..8be3ddb8 100644 --- 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 index e56c80c9..59e2bc5c 100644 --- 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 index f5f21e24..4e383b90 100644 --- 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 index 9f47a2ca..0437a223 100644 --- 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 index 708c562d..69089501 100644 --- 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 index d5d3418d..df6a29f2 100644 --- 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(); }