Proof-of-concept using pako to compress request data with zlib, and set Content-Type/Content-Encoding headers. (Doesn't work though.)

Author: ndbroadbent

index.js

@@ -1,4 +1,199 @@
 const stringify = require("./vendor/json-stringify-safe/stringify");
+const pako = require('pako');
+
+// This is to be defensive in environments where window does not exist (see https://github.com/getsentry/raven-js/pull/785)
+const _window =
+  typeof window !== 'undefined'
+    ? window
+    : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+/**
+ * hasKey, a better form of hasOwnProperty
+ * Example: hasKey(MainHostObject, property) === true/false
+ *
+ * @param {Object} host object to check property
+ * @param {string} key to check
+ */
+function hasKey(object, key) {
+  return Object.prototype.hasOwnProperty.call(object, key);
+}
+
+function isUndefined(what) {
+  return what === void 0;
+}
+
+function each(obj, callback) {
+  var i, j;
+
+  if (isUndefined(obj.length)) {
+    for (i in obj) {
+      if (hasKey(obj, i)) {
+        callback.call(null, i, obj[i]);
+      }
+    }
+  } else {
+    j = obj.length;
+    if (j) {
+      for (i = 0; i < j; i++) {
+        callback.call(null, i, obj[i]);
+      }
+    }
+  }
+}
+
+function supportsFetch() {
+  if (!('fetch' in _window)) return false;
+
+  try {
+    new Headers(); // eslint-disable-line no-new
+    new Request(''); // eslint-disable-line no-new
+    new Response(); // eslint-disable-line no-new
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function urlencode(o) {
+  var pairs = [];
+  each(o, function(key, value) {
+    pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
+  });
+  return pairs.join('&');
+}
+
+function objectMerge(obj1, obj2) {
+  if (!obj2) {
+    return obj1;
+  }
+  each(obj2, function(key, value) {
+    obj1[key] = value;
+  });
+  return obj1;
+}
+
+
+// Unfortunately, this doesn't work at the moment, because Sentry doesn't allow us to
+// send a Content-Encoding header. The CORS preflight request returns:
+//
+//    Access-Control-Allow-Headers: X-Sentry-Auth, X-Requested-With,
+//        Origin, Accept, Content-Type, Authentication
+//
+// (Content-Encoding is missing.)
+//
+// Also it might be dangerous for them to support gzip/deflate, because people could
+// send gzip bombs (a tiny amount of compressed data that expands to gigabytes on disk)
+// But maybe there's a decompression library that can be configured to abort after a max size.
+
+const makeRequestWithZlib = function(opts, shouldSendRequest) {
+  // Auth is intentionally sent as part of query string (NOT as custom HTTP header) to avoid preflight CORS requests
+  var url = opts.url + '?' + urlencode(opts.auth);
+
+  var evaluatedHeaders = null;
+  var evaluatedFetchParameters = {};
+
+  if (opts.options.headers) {
+    evaluatedHeaders = this._evaluateHash(opts.options.headers);
+  }
+
+  if (opts.options.fetchParameters) {
+    evaluatedFetchParameters = this._evaluateHash(opts.options.fetchParameters);
+  }
+
+  const requestJSON = stringify(opts.data);
+  const requestDeflate = pako.deflate(requestJSON, { to: 'string' });
+
+  if (shouldSendRequest && !shouldSendRequest(requestDeflate)) {
+    return;
+  }
+
+  if (supportsFetch()) {
+    var defaultFetchOptions = objectMerge({}, this._fetchDefaults);
+    var fetchOptions = objectMerge(defaultFetchOptions, evaluatedFetchParameters);
+
+    if (evaluatedHeaders) {
+      fetchOptions.headers = evaluatedHeaders;
+    }
+
+    evaluatedFetchParameters.body = requestDeflate
+
+    fetchOptions.headers = Object.assign(fetchOptions.headers || {}, {
+      'Content-Type': 'application/json; charset=utf-8',
+      'Content-Encoding': 'deflate',
+    })
+
+    return _window
+      .fetch(url, fetchOptions)
+      .then(function(response) {
+        if (response.ok) {
+          opts.onSuccess && opts.onSuccess();
+        } else {
+          var error = new Error('Sentry error code: ' + response.status);
+          // It's called request only to keep compatibility with XHR interface
+          // and not add more redundant checks in setBackoffState method
+          error.request = response;
+          opts.onError && opts.onError(error);
+        }
+      })
+      ['catch'](function() {
+        opts.onError &&
+          opts.onError(new Error('Sentry error code: network unavailable'));
+      });
+  }
+
+  var request = _window.XMLHttpRequest && new _window.XMLHttpRequest();
+  if (!request) return;
+
+  // if browser doesn't support CORS (e.g. IE7), we are out of luck
+  var hasCORS = 'withCredentials' in request || typeof XDomainRequest !== 'undefined';
+
+  if (!hasCORS) return;
+
+  if ('withCredentials' in request) {
+    request.onreadystatechange = function() {
+      if (request.readyState !== 4) {
+        return;
+      } else if (request.status === 200) {
+        opts.onSuccess && opts.onSuccess();
+      } else if (opts.onError) {
+        var err = new Error('Sentry error code: ' + request.status);
+        err.request = request;
+        opts.onError(err);
+      }
+    };
+  } else {
+    request = new XDomainRequest();
+    // xdomainrequest cannot go http -> https (or vice versa),
+    // so always use protocol relative
+    url = url.replace(/^https?:/, '');
+
+    // onreadystatechange not supported by XDomainRequest
+    if (opts.onSuccess) {
+      request.onload = opts.onSuccess;
+    }
+    if (opts.onError) {
+      request.onerror = function() {
+        var err = new Error('Sentry error code: XDomainRequest');
+        err.request = request;
+        opts.onError(err);
+      };
+    }
+  }
+
+  request.open('POST', url);
+
+  if (evaluatedHeaders) {
+    each(evaluatedHeaders, function(key, value) {
+      request.setRequestHeader(key, value);
+    });
+  }
+
+  request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
+  request.setRequestHeader('Content-Encoding', 'deflate');
+
+  request.send(requestDeflate);
+}
+
 
 const identity = x => x;
 const getUndefined = () => {};
@@ -57,18 +252,6 @@ function createRavenMiddleware(Raven, options = {}) {
         const originalTransport = Raven._globalOptions.transport;
         Raven.setTransport(opts => {
           Raven.setTransport(originalTransport);
-          const requestBody = stringify(opts.data);
-          if (requestBody.length > 200000) {
-            // We know the request is too large, so don't try sending it to Sentry.
-            // Retry the capture function, and don't include the state this time.
-            const errorMessage =
-              "Could not send state because request would be larger than 200KB. " +
-              `(Was: ${requestBody.length}B)`;
-            retryCaptureWithoutReduxState(errorMessage, () => {
-              originalFn.apply(Raven, captureArguments);
-            });
-            return;
-          }
           opts.onError = error => {
             if (error.request && error.request.status === 413) {
               const errorMessage =
@@ -78,7 +261,21 @@ function createRavenMiddleware(Raven, options = {}) {
               });
             }
           };
-          (originalTransport || Raven._makeRequest).call(Raven, opts);
+
+          makeRequestWithZlib(opts, (requestBody) => {
+            if (requestBody.length > 200000) {
+              // We know the request is too large, so don't try sending it to Sentry.
+              // Retry the capture function, and don't include the state this time.
+              const errorMessage =
+                "Could not send state because request would be larger than 200KB. " +
+                `(Was: ${requestBody.length}B)`;
+              retryCaptureWithoutReduxState(errorMessage, () => {
+                originalFn.apply(Raven, captureArguments);
+              });
+              return false;
+            }
+            return true;
+          });
         });
         originalFn.apply(Raven, captureArguments);
       };
@@ -91,6 +288,9 @@ function createRavenMiddleware(Raven, options = {}) {
       Raven.captureMessage
     );
 
+    // Set the default transport to use zlib compression
+    Raven.setTransport(makeRequestWithZlib.bind(Raven));
+
     return next => action => {
       // Log the action taken to Raven so that we have narrative context in our
       // error report.

package.json

@@ -2,7 +2,7 @@
   "name": "raven-for-redux",
   "version": "1.3.1",
   "description": "Middleware for propagating Redux state/actions to Sentry via Raven.",
-  "main": "built/index.js",
+  "main": "index.js",
   "scripts": {
     "fix": "eslint --fix .",
     "tdd": "jest --watch",
@@ -64,5 +64,8 @@
         "statements": 100
       }
     }
+  },
+  "dependencies": {
+    "pako": "^1.0.6"
   }
 }