@shopgate/pwa-common 7.32.2-alpha.1 → 7.32.2-alpha.3

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';

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/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/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.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";

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,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.32.2-alpha.1",
+  "version": "7.32.2-alpha.3",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
-    "@sentry/browser": "6.0.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",
@@ -31,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.2-alpha.1",
-    "@types/lodash": "^4.17.24",
+    "@shopgate/pwa-core": "7.32.2-alpha.3",
+    "@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,4 +1,3 @@
-import "core-js/modules/es.string.replace.js";
 import { createStore, applyMiddleware } from 'redux';
 import { thunk } from 'redux-thunk';
 import { composeWithDevTools } from '@redux-devtools/extension';

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/subscriptions/error.js

@@ -1,6 +1,6 @@
-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, captureMessage, 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';
@@ -12,8 +12,6 @@ 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 { appError$, pipelineError$ } from "../streams/error";
@@ -24,11 +22,34 @@ 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 +181,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,39 +218,60 @@ 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 => {
       withScope(scope => {
         if (error.context) {
@@ -226,8 +282,8 @@ export default subscribe => {
     });
     emitter.addListener(SOURCE_CONSOLE, args => {
       withScope(scope => {
-        scope.setLevel(SentrySeverity.Error);
-        scope.setExtra('error', args);
+        scope.setLevel('error');
+        scope.setExtra('error', args.map(arg => arg instanceof Error ? arg.message : String(arg)));
         captureMessage('Console error');
       });
     });
@@ -238,20 +294,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,20 +304,18 @@ export default subscribe => {
   }) => {
     const {
       appVersion,
-      libVersion,
-      deviceId
+      libVersion
     } = action.data;
-    configureScope(scope => {
-      scope.setTag('appVersion', appVersion);
-      scope.setTag('libVersion', libVersion);
-      scope.setTag('deviceId', deviceId);
+    setTags({
+      appVersion,
+      libVersion
     });
   });
 
   // Add app start event for debugging
   subscribe(appDidStart$, () => {
     withScope(scope => {
-      scope.setLevel(SentrySeverity.Debug);
+      scope.setLevel('debug');
       captureMessage('App did start');
     });
   });
@@ -299,19 +340,17 @@ export default subscribe => {
       error = {}
     } = action;
     const {
-      code,
-      message,
-      meta: {
-        message: metaMessage
-      } = {}
+      code
     } = error;
     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';