<script>
// —— STEP 1: Intercept fetch() calls ——
(function(){
  // keep a reference to the original window.fetch
  const _origFetch = window.fetch;
  if (!_origFetch) return;

  window.fetch = async function(resource, init) {
    // call the real fetch
    const res = await _origFetch.call(this, resource, init);

    // look for the recommendation endpoint
    if (typeof resource === 'string' && resource.includes('/recommendation?')) {
      // clone() so the SDK can still consume the body
      res.clone().json()
        .then(payload => {
          console.log('%c[Recs JSON - fetch interceptor]', 'color: teal', payload);
        })
        .catch(err => {
          console.warn('[Recs JSON parse error]', err);
        });
    }
    return res;
  };
})();

// —— STEP 2: Intercept XHR calls ——
(function(){
  const _origOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function(method, url, async, user, pw) {
    // whenever someone opens a recs URL…
    if (typeof url === 'string' && url.includes('/recommendation?')) {
      this.addEventListener('load', function() {
        try {
          const json = JSON.parse(this.responseText);
          console.log('%c[Recs JSON - XHR interceptor]', 'color: purple', json);
        } catch (e) {
          console.warn('[Recs XHR parse error]', e);
        }
      });
    }
    return _origOpen.call(this, method, url, async, user, pw);
  };
})();
</script>