@commercetools-frontend/sentry 0.0.0-CRAFT-1791-20251006162610

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# @commercetools-frontend/sentry
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@commercetools-frontend/sentry"><img src="https://badgen.net/npm/v/@commercetools-frontend/sentry" alt="Latest release (latest dist-tag)" /></a> <a href="https://www.npmjs.com/package/@commercetools-frontend/sentry"><img src="https://badgen.net/npm/v/@commercetools-frontend/sentry/next" alt="Latest release (next dist-tag)" /></a> <a href="https://bundlephobia.com/result?p=@commercetools-frontend/sentry"><img src="https://badgen.net/bundlephobia/minzip/@commercetools-frontend/sentry" alt="Minified + GZipped size" /></a> <a href="https://github.com/commercetools/merchant-center-application-kit/blob/main/LICENSE"><img src="https://badgen.net/github/license/commercetools/merchant-center-application-kit" alt="GitHub license" /></a>
+</p>
+
+Components to set up Sentry for a MC application.
+
+## Install
+
+```bash
+$ npm install --save @commercetools-frontend/sentry
+```

package/dist/commercetools-frontend-sentry.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVyY2V0b29scy1mcm9udGVuZC1zZW50cnkuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/dist/commercetools-frontend-sentry.cjs.dev.js

@@ -0,0 +1,244 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var Sentry = require('@sentry/react');
+var browser = require('@sentry/browser');
+var history = require('@commercetools-frontend/browser-history');
+var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
+var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
+var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
+var react = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
+var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var Sentry__namespace = /*#__PURE__*/_interopNamespace(Sentry);
+var history__default = /*#__PURE__*/_interopDefault(history);
+var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "24.7.2";
+
+const makeErrorToCapture = error => {
+  if (error instanceof Error) return error;
+  if (error instanceof ErrorEvent) return new Error(error.message);
+  return new Error(_JSON$stringify__default["default"](error.reason || 'Unhandled rejection without a reason'));
+};
+const sendErrorToSentry = error => {
+  if (typeof error === 'string') return Sentry__namespace.captureMessage(error);
+  const errorToCapture = makeErrorToCapture(error);
+  return Sentry__namespace.captureException(errorToCapture);
+};
+const replaceEventValues = (source, replacements) => {
+  const replaceEventValue = prop => {
+    source[prop] = replacements[prop];
+  };
+  for (const prop in source) {
+    if (Object.prototype.hasOwnProperty.call(source, prop)) {
+      var _context;
+      const hasPropReplacement = _includesInstanceProperty__default["default"](_context = _Object$keys__default["default"](replacements)).call(_context, prop);
+      switch (typeof source[prop]) {
+        case 'string':
+          if (hasPropReplacement) {
+            replaceEventValue(prop);
+          }
+          break;
+        case 'object':
+          if (hasPropReplacement) {
+            replaceEventValue(prop);
+          } else {
+            replaceEventValues(source[prop], replacements);
+          }
+          break;
+      }
+    }
+  }
+  return source;
+};
+const redactUnsafeEventFields = event => {
+  return replaceEventValues(event, {
+    firstName: '[Redacted]',
+    lastName: '[Redacted]',
+    email: '[Redacted]'
+  });
+};
+const boot = () => {
+  if (window.app.trackingSentry && window.app.trackingSentry !== 'null') {
+    Sentry__namespace.init({
+      dsn: window.app.trackingSentry,
+      release: window.app.revision,
+      environment: `${window.app.env}-${window.app.location}`,
+      // In order to reduce the noise in sentry we only track errors that come
+      // from our code and ignore errors that come from other services
+      // https://blog.sentry.io/2017/03/27/tips-for-reducing-javascript-error-noise.html
+      allowUrls: [window.app.cdnUrl, window.app.frontendHost],
+      // suppress any resize observer errors, see
+      // https://github.com/vercel/next.js/discussions/51551
+      ignoreErrors: [/ResizeObserver loop (limit exceeded|completed with undelivered notifications)/i],
+      integrations: [browser.globalHandlersIntegration({
+        onunhandledrejection: false,
+        onerror: false
+      }), Sentry__namespace.reactRouterV5BrowserTracingIntegration({
+        history: history__default["default"]
+      })],
+      // Sending 5% of transactions. We can adjust that as we see a need to.
+      // Generally we need to find a balance between performance and data volume.
+      // If we need more flexible and dynamic way of gathering important samples,
+      // we can implement the `tracesSampler` function.
+      // https://docs.sentry.io/platforms/javascript/guides/react/configuration/sampling/#sampling-transaction-events
+      tracesSampleRate: 0.05,
+      beforeSend(event) {
+        return redactUnsafeEventFields(event);
+      }
+    });
+    const sentryScope = Sentry__namespace.getCurrentScope();
+    sentryScope.setTag('role', 'frontend');
+    sentryScope.setTag('applicationName', window.app.applicationName);
+    sentryScope.setTag('service', `merchant-center-frontend-${window.app.applicationName}`);
+  }
+};
+const isExtraAsObject = extrasOrExtra => typeof extrasOrExtra === 'object';
+const reportErrorToSentry = (error, extraInfo, getIsEnabled) => {
+  const isEnabled = getIsEnabled ? getIsEnabled() : Boolean(window.app.trackingSentry);
+  if (typeof error === 'string' && !isEnabled) {
+    console.warn('[SENTRY]: You called "reportErrorToSentry" with a string argument. ' + '"Error" objects should be preferred so that a stack-trace can be made available in Sentry. ' + 'See: https://docs.sentry.io/clients/javascript/usage/#try-catch');
+  }
+  if (isEnabled) {
+    if (extraInfo?.extra) {
+      if (isExtraAsObject(extraInfo.extra)) {
+        // See https://docs.sentry.io/platforms/javascript/react/
+        Sentry__namespace.setExtras(extraInfo.extra);
+      } else {
+        Sentry__namespace.setExtra('extra', extraInfo.extra);
+      }
+    } else if (error instanceof ErrorEvent) {
+      Sentry__namespace.setExtras({
+        filename: error.filename,
+        lineno: error.lineno,
+        colno: error.colno,
+        error: error.error
+      });
+    }
+    // Generate a unique ID referring to the last generated Sentry error
+    const errorId = sendErrorToSentry(error);
+
+    // The error stack should be available in Sentry, so there is no
+    // need to print it in the console as well.
+    // We just notify that an error occurred and provide the error ID.
+    console.error(`[SENTRY]: An error occured (ID: ${errorId}).`);
+    return errorId;
+  }
+  console.error('[SENTRY]:', error);
+  return undefined;
+};
+
+function _callSuper$1(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$1() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function () { return !!t; })(); }
+/**
+ * This component will let sentry know if any information about the user has
+ * changed.
+ */
+let SentryUserTracker = /*#__PURE__*/function (_PureComponent) {
+  function SentryUserTracker() {
+    var _this;
+    _classCallCheck(this, SentryUserTracker);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper$1(this, SentryUserTracker, [...args]);
+    _this.syncUser = () => {
+      if (_this.props.user && window.app.trackingSentry) {
+        // to avoid sending personal data to sentry we anonymize the email address
+        // by only sending the domain part or the email
+        const emailTld = _this.props.user.email.split('@')[1];
+        Sentry__namespace.setUser({
+          email: `xxx@${emailTld}`,
+          id: _this.props.user.id
+        });
+      }
+    };
+    return _this;
+  }
+  _inherits(SentryUserTracker, _PureComponent);
+  return _createClass(SentryUserTracker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // since the user and project could have been loaded from the apollo cache
+      // they could be preset already when mounting
+      this.syncUser();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.syncUser();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+}(react.PureComponent);
+SentryUserTracker.displayName = 'SentryUserTracker';
+
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
+let SentryUserLogoutTracker = /*#__PURE__*/function (_Component) {
+  function SentryUserLogoutTracker() {
+    _classCallCheck(this, SentryUserLogoutTracker);
+    return _callSuper(this, SentryUserLogoutTracker, arguments);
+  }
+  _inherits(SentryUserLogoutTracker, _Component);
+  return _createClass(SentryUserLogoutTracker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // When the user is not logged in anymore (e.g. on logout) we still track
+      // errors but without the user data in context.
+      if (window.app.trackingSentry) {
+        Sentry__namespace.configureScope(scope => {
+          scope.clear();
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+}(react.Component);
+SentryUserLogoutTracker.displayName = 'SentryUserLogoutTracker';
+
+exports.SentryUserLogoutTracker = SentryUserLogoutTracker;
+exports.SentryUserTracker = SentryUserTracker;
+exports.boot = boot;
+exports.redactUnsafeEventFields = redactUnsafeEventFields;
+exports.reportErrorToSentry = reportErrorToSentry;
+exports.version = version;

package/dist/commercetools-frontend-sentry.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-frontend-sentry.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-frontend-sentry.cjs.dev.js");
+}

package/dist/commercetools-frontend-sentry.cjs.prod.js

@@ -0,0 +1,244 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var Sentry = require('@sentry/react');
+var browser = require('@sentry/browser');
+var history = require('@commercetools-frontend/browser-history');
+var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
+var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
+var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
+var react = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
+var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var Sentry__namespace = /*#__PURE__*/_interopNamespace(Sentry);
+var history__default = /*#__PURE__*/_interopDefault(history);
+var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "24.7.2";
+
+const makeErrorToCapture = error => {
+  if (error instanceof Error) return error;
+  if (error instanceof ErrorEvent) return new Error(error.message);
+  return new Error(_JSON$stringify__default["default"](error.reason || 'Unhandled rejection without a reason'));
+};
+const sendErrorToSentry = error => {
+  if (typeof error === 'string') return Sentry__namespace.captureMessage(error);
+  const errorToCapture = makeErrorToCapture(error);
+  return Sentry__namespace.captureException(errorToCapture);
+};
+const replaceEventValues = (source, replacements) => {
+  const replaceEventValue = prop => {
+    source[prop] = replacements[prop];
+  };
+  for (const prop in source) {
+    if (Object.prototype.hasOwnProperty.call(source, prop)) {
+      var _context;
+      const hasPropReplacement = _includesInstanceProperty__default["default"](_context = _Object$keys__default["default"](replacements)).call(_context, prop);
+      switch (typeof source[prop]) {
+        case 'string':
+          if (hasPropReplacement) {
+            replaceEventValue(prop);
+          }
+          break;
+        case 'object':
+          if (hasPropReplacement) {
+            replaceEventValue(prop);
+          } else {
+            replaceEventValues(source[prop], replacements);
+          }
+          break;
+      }
+    }
+  }
+  return source;
+};
+const redactUnsafeEventFields = event => {
+  return replaceEventValues(event, {
+    firstName: '[Redacted]',
+    lastName: '[Redacted]',
+    email: '[Redacted]'
+  });
+};
+const boot = () => {
+  if (window.app.trackingSentry && window.app.trackingSentry !== 'null') {
+    Sentry__namespace.init({
+      dsn: window.app.trackingSentry,
+      release: window.app.revision,
+      environment: `${window.app.env}-${window.app.location}`,
+      // In order to reduce the noise in sentry we only track errors that come
+      // from our code and ignore errors that come from other services
+      // https://blog.sentry.io/2017/03/27/tips-for-reducing-javascript-error-noise.html
+      allowUrls: [window.app.cdnUrl, window.app.frontendHost],
+      // suppress any resize observer errors, see
+      // https://github.com/vercel/next.js/discussions/51551
+      ignoreErrors: [/ResizeObserver loop (limit exceeded|completed with undelivered notifications)/i],
+      integrations: [browser.globalHandlersIntegration({
+        onunhandledrejection: false,
+        onerror: false
+      }), Sentry__namespace.reactRouterV5BrowserTracingIntegration({
+        history: history__default["default"]
+      })],
+      // Sending 5% of transactions. We can adjust that as we see a need to.
+      // Generally we need to find a balance between performance and data volume.
+      // If we need more flexible and dynamic way of gathering important samples,
+      // we can implement the `tracesSampler` function.
+      // https://docs.sentry.io/platforms/javascript/guides/react/configuration/sampling/#sampling-transaction-events
+      tracesSampleRate: 0.05,
+      beforeSend(event) {
+        return redactUnsafeEventFields(event);
+      }
+    });
+    const sentryScope = Sentry__namespace.getCurrentScope();
+    sentryScope.setTag('role', 'frontend');
+    sentryScope.setTag('applicationName', window.app.applicationName);
+    sentryScope.setTag('service', `merchant-center-frontend-${window.app.applicationName}`);
+  }
+};
+const isExtraAsObject = extrasOrExtra => typeof extrasOrExtra === 'object';
+const reportErrorToSentry = (error, extraInfo, getIsEnabled) => {
+  const isEnabled = getIsEnabled ? getIsEnabled() : Boolean(window.app.trackingSentry);
+  if (typeof error === 'string' && !isEnabled) {
+    console.warn('[SENTRY]: You called "reportErrorToSentry" with a string argument. ' + '"Error" objects should be preferred so that a stack-trace can be made available in Sentry. ' + 'See: https://docs.sentry.io/clients/javascript/usage/#try-catch');
+  }
+  if (isEnabled) {
+    if (extraInfo?.extra) {
+      if (isExtraAsObject(extraInfo.extra)) {
+        // See https://docs.sentry.io/platforms/javascript/react/
+        Sentry__namespace.setExtras(extraInfo.extra);
+      } else {
+        Sentry__namespace.setExtra('extra', extraInfo.extra);
+      }
+    } else if (error instanceof ErrorEvent) {
+      Sentry__namespace.setExtras({
+        filename: error.filename,
+        lineno: error.lineno,
+        colno: error.colno,
+        error: error.error
+      });
+    }
+    // Generate a unique ID referring to the last generated Sentry error
+    const errorId = sendErrorToSentry(error);
+
+    // The error stack should be available in Sentry, so there is no
+    // need to print it in the console as well.
+    // We just notify that an error occurred and provide the error ID.
+    console.error(`[SENTRY]: An error occured (ID: ${errorId}).`);
+    return errorId;
+  }
+  console.error('[SENTRY]:', error);
+  return undefined;
+};
+
+function _callSuper$1(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$1() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function () { return !!t; })(); }
+/**
+ * This component will let sentry know if any information about the user has
+ * changed.
+ */
+let SentryUserTracker = /*#__PURE__*/function (_PureComponent) {
+  function SentryUserTracker() {
+    var _this;
+    _classCallCheck(this, SentryUserTracker);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper$1(this, SentryUserTracker, [...args]);
+    _this.syncUser = () => {
+      if (_this.props.user && window.app.trackingSentry) {
+        // to avoid sending personal data to sentry we anonymize the email address
+        // by only sending the domain part or the email
+        const emailTld = _this.props.user.email.split('@')[1];
+        Sentry__namespace.setUser({
+          email: `xxx@${emailTld}`,
+          id: _this.props.user.id
+        });
+      }
+    };
+    return _this;
+  }
+  _inherits(SentryUserTracker, _PureComponent);
+  return _createClass(SentryUserTracker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // since the user and project could have been loaded from the apollo cache
+      // they could be preset already when mounting
+      this.syncUser();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.syncUser();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+}(react.PureComponent);
+SentryUserTracker.displayName = 'SentryUserTracker';
+
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
+let SentryUserLogoutTracker = /*#__PURE__*/function (_Component) {
+  function SentryUserLogoutTracker() {
+    _classCallCheck(this, SentryUserLogoutTracker);
+    return _callSuper(this, SentryUserLogoutTracker, arguments);
+  }
+  _inherits(SentryUserLogoutTracker, _Component);
+  return _createClass(SentryUserLogoutTracker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // When the user is not logged in anymore (e.g. on logout) we still track
+      // errors but without the user data in context.
+      if (window.app.trackingSentry) {
+        Sentry__namespace.configureScope(scope => {
+          scope.clear();
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+}(react.Component);
+SentryUserLogoutTracker.displayName = 'SentryUserLogoutTracker';
+
+exports.SentryUserLogoutTracker = SentryUserLogoutTracker;
+exports.SentryUserTracker = SentryUserTracker;
+exports.boot = boot;
+exports.redactUnsafeEventFields = redactUnsafeEventFields;
+exports.reportErrorToSentry = reportErrorToSentry;
+exports.version = version;

package/dist/commercetools-frontend-sentry.esm.js

@@ -0,0 +1,208 @@
+import _JSON$stringify from '@babel/runtime-corejs3/core-js-stable/json/stringify';
+import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import * as Sentry from '@sentry/react';
+import { globalHandlersIntegration } from '@sentry/browser';
+import history from '@commercetools-frontend/browser-history';
+import _Reflect$construct from '@babel/runtime-corejs3/core-js-stable/reflect/construct';
+import _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
+import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
+import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
+import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
+import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
+import { PureComponent, Component } from 'react';
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "24.7.2";
+
+const makeErrorToCapture = error => {
+  if (error instanceof Error) return error;
+  if (error instanceof ErrorEvent) return new Error(error.message);
+  return new Error(_JSON$stringify(error.reason || 'Unhandled rejection without a reason'));
+};
+const sendErrorToSentry = error => {
+  if (typeof error === 'string') return Sentry.captureMessage(error);
+  const errorToCapture = makeErrorToCapture(error);
+  return Sentry.captureException(errorToCapture);
+};
+const replaceEventValues = (source, replacements) => {
+  const replaceEventValue = prop => {
+    source[prop] = replacements[prop];
+  };
+  for (const prop in source) {
+    if (Object.prototype.hasOwnProperty.call(source, prop)) {
+      var _context;
+      const hasPropReplacement = _includesInstanceProperty(_context = _Object$keys(replacements)).call(_context, prop);
+      switch (typeof source[prop]) {
+        case 'string':
+          if (hasPropReplacement) {
+            replaceEventValue(prop);
+          }
+          break;
+        case 'object':
+          if (hasPropReplacement) {
+            replaceEventValue(prop);
+          } else {
+            replaceEventValues(source[prop], replacements);
+          }
+          break;
+      }
+    }
+  }
+  return source;
+};
+const redactUnsafeEventFields = event => {
+  return replaceEventValues(event, {
+    firstName: '[Redacted]',
+    lastName: '[Redacted]',
+    email: '[Redacted]'
+  });
+};
+const boot = () => {
+  if (window.app.trackingSentry && window.app.trackingSentry !== 'null') {
+    Sentry.init({
+      dsn: window.app.trackingSentry,
+      release: window.app.revision,
+      environment: `${window.app.env}-${window.app.location}`,
+      // In order to reduce the noise in sentry we only track errors that come
+      // from our code and ignore errors that come from other services
+      // https://blog.sentry.io/2017/03/27/tips-for-reducing-javascript-error-noise.html
+      allowUrls: [window.app.cdnUrl, window.app.frontendHost],
+      // suppress any resize observer errors, see
+      // https://github.com/vercel/next.js/discussions/51551
+      ignoreErrors: [/ResizeObserver loop (limit exceeded|completed with undelivered notifications)/i],
+      integrations: [globalHandlersIntegration({
+        onunhandledrejection: false,
+        onerror: false
+      }), Sentry.reactRouterV5BrowserTracingIntegration({
+        history
+      })],
+      // Sending 5% of transactions. We can adjust that as we see a need to.
+      // Generally we need to find a balance between performance and data volume.
+      // If we need more flexible and dynamic way of gathering important samples,
+      // we can implement the `tracesSampler` function.
+      // https://docs.sentry.io/platforms/javascript/guides/react/configuration/sampling/#sampling-transaction-events
+      tracesSampleRate: 0.05,
+      beforeSend(event) {
+        return redactUnsafeEventFields(event);
+      }
+    });
+    const sentryScope = Sentry.getCurrentScope();
+    sentryScope.setTag('role', 'frontend');
+    sentryScope.setTag('applicationName', window.app.applicationName);
+    sentryScope.setTag('service', `merchant-center-frontend-${window.app.applicationName}`);
+  }
+};
+const isExtraAsObject = extrasOrExtra => typeof extrasOrExtra === 'object';
+const reportErrorToSentry = (error, extraInfo, getIsEnabled) => {
+  const isEnabled = getIsEnabled ? getIsEnabled() : Boolean(window.app.trackingSentry);
+  if (typeof error === 'string' && !isEnabled) {
+    console.warn('[SENTRY]: You called "reportErrorToSentry" with a string argument. ' + '"Error" objects should be preferred so that a stack-trace can be made available in Sentry. ' + 'See: https://docs.sentry.io/clients/javascript/usage/#try-catch');
+  }
+  if (isEnabled) {
+    if (extraInfo?.extra) {
+      if (isExtraAsObject(extraInfo.extra)) {
+        // See https://docs.sentry.io/platforms/javascript/react/
+        Sentry.setExtras(extraInfo.extra);
+      } else {
+        Sentry.setExtra('extra', extraInfo.extra);
+      }
+    } else if (error instanceof ErrorEvent) {
+      Sentry.setExtras({
+        filename: error.filename,
+        lineno: error.lineno,
+        colno: error.colno,
+        error: error.error
+      });
+    }
+    // Generate a unique ID referring to the last generated Sentry error
+    const errorId = sendErrorToSentry(error);
+
+    // The error stack should be available in Sentry, so there is no
+    // need to print it in the console as well.
+    // We just notify that an error occurred and provide the error ID.
+    console.error(`[SENTRY]: An error occured (ID: ${errorId}).`);
+    return errorId;
+  }
+  console.error('[SENTRY]:', error);
+  return undefined;
+};
+
+function _callSuper$1(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$1() ? _Reflect$construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function () { return !!t; })(); }
+/**
+ * This component will let sentry know if any information about the user has
+ * changed.
+ */
+let SentryUserTracker = /*#__PURE__*/function (_PureComponent) {
+  function SentryUserTracker() {
+    var _this;
+    _classCallCheck(this, SentryUserTracker);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper$1(this, SentryUserTracker, [...args]);
+    _this.syncUser = () => {
+      if (_this.props.user && window.app.trackingSentry) {
+        // to avoid sending personal data to sentry we anonymize the email address
+        // by only sending the domain part or the email
+        const emailTld = _this.props.user.email.split('@')[1];
+        Sentry.setUser({
+          email: `xxx@${emailTld}`,
+          id: _this.props.user.id
+        });
+      }
+    };
+    return _this;
+  }
+  _inherits(SentryUserTracker, _PureComponent);
+  return _createClass(SentryUserTracker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // since the user and project could have been loaded from the apollo cache
+      // they could be preset already when mounting
+      this.syncUser();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.syncUser();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+}(PureComponent);
+SentryUserTracker.displayName = 'SentryUserTracker';
+
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
+let SentryUserLogoutTracker = /*#__PURE__*/function (_Component) {
+  function SentryUserLogoutTracker() {
+    _classCallCheck(this, SentryUserLogoutTracker);
+    return _callSuper(this, SentryUserLogoutTracker, arguments);
+  }
+  _inherits(SentryUserLogoutTracker, _Component);
+  return _createClass(SentryUserLogoutTracker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // When the user is not logged in anymore (e.g. on logout) we still track
+      // errors but without the user data in context.
+      if (window.app.trackingSentry) {
+        Sentry.configureScope(scope => {
+          scope.clear();
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+}(Component);
+SentryUserLogoutTracker.displayName = 'SentryUserLogoutTracker';
+
+export { SentryUserLogoutTracker, SentryUserTracker, boot, redactUnsafeEventFields, reportErrorToSentry, version };

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default as version } from "./version.js";
+export * from "./sentry.js";
+export { default as SentryUserTracker } from "./sentry-user-tracker/index.js";
+export { default as SentryUserLogoutTracker } from "./sentry-user-logout-tracker/index.js";

package/dist/declarations/src/sentry-user-logout-tracker/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./sentry-user-logout-tracker.js";

package/dist/declarations/src/sentry-user-logout-tracker/sentry-user-logout-tracker.d.ts

@@ -0,0 +1,7 @@
+import { Component } from 'react';
+declare class SentryUserLogoutTracker extends Component {
+    static displayName: string;
+    componentDidMount(): void;
+    render(): null;
+}
+export default SentryUserLogoutTracker;

package/dist/declarations/src/sentry-user-tracker/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./sentry-user-tracker.js";

package/dist/declarations/src/sentry-user-tracker/sentry-user-tracker.d.ts

@@ -0,0 +1,20 @@
+import { PureComponent } from 'react';
+type SentryUser = {
+    id: string;
+    email: string;
+};
+type Props = {
+    user?: SentryUser;
+};
+/**
+ * This component will let sentry know if any information about the user has
+ * changed.
+ */
+declare class SentryUserTracker extends PureComponent<Props> {
+    static displayName: string;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    syncUser: () => void;
+    render(): null;
+}
+export default SentryUserTracker;

package/dist/declarations/src/sentry.d.ts

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/react';
+import type { Extra, Extras, Event } from '@sentry/types';
+type ReportableEvent = ErrorEvent | PromiseRejectionEvent;
+type Reportable = Error | ReportableEvent | string;
+export declare const redactUnsafeEventFields: (event: Event) => Sentry.Event;
+export declare const boot: () => void;
+export declare const reportErrorToSentry: (error: Reportable, extraInfo?: {
+    extra?: Extra | Extras;
+}, getIsEnabled?: () => boolean) => string | undefined;
+export {};

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@APPLICATION_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@commercetools-frontend/sentry",
+  "version": "0.0.0-CRAFT-1791-20251006162610",
+  "description": "Components to set up Sentry for a MC application",
+  "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/merchant-center-application-kit.git",
+    "directory": "packages/sentry"
+  },
+  "homepage": "https://docs.commercetools.com/merchant-center-customizations",
+  "keywords": [
+    "javascript",
+    "frontend",
+    "react",
+    "toolkit"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/commercetools-frontend-sentry.cjs.js",
+  "module": "dist/commercetools-frontend-sentry.esm.js",
+  "files": [
+    "dist",
+    "package.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.22.15",
+    "@babel/runtime-corejs3": "^7.22.15",
+    "@commercetools-frontend/browser-history": "0.0.0-CRAFT-1791-20251006162610",
+    "@commercetools-frontend/constants": "0.0.0-CRAFT-1791-20251006162610",
+    "@sentry/browser": "7.120.4",
+    "@sentry/react": "7.120.4",
+    "@sentry/types": "7.120.4",
+    "@types/prop-types": "^15.7.5",
+    "@types/react": "^19.0.3",
+    "prop-types": "15.8.1"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@types/jest": "^29.5.14",
+    "jest": "29.7.0",
+    "react": "19.0.0",
+    "sentry-testkit": "5.0.10",
+    "wait-for-expect": "3.0.2"
+  },
+  "peerDependencies": {
+    "react": "19.x"
+  }
+}