@shopgate/pwa-common 7.32.1 → 7.32.2-alpha.10

package/actions/app/handleLink.js

@@ -1,8 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.replace.js";
-import "core-js/modules/web.url.js";
-import "core-js/modules/web.url.to-json.js";
-import "core-js/modules/web.url-search-params.js";
 import { logger } from '@shopgate/pwa-core/helpers';
 import { DEEPLINK_CART_ADD_PRODUCT_PATTERN } from '@shopgate/pwa-common-commerce/cart/constants';
 import fetchProduct from '@shopgate/pwa-common-commerce/product/actions/fetchProduct';
@@ -44,7 +39,11 @@ export default function handleLink(payload, allowExternalLinks = false) {
           pathname
         } = new URL(link));
       } catch (linkParseError) {
-        logger.error(`Could not parse link ${link}`, linkParseError);
+        // The error is sent to Sentry. Query string, hash and credentials in front of the host can
+        // contain secrets, so they are left out, and so is the error of the browser, which can
+        // contain the whole link.
+        const loggedLink = link.split(/[?#]/)[0].replace(/^([^/]*\/\/)[^/@]*@/, '$1');
+        logger.error(new Error(`Could not parse link ${loggedLink}`));
       }
     } else {
       // Remove the deeplink protocol from the link.

package/collections/AuthRoutes.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 import pathMatch from 'path-match';
 
 /**

package/collections/PersistedReducers.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 /**
  * Class to maintain the persisted redux reducers.
  */

package/collections/media-providers/YouTube.js

@@ -1,5 +1,4 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import "core-js/modules/web.url-search-params.js";
 import MediaProvider from "./MediaProvider";
 
 /* eslint-disable class-methods-use-this */

package/components/ErrorBoundary/index.js

@@ -1,6 +1,7 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { toError } from '@shopgate/pwa-core/helpers/error';
 import connector from "./connector";
 
 /**
@@ -35,9 +36,9 @@ let ErrorBoundary = /*#__PURE__*/function (_PureComponent) {
   };
   var _proto = ErrorBoundary.prototype;
   _proto.componentDidCatch = function componentDidCatch(error, errorInfo) {
-    // eslint-disable-next-line no-param-reassign
-    error.stack = errorInfo.componentStack;
-    this.props.appError(error);
+    this.props.appError(toError(error, {
+      componentStack: errorInfo.componentStack
+    }));
   }
 
   /**

package/components/I18n/components/Translate/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { renderToString } from 'react-dom/server';

package/components/Link/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.string.replace.js";
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { hasWebBridge } from '@shopgate/engage/core';

package/components/Portal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Portal/index.jsx"],"names":[],"mappings":";AAOA;;GAEG;AACH;IACE;;;;MAIE;IAEF;;;MAGE;IAEF;;;OAGG;IACH,mBAFW,MAAM,EAUhB;IALC;;MAEC;IAED,kBAAsD;IAGxD;;;;OAIG;IACH,yBAHW,KAAK,QACL,MAAM,QAKhB;IAED;;;;OAIG;IACH,wBAAyB,OAHd,MAGmB,WAa5B;IAEF;;;;OAIG;IACH,sBAAuB,MAHZ,MAGgB,WA0CzB;IAEF;;;OAGG;IACH,UAFY,GAAG,CAiCd;CACF;kBAvJ8C,OAAO;sBAChC,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Portal/index.jsx"],"names":[],"mappings":";AAQA;;GAEG;AACH;IACE;;;;MAIE;IAEF;;;MAGE;IAEF;;;OAGG;IACH,mBAFW,MAAM,EAUhB;IALC;;MAEC;IAED,kBAAsD;IAGxD;;;;OAIG;IACH,yBAHW,KAAK,QACL,MAAM,QAKhB;IAED;;;;OAIG;IACH,wBAAyB,OAHd,MAGmB,WAa5B;IAEF;;;;OAIG;IACH,sBAAuB,MAHZ,MAGgB,WA0CzB;IAEF;;;OAGG;IACH,UAFY,GAAG,CAiCd;CACF;kBAxJ8C,OAAO;sBAChC,YAAY"}

package/components/Portal/index.js

@@ -2,6 +2,7 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { logger } from '@shopgate/pwa-core/helpers';
+import { toError } from '@shopgate/pwa-core/helpers/error';
 import Loading from "../Loading";
 import portalCollection from "../../helpers/portals/portalCollection";
 import { componentsConfig } from "../../helpers/config";
@@ -104,7 +105,9 @@ let Portal = /*#__PURE__*/function (_PureComponent) {
     this.setState({
       hasError: true
     });
-    logger.error(error, info);
+    logger.error(toError(error, {
+      componentStack: info.componentStack
+    }));
   };
   /**
    * Renders the component.

package/components/Router/index.js

@@ -1,5 +1,4 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import "core-js/modules/es.string.replace.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { router, stack as routeStack, onDidPush, onDidPop, onDidReplace, onDidReset, onUpdate, ACTION_POP } from '@virtuous/conductor';

package/helpers/config/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../helpers/config/index.js"],"names":[],"mappings":"AAyJA;;;;GAIG;AACH,yCAHW,MAAM,oBACN,mBAAmB,GAAC,IAAI,QAKlC;AA/GD;;GAEG;AACH,yBAFU,MAAM,CAEsB;AAWtC;;;GAGG;AACH,+BAFU,MAAM,CAKd;AASF;;;GAGG;AACH,wBAFU,MAAM,CAEsC;AAEtD;;;GAGG;AACH,0BAFU,WAAW,CAEkC;AAEvD,yBAAyB;AACzB,8BAA8C;AAC9C,0BAA0B;AAC1B,+BAAgD;AAChD,4BAA4B;AAC5B,iCAAoD;AACpD,wBAAwB;AACxB,6BAA4C;AAK5C;;;;;;;;;;GAUG;AACH,2CANU,mBAAmB,CA8B3B;AAWK,gDAPI,MAAM,SACN,GAAC,SACD,GAAC,aACD,MAAM,aACN,MAAM,GACJ,OAAO,CAGK;AAiBzB,6BAAkE;;AA/FlE;;;;GAIG;AACH,6BAA8F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../helpers/config/index.js"],"names":[],"mappings":"AAwJA;;;;GAIG;AACH,yCAHW,MAAM,oBACN,mBAAmB,GAAC,IAAI,QAKlC;AA/GD;;GAEG;AACH,yBAFU,MAAM,CAEsB;AAWtC;;;GAGG;AACH,+BAFU,MAAM,CAKd;AASF;;;GAGG;AACH,wBAFU,MAAM,CAEsC;AAEtD;;;GAGG;AACH,0BAFU,WAAW,CAEkC;AAEvD,yBAAyB;AACzB,8BAA8C;AAC9C,0BAA0B;AAC1B,+BAAgD;AAChD,4BAA4B;AAC5B,iCAAoD;AACpD,wBAAwB;AACxB,6BAA4C;AAK5C;;;;;;;;;;GAUG;AACH,2CANU,mBAAmB,CA8B3B;AAWK,gDAPI,MAAM,SACN,GAAC,SACD,GAAC,aACD,MAAM,aACN,MAAM,GACJ,OAAO,CAGK;AAiBzB,6BAAkE;;AA/FlE;;;;GAIG;AACH,6BAA8F"}

package/helpers/config/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.string.replace.js";
 import pck from "../../package.json";
 import { buildThemeConfig } from "./theme";
 import { assignObjectDeep } from "../data";
@@ -27,7 +26,6 @@ const defaultAppConfig = {
   shopCNAME: null,
   currency: 'USD',
   showGmdMenuSubHeaders: false,
-  benchmark: false,
   sentry: {},
   theme: {},
   cartShippingHideAnonymousLegacy: null,

package/helpers/data/index.js

@@ -1,6 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.string.replace.js";
 import { logger } from '@shopgate/pwa-core/helpers';
 import { isAndroidOs } from '@shopgate/pwa-core';
 import { isObject, isArray } from "../validation";

package/helpers/dom/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.string.replace.js";
 /**
  * Checks if the given child is a descendant of the given parent.
  * @param {Object} parent The parent element.

package/helpers/html/handleDOM.js

@@ -1,6 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.string.replace.js";
 import event from '@shopgate/pwa-core/classes/Event/index';
 
 /**

package/helpers/i18n/getTranslator.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import IntlMessageFormat from 'intl-messageformat';
 import curry from 'lodash/curry';
 // eslint-disable-next-line import/no-named-default

package/helpers/i18n/mergeTranslations.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import isPlainObject from 'lodash/isPlainObject';
 import cloneDeep from 'lodash/cloneDeep';
 import merge from 'lodash/merge';

package/helpers/redux/mutable.js

@@ -1,5 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.string.replace.js";
 import noop from 'lodash/noop';
 import { isObject } from "../validation";
 

package/helpers/router/index.js

@@ -1,6 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.string.replace.js";
-import "core-js/modules/web.url-search-params.js";
 import { createBrowserHistory } from 'history';
 import { router } from '@virtuous/conductor';
 import { logger } from '@shopgate/pwa-core/helpers';

package/helpers/style/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 import { logger } from '@shopgate/pwa-core/helpers';
 import { isNumber } from "../validation";
 

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.32.1",
+  "version": "7.32.2-alpha.10",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
-  "repository": "shopgate/pwa",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shopgate/pwa.git",
+    "directory": "libraries/common"
+  },
   "bugs": "https://github.com/shopgate/pwa/issues",
   "homepage": "https://github.com/shopgate/pwa/tree/master/libraries/common",
   "keywords": [
@@ -16,8 +20,7 @@
   ],
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
-    "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.32.1",
+    "@sentry/browser": "^7.120.4",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -28,22 +31,22 @@
     "history": "^4.9.0",
     "intl-messageformat": "^11.2.9",
     "path-match": "^1.2.4",
+    "react-cookie": "^8.1.2",
     "react-dotdotdot": "~1.3.1",
     "react-helmet": "^6.1.0",
     "react-portal": "^3.1.0",
     "react-redux": "^8.1.3",
     "redux": "^5.0.1",
-    "redux-logger": "^3.0.6",
     "redux-thunk": "^3.1.0",
     "reselect": "^4.1.8",
     "rxjs": "~5.5.12",
     "swiper": "12.2.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.32.1",
-    "@types/lodash": "^4.17.24",
+    "@shopgate/pwa-core": "7.32.2-alpha.10",
+    "@types/lodash": "^4.17.25",
     "@types/react-portal": "^3.0.9",
-    "lodash": "^4.17.23",
+    "lodash": "^4.18.1",
     "prop-types": "~15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

package/reducers/page/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import { ENOTFOUND } from '@shopgate/pwa-core/constants/Pipeline';
 import { REQUEST_PAGE_CONFIG, RECEIVE_PAGE_CONFIG, ERROR_PAGE_CONFIG, APP_WILL_START } from "../../constants/ActionTypes";
 

package/selectors/client.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 import { createSelector } from 'reselect';
 import MobileDetect from 'mobile-detect';
 import { hasSGJavaScriptBridge } from '@shopgate/pwa-core/helpers';

package/store/index.js

@@ -1,13 +1,10 @@
-import "core-js/modules/es.string.replace.js";
 import { createStore, applyMiddleware } from 'redux';
 import { thunk } from 'redux-thunk';
 import { composeWithDevTools } from '@redux-devtools/extension';
 import { persistState } from '@virtuous/redux-persister';
-import benchmarkMiddleware from '@shopgate/pwa-benchmark/profilers/redux';
-import benchmarkController from '@shopgate/pwa-benchmark';
 import persistedReducers from "../collections/PersistedReducers";
 import initSubscribers from "../subscriptions";
-import appConfig, { themeName, shopNumber } from "../helpers/config";
+import { themeName, shopNumber } from "../helpers/config";
 import makeRootReducer from "../reducers";
 import streams from "./middelwares/streams";
 import logger from "./middelwares/logger";
@@ -31,7 +28,7 @@ function getInitialState() {
   if (!storedState) {
     return undefined;
   }
-  const normalizedState = storedState.replace(new RegExp('"isFetching":true', 'g'), '"isFetching":false');
+  const normalizedState = storedState.replace(/"isFetching":true/g, '"isFetching":false');
   return JSON.parse(normalizedState);
 }
 
@@ -42,18 +39,11 @@ function getInitialState() {
  * @return {Object} The redux store.
  */
 export function configureStore(reducers, subscribers) {
-  // Starts benchmark controller BEFORE adding the middleware.
-  if (appConfig.benchmark) {
-    benchmarkController.startup();
-  }
-  const store = createStore(makeRootReducer(reducers), getInitialState(), composeWithDevTools(applyMiddleware.apply(void 0, [thunk].concat(appConfig.benchmark ? [benchmarkMiddleware] : [], [streams, logger])), persistState({
+  const store = createStore(makeRootReducer(reducers), getInitialState(), composeWithDevTools(applyMiddleware.apply(void 0, [thunk, streams, logger]), persistState({
     key: storeKey,
     paths: persistedReducers.getAll()
   })));
   initSubscribers(subscribers);
-  if (window.Cypress) {
-    window.store = store;
-  }
   return store;
 }
 

package/store/middelwares/logger.js

@@ -1,7 +1,114 @@
-import { createLogger } from 'redux-logger';
 import { logger } from '@shopgate/pwa-core';
-export default createLogger({
-  logger,
-  collapsed: true,
-  duration: true
-});
+const STORAGE_KEY = 'sgReduxLogger';
+const MUTED = 'color: gray; font-weight: lighter;';
+
+/**
+ * Reads whether the logger was switched off with sgReduxLogger.off().
+ * @return {boolean}
+ */
+const isSwitchedOff = () => {
+  try {
+    return window.localStorage.getItem(STORAGE_KEY) === 'off';
+  } catch (e) {
+    return false;
+  }
+};
+let enabled = !isSwitchedOff();
+
+/**
+ * Remembers the switch for the next app start.
+ * @param {boolean} value Whether actions are logged.
+ * @return {boolean} Whether the switch could be saved.
+ */
+const saveSwitch = value => {
+  try {
+    if (value) {
+      window.localStorage.removeItem(STORAGE_KEY);
+    } else {
+      window.localStorage.setItem(STORAGE_KEY, 'off');
+    }
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * Switches the logger on or off.
+ * @param {boolean} value Whether actions are logged.
+ */
+const setEnabled = value => {
+  enabled = value;
+  const saved = saveSwitch(value);
+  logger.info(`Redux logger switched ${value ? 'on' : 'off'}${saved ? '' : ' until the next reload'}`);
+};
+window.sgReduxLogger = {
+  on: () => setEnabled(true),
+  off: () => setEnabled(false)
+};
+
+/**
+ * Formats the time of a date, e.g. 14:03:07.042.
+ * @param {Date} date The date.
+ * @return {string}
+ */
+const formatTime = date => [date.getHours(), date.getMinutes(), date.getSeconds()].map(value => String(value).padStart(2, '0')).join(':').concat(`.${String(date.getMilliseconds()).padStart(3, '0')}`);
+
+/**
+ * Prints an action as a collapsed console group.
+ * @param {Object} entry The logged action with the states before and after it.
+ */
+const printEntry = ({
+  action,
+  prevState,
+  nextState,
+  error,
+  startedAt,
+  took
+}) => {
+  logger.groupCollapsed(`%c action %c${String(action.type)} %c@ ${formatTime(startedAt)} %c(in ${took.toFixed(2)} ms)`, MUTED, 'color: inherit;', MUTED, MUTED);
+  logger.log('%c prev state', 'color: #9E9E9E; font-weight: bold', prevState);
+  logger.log('%c action    ', 'color: #03A9F4; font-weight: bold', action);
+  if (error) {
+    logger.log('%c error     ', 'color: #F20404; font-weight: bold;', error);
+  }
+  logger.log('%c next state', 'color: #4CAF50; font-weight: bold', nextState);
+  logger.groupEnd();
+};
+
+/**
+ * Logs every action with the state before and after it to the console, unless the logger was
+ * switched off with sgReduxLogger.off() in the console.
+ * @param {Object} store The redux store.
+ * @return {Function}
+ */
+const loggerMiddleware = ({
+  getState
+}) => next => action => {
+  if (!enabled) {
+    return next(action);
+  }
+  const startedAt = new Date();
+  const started = performance.now();
+  const prevState = getState();
+  let result;
+  let error;
+  try {
+    result = next(action);
+  } catch (e) {
+    error = e;
+  }
+  printEntry({
+    action,
+    prevState,
+    nextState: getState(),
+    error,
+    startedAt,
+    took: performance.now() - started
+  });
+  if (error) {
+    throw error;
+  }
+  return result;
+};
+export default loggerMiddleware;

package/streams/main.js

@@ -23,7 +23,4 @@ import { mainSubject } from "../store/middelwares/streams";
  * Gets triggered on every redux action that is dispatched.
  * @type {Observable}
  */
-export const main$ = Observable.from(mainSubject);
-if (window.Cypress) {
-  window.main$ = main$;
-}
+export const main$ = Observable.from(mainSubject);

package/subscriptions/error.js

@@ -1,9 +1,10 @@
-import "core-js/modules/es.array.includes.js";
 import { isAvailable } from '@shopgate/native-modules';
-import { init, addBreadcrumb, configureScope, captureException, captureMessage, captureEvent, withScope, Severity as SentrySeverity } from '@sentry/browser';
+import { init, addBreadcrumb, setTags, captureException, captureEvent, withScope } from '@sentry/browser';
+import { router } from '@virtuous/conductor';
 import { EBIGAPI, emitter, errorManager, ETIMEOUT, ENETUNREACH, EUNKNOWN, EFAVORITE } from '@shopgate/pwa-core';
 import { hasWebBridge } from '@shopgate/engage/core';
 import { SOURCE_TRACKING, SOURCE_CONSOLE, Severity } from '@shopgate/pwa-core/constants/ErrorManager';
+import { describeValue } from '@shopgate/pwa-core/helpers/error';
 import { main$ } from "../streams/main";
 import {
 // eslint-disable-next-line import/no-named-default
@@ -12,23 +13,45 @@ import { env } from "../helpers/environment";
 import { transformGeneralPipelineError, getDisplayErrorMessage } from "./helpers/pipeline";
 import { historyPop } from "../actions/router";
 import showModal from "../actions/modal/showModal";
-import { getUserData } from "../selectors/user";
-import { userDidUpdate$ } from "../streams/user";
 import { clientInformationDidUpdate$ } from "../streams/client";
-import { appWillInit$, appWillStart$, appDidStart$ } from "../streams/app";
+import { appWillInit$, appWillStart$ } from "../streams/app";
 import { appError$, pipelineError$ } from "../streams/error";
 import { getRouterStack } from "../selectors/router";
 import { MODAL_PIPELINE_ERROR } from "../constants/ModalTypes";
+import { APP_ERROR } from "../constants/ActionTypes";
 import ToastProvider from "../providers/toast";
 
 // Generic, translated fallback shown when a backend error carries no code we can map to a message.
 const GENERIC_ERROR_MESSAGE = 'modal.body_error';
 
+/**
+ * @param {*} error The rejection reason or exception.
+ * @returns {boolean} Whether the error was created by the PipelineManager.
+ */
+const isPipelineError = error => !!error && typeof error.code === 'string' && typeof error.handled === 'boolean';
+
 /**
  * App errors subscriptions.
  * @param {Function} subscribe The subscribe function.
  */
 export default subscribe => {
+  subscribe(appWillInit$, () => {
+    window.addEventListener('unhandledrejection', event => {
+      const {
+        reason
+      } = event;
+      if (!isPipelineError(reason)) {
+        return;
+      }
+      event.preventDefault();
+      if (env === 'development') {
+        const hint = reason.handled ? 'The default error handling already handled it' : 'The request excluded it from the default error handling (blacklisted or suppressed), so the action is expected to handle it';
+        // eslint-disable-next-line no-console
+        console.info(`Pipeline error not handled by the caller: ${reason.code} (${reason.message}). ${hint}; add .catch() if the caller needs to react.`);
+      }
+    });
+  });
+
   /** Set general error transformations */
   subscribe(appWillStart$, () => {
     errorManager.setMessage({
@@ -160,16 +183,30 @@ export default subscribe => {
     return;
   }
   const severityMap = {
-    [Severity.Fatal]: SentrySeverity.Fatal,
-    [Severity.Error]: SentrySeverity.Error,
-    [Severity.Critical]: SentrySeverity.Critical,
-    [Severity.Warning]: SentrySeverity.Warning,
-    [Severity.Info]: SentrySeverity.Info,
-    [Severity.Debug]: SentrySeverity.Debug
+    [Severity.Fatal]: 'fatal',
+    [Severity.Error]: 'error',
+    [Severity.Critical]: 'fatal',
+    [Severity.Warning]: 'warning',
+    [Severity.Info]: 'info',
+    [Severity.Debug]: 'debug'
   };
   const ignoredDefaultBreadcrumbs = ['console', 'fetch', 'xhr', 'ui.click'];
-  let trackedSeverities = Object.getOwnPropertySymbols(severityMap).map(s => severityMap[s]);
-  const minSeverityIndex = trackedSeverities.indexOf(level);
+
+  /**
+   * @param {string} url An absolute or relative URL of the app.
+   * @returns {string} The URL with its route path replaced by the route pattern, e.g.
+   * `/orders/:orderId`, and without query string and hash.
+   */
+  const redactUrl = url => {
+    if (typeof url !== 'string') {
+      return url;
+    }
+    const [path] = url.split(/[?#]/);
+    const [, base, routePath] = /^(.*?index\.html)(.*)$/.exec(path) || /^([a-z][a-z\d+.-]*:\/\/[^/]+)(.*)$/i.exec(path) || [null, '', path];
+    return `${base}${router.findPattern(routePath || '/') || '/(unknown route)'}`;
+  };
+  let trackedSeverities = Object.values(severityMap);
+  const minSeverityIndex = Object.keys(severityMap).indexOf(level);
   if (minSeverityIndex > -1) {
     trackedSeverities = trackedSeverities.slice(0, minSeverityIndex + 1);
   }
@@ -183,54 +220,86 @@ export default subscribe => {
       release: pckVersion,
       attachStacktrace: true,
       sampleRate,
+      ignoreErrors: [/play\(\) failed because the user didn't interact/],
       beforeBreadcrumb(breadcrumb) {
         if (ignoredDefaultBreadcrumbs.includes(breadcrumb.category)) {
           return null;
         }
+        if (breadcrumb.category === 'navigation' && breadcrumb.data) {
+          return {
+            ...breadcrumb,
+            data: {
+              from: redactUrl(breadcrumb.data.from),
+              to: redactUrl(breadcrumb.data.to)
+            }
+          };
+        }
         return breadcrumb;
       },
-      beforeSend(event) {
+      beforeSend(event, hint) {
         if (event.level && !trackedSeverities.includes(event.level)) {
           return null;
         }
-        // eslint-disable-next-line no-param-reassign
-        event.extra = {
-          ...(event.extra || {}),
-          routerStack: getRouterStack(getState()).slice(-5)
+        if (isPipelineError(hint?.originalException)) {
+          return null;
+        }
+        return {
+          ...event,
+          request: event.request && {
+            ...event.request,
+            url: redactUrl(event.request.url),
+            headers: event.request.headers && {
+              ...event.request.headers,
+              Referer: redactUrl(event.request.headers.Referer)
+            }
+          },
+          extra: {
+            ...(event.extra || {}),
+            routerStack: getRouterStack(getState()).slice(-5).map(({
+              pattern
+            }) => ({
+              pattern
+            }))
+          }
         };
-        return event;
       }
     });
-    configureScope(scope => {
-      scope.setTag('marketId', appConfig.marketId);
-      scope.setTag('appId', appConfig.appId);
-      scope.setTag('pwaVersion', pckVersion);
-      scope.setTag('theme', themeName);
-      scope.setTag('language', appConfig.language);
-      scope.setTag('isWebsite', hasWebBridge());
-      scope.setTag('isReactNativeApp', isAvailable());
-      scope.setTag('merchantCode', appConfig.omniMerchantCode);
+    setTags({
+      marketId: appConfig.marketId,
+      appId: appConfig.appId,
+      pwaVersion: pckVersion,
+      theme: themeName,
+      language: appConfig.language,
+      isWebsite: hasWebBridge(),
+      isReactNativeApp: isAvailable(),
+      merchantCode: appConfig.omniMerchantCode
     });
-    if (window) {
-      window.onerror = (message, source, lineno, colno, error) => {
-        captureException(error);
-      };
-    }
-    emitter.addListener(SOURCE_TRACKING, error => {
+    emitter.addListener(SOURCE_CONSOLE, args => {
+      const error = args.find(arg => arg instanceof Error);
+      const texts = args.filter(arg => arg !== error).map(describeValue);
+      if (!error) {
+        addBreadcrumb({
+          category: 'logger',
+          message: texts.join(' '),
+          level: 'error'
+        });
+        return;
+      }
       withScope(scope => {
-        if (error.context) {
+        scope.setLevel('error');
+        scope.setTag('source', SOURCE_CONSOLE);
+        if (texts.length > 0) {
+          scope.setExtra('details', texts);
+        }
+        if (error.source === SOURCE_TRACKING && error.context) {
           scope.setExtra('trackerName', error.context);
         }
+        if (error.componentStack) {
+          scope.setExtra('componentStack', error.componentStack);
+        }
         captureException(error);
       });
     });
-    emitter.addListener(SOURCE_CONSOLE, args => {
-      withScope(scope => {
-        scope.setLevel(SentrySeverity.Error);
-        scope.setExtra('error', args);
-        captureMessage('Console error');
-      });
-    });
   });
   subscribe(main$, ({
     action
@@ -238,20 +307,7 @@ export default subscribe => {
     addBreadcrumb({
       category: 'redux',
       message: `[Redux] ${action.type}`,
-      level: SentrySeverity.Info,
-      data: {
-        ...action
-      }
-    });
-  });
-  subscribe(userDidUpdate$, ({
-    getState
-  }) => {
-    const {
-      id: userId
-    } = getUserData(getState());
-    configureScope(scope => {
-      scope.setTag('userId', userId);
+      level: 'info'
     });
   });
 
@@ -261,21 +317,11 @@ export default subscribe => {
   }) => {
     const {
       appVersion,
-      libVersion,
-      deviceId
+      libVersion
     } = action.data;
-    configureScope(scope => {
-      scope.setTag('appVersion', appVersion);
-      scope.setTag('libVersion', libVersion);
-      scope.setTag('deviceId', deviceId);
-    });
-  });
-
-  // Add app start event for debugging
-  subscribe(appDidStart$, () => {
-    withScope(scope => {
-      scope.setLevel(SentrySeverity.Debug);
-      captureMessage('App did start');
+    setTags({
+      appVersion,
+      libVersion
     });
   });
 
@@ -283,9 +329,12 @@ export default subscribe => {
   subscribe(appError$, ({
     action
   }) => {
+    if (!(action.error instanceof Error)) {
+      return;
+    }
     withScope(scope => {
-      if (action.error.stack) {
-        scope.setExtra('stack', action.error.stack);
+      if (action.error.componentStack) {
+        scope.setExtra('componentStack', action.error.componentStack);
       }
       captureException(action.error);
     });
@@ -299,19 +348,20 @@ export default subscribe => {
       error = {}
     } = action;
     const {
-      code,
-      message,
-      meta: {
-        message: metaMessage
-      } = {}
+      code
     } = error;
+    if (action.type === APP_ERROR && error instanceof Error) {
+      return;
+    }
     withScope(scope => {
       scope.setTag('error', 'E_USER');
       scope.setTag('errorCode', code);
-      scope.setTag('errorMessage', message);
       captureEvent({
-        message: metaMessage || message,
-        extra: error
+        message: code ? `User error ${code}` : 'User error',
+        extra: {
+          code,
+          pipeline: error.context
+        }
       });
     });
   });

package/subscriptions/helpers/handleLinks.js

@@ -1,7 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/web.url.js";
-import "core-js/modules/web.url.to-json.js";
-import "core-js/modules/web.url-search-params.js";
 import { router, ACTION_REPLACE } from '@virtuous/conductor';
 import flushTab from '@shopgate/pwa-core/commands/flushTab';
 import openPage from '@shopgate/pwa-core/commands/openPage';

package/subscriptions/router.js

@@ -1,8 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.replace.js";
-import "core-js/modules/web.url.js";
-import "core-js/modules/web.url.to-json.js";
-import "core-js/modules/web.url-search-params.js";
 import queryString from 'query-string';
 import { router, ACTION_POP, ACTION_PUSH, ACTION_REPLACE, ACTION_RESET } from '@virtuous/conductor';
 import Route from '@virtuous/conductor/Route';