@atlaskit/collab-provider 8.2.0 → 8.3.0

package/dist/es2019/provider/telepointers.js

@@ -0,0 +1,65 @@
+import { createLogger } from '../helpers/utils';
+import { ExperiencePerformanceTypes, ExperienceTypes, UFOExperience } from '@atlaskit/ufo';
+import { AcknowledgementResponseTypes } from '../types';
+const logger = createLogger('Telepointer', 'green');
+export const telepointersFromStep = (participants, step) => {
+  const [participant] = Array.from(participants.values()).filter(p => p.clientId === step.clientId);
+  if (participant) {
+    var _node$text;
+    const {
+      stepType,
+      to,
+      from,
+      slice = {
+        content: []
+      }
+    } = step;
+    const [node] = slice.content;
+    if (to && from && stepType === 'replace' && to === from && slice.content.length === 1 && (node === null || node === void 0 ? void 0 : node.type) === 'text' && (node === null || node === void 0 ? void 0 : (_node$text = node.text) === null || _node$text === void 0 ? void 0 : _node$text.length) === 1) {
+      return {
+        sessionId: participant.sessionId,
+        selection: {
+          type: 'textSelection',
+          anchor: from + 1,
+          head: to + 1
+        },
+        type: 'telepointer'
+      };
+    }
+  }
+};
+export const telepointerCallback = documentAri => {
+  const telepointerExperience = new UFOExperience('collab-provider.telepointer', {
+    type: ExperienceTypes.Operation,
+    performanceType: ExperiencePerformanceTypes.Custom,
+    performanceConfig: {
+      histogram: {
+        [ExperiencePerformanceTypes.Custom]: {
+          duration: '250_500_1000_1500_2000_3000_4000'
+        }
+      }
+    }
+  });
+  telepointerExperience.addMetadata({
+    documentAri
+  });
+  telepointerExperience.start();
+  return response => {
+    if (response.type === AcknowledgementResponseTypes.SUCCESS) {
+      telepointerExperience.success();
+    } else if (response.type === AcknowledgementResponseTypes.ERROR) {
+      const errorMessage = response.error;
+      telepointerExperience.addMetadata({
+        error: errorMessage
+      });
+      logger('Error from collab service with telepointer broadcast', errorMessage);
+      telepointerExperience.failure();
+    } else {
+      logger('Invalid ACK from collab service with telepointer broadcast');
+      telepointerExperience.addMetadata({
+        error: 'Invalid ACK from collab service with telepointer broadcast'
+      });
+      telepointerExperience.failure();
+    }
+  };
+};

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/collab-provider";
-export const version = "8.2.0";
+export const version = "8.3.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/collab-provider",
-	"version": "8.2.0",
+	"version": "8.3.0",
 	"sideEffects": false
 }

package/dist/esm/analytics/index.js

@@ -1,9 +1,18 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { EVENT_SUBJECT, COLLAB_SERVICE } from '../helpers/const';
+import { EVENT_ACTION } from '../helpers/const';
 import { name as packageName, version as packageVersion } from '../version-wrapper';
-export var triggerAnalyticsEvent = function triggerAnalyticsEvent(analyticsEvent, analyticsClient) {
+import { network } from '../connectivity/singleton';
+var EVENT_SUBJECT = 'collab';
+var COLLAB_SERVICE;
+(function (COLLAB_SERVICE) {
+  COLLAB_SERVICE["NCS"] = "ncs";
+  COLLAB_SERVICE["SYNCHRONY"] = "synchrony";
+})(COLLAB_SERVICE || (COLLAB_SERVICE = {}));
+var triggerAnalyticsEvent = function triggerAnalyticsEvent(analyticsEvent, analyticsClient) {
   if (!analyticsClient) {
     return;
   }
@@ -12,18 +21,67 @@ export var triggerAnalyticsEvent = function triggerAnalyticsEvent(analyticsEvent
     attributes: _objectSpread({
       packageName: packageName,
       packageVersion: packageVersion,
-      collabService: COLLAB_SERVICE.NCS
+      collabService: COLLAB_SERVICE.NCS,
+      network: {
+        status: network.getStatus()
+      }
     }, analyticsEvent.attributes),
     tags: ['editor'],
     action: analyticsEvent.eventAction,
     source: 'unknown' // Adds zero analytics value, but event validation throws an error if you don't add it :-(
   };
 
+  if (analyticsEvent.eventAction === EVENT_ACTION.ERROR) {
+    payload.nonPrivacySafeAttributes = analyticsEvent.nonPrivacySafeAttributes;
+  }
+
   // Let the browser figure out
   // when it should send those events
-  var requestIdleCallbackFunction = window.requestIdleCallback;
-  var runItLater = typeof requestIdleCallbackFunction === 'function' ? requestIdleCallbackFunction : window.requestAnimationFrame;
-  runItLater(function () {
-    analyticsClient.sendOperationalEvent(payload);
-  });
-};
+  try {
+    var requestIdleCallbackFunction = window.requestIdleCallback;
+    var runItLater = typeof requestIdleCallbackFunction === 'function' ? requestIdleCallbackFunction : window.requestAnimationFrame;
+    runItLater(function () {
+      analyticsClient.sendOperationalEvent(payload);
+    });
+  } catch (error) {
+    // silently fail for now https://product-fabric.atlassian.net/browse/ESS-3112
+  }
+};
+var AnalyticsHelper = /*#__PURE__*/function () {
+  function AnalyticsHelper(documentAri, analyticsClient) {
+    _classCallCheck(this, AnalyticsHelper);
+    this.analyticsClient = analyticsClient;
+    this.documentAri = documentAri;
+  }
+  _createClass(AnalyticsHelper, [{
+    key: "sendErrorEvent",
+    value: function sendErrorEvent(error, errorMessage) {
+      var errorAnalyticsEvent = {
+        eventAction: EVENT_ACTION.ERROR,
+        attributes: {
+          documentAri: this.documentAri,
+          errorMessage: errorMessage
+        },
+        nonPrivacySafeAttributes: {
+          error: error
+        }
+      };
+      triggerAnalyticsEvent(errorAnalyticsEvent, this.analyticsClient);
+    }
+  }, {
+    key: "sendActionEvent",
+    value: function sendActionEvent(action, status, attributes // This breaks discriminated unions, because there is no obvious field to discriminate against any more
+    ) {
+      var analyticsEvent = {
+        eventAction: action,
+        attributes: _objectSpread({
+          documentAri: this.documentAri,
+          eventStatus: status
+        }, attributes)
+      };
+      triggerAnalyticsEvent(analyticsEvent, this.analyticsClient);
+    }
+  }]);
+  return AnalyticsHelper;
+}();
+export { AnalyticsHelper as default };

package/dist/esm/analytics/performance.js

@@ -2,8 +2,8 @@ export var MEASURE_NAME;
 (function (MEASURE_NAME) {
   MEASURE_NAME["SOCKET_CONNECT"] = "socketConnect";
   MEASURE_NAME["DOCUMENT_INIT"] = "documentInit";
-  MEASURE_NAME["CONVERT_PM_TO_ADF"] = "convertPMToADF";
   MEASURE_NAME["COMMIT_UNCONFIRMED_STEPS"] = "commitUnconfirmedSteps";
+  MEASURE_NAME["PUBLISH_PAGE"] = "publishPage";
 })(MEASURE_NAME || (MEASURE_NAME = {}));
 var isPerformanceAPIAvailable = function isPerformanceAPIAvailable() {
   return typeof window !== 'undefined' && 'performance' in window && ['measure', 'clearMeasures', 'clearMarks', 'getEntriesByName', 'getEntriesByType'].every(function (api) {
@@ -12,47 +12,58 @@ var isPerformanceAPIAvailable = function isPerformanceAPIAvailable() {
 };
 var hasPerformanceAPIAvailable = isPerformanceAPIAvailable();
 var measureMap = new Map();
-export function startMeasure(measureName) {
-  if (!hasPerformanceAPIAvailable) {
-    return;
+export function startMeasure(measureName, analyticsHelper) {
+  try {
+    if (!hasPerformanceAPIAvailable) {
+      return;
+    }
+    performance.mark("".concat(measureName, "::start"));
+    measureMap.set(measureName, performance.now());
+  } catch (error) {
+    analyticsHelper === null || analyticsHelper === void 0 ? void 0 : analyticsHelper.sendErrorEvent(error, 'Error while measuring performance when marking the start');
   }
-  performance.mark("".concat(measureName, "::start"));
-  measureMap.set(measureName, performance.now());
 }
-export function stopMeasure(measureName, onMeasureComplete) {
-  if (!hasPerformanceAPIAvailable) {
-    return;
-  }
-
-  // `startMeasure` is not called with `measureName` before.
-  if (!measureMap.get(measureName)) {
-    return;
-  }
-  performance.mark("".concat(measureName, "::end"));
-  var start = onMeasureComplete ? measureMap.get(measureName) : undefined;
+export function stopMeasure(measureName, analyticsHelper, onMeasureComplete) {
+  var start;
   try {
+    if (!hasPerformanceAPIAvailable) {
+      return;
+    }
+
+    // `startMeasure` is not called with `measureName` before.
+    if (!measureMap.get(measureName)) {
+      return;
+    }
+    performance.mark("".concat(measureName, "::end"));
+    start = onMeasureComplete ? measureMap.get(measureName) : undefined;
     performance.measure(measureName, "".concat(measureName, "::start"), "".concat(measureName, "::end"));
-  } catch (e) {}
-  var entry = performance.getEntriesByName(measureName).pop();
-  clearMeasure(measureName);
-  var measure;
-  if (entry) {
-    measure = {
-      duration: entry.duration,
-      startTime: entry.startTime
-    };
-  } else if (start) {
-    measure = {
-      duration: performance.now() - start,
-      startTime: start
-    };
+  } catch (error) {
+    analyticsHelper === null || analyticsHelper === void 0 ? void 0 : analyticsHelper.sendErrorEvent(error, 'Error while measuring performance when marking the end');
   }
-  if (measure && onMeasureComplete) {
-    onMeasureComplete(measure.duration, measure.startTime);
+  try {
+    var entry = performance.getEntriesByName(measureName).pop();
+    clearMeasure(measureName);
+    var measure;
+    if (entry) {
+      measure = {
+        duration: entry.duration,
+        startTime: entry.startTime
+      };
+    } else if (start) {
+      measure = {
+        duration: performance.now() - start,
+        startTime: start
+      };
+    }
+    if (measure && onMeasureComplete) {
+      onMeasureComplete(measure.duration, measure.startTime);
+    }
+    return measure;
+  } catch (error) {
+    analyticsHelper === null || analyticsHelper === void 0 ? void 0 : analyticsHelper.sendErrorEvent(error, 'Error while measuring performance when completing the measurement');
   }
-  return measure;
 }
-export function clearMeasure(measureName) {
+function clearMeasure(measureName) {
   if (!hasPerformanceAPIAvailable) {
     return;
   }

package/dist/esm/analytics/ufo.js

@@ -0,0 +1,25 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ExperiencePerformanceTypes, ExperienceTypes, UFOExperience } from '@atlaskit/ufo';
+var createDocumentInitExperience = function createDocumentInitExperience() {
+  return new UFOExperience('collab-provider.document-init', {
+    type: ExperienceTypes.Load,
+    performanceType: ExperiencePerformanceTypes.Custom,
+    performanceConfig: {
+      histogram: _defineProperty({}, ExperiencePerformanceTypes.Custom, {
+        duration: '250_500_1000_1500_2000_3000_4000'
+      })
+    }
+  });
+};
+var withErrorHandling = function withErrorHandling(createExperience, analyticsHelper) {
+  var initExperience;
+  try {
+    initExperience = createExperience();
+  } catch (error) {
+    analyticsHelper === null || analyticsHelper === void 0 ? void 0 : analyticsHelper.sendErrorEvent(error, 'Error while initialising a UFO experience');
+  }
+  return initExperience;
+};
+export var createDocInitExp = function createDocInitExp(analyticsHelper) {
+  return withErrorHandling(createDocumentInitExperience, analyticsHelper);
+};

package/dist/esm/channel.js

@@ -12,35 +12,27 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import { utils } from '@atlaskit/util-service-support';
-// TODO: Validate if this is actually equivalent to the AnalyticsWebClient in @atlassiansox/analytics-web-client
-
 import { Emitter } from './emitter';
 import { ErrorCodeMapper } from './error-code-mapper';
 import { createLogger, getProduct, getSubProduct } from './helpers/utils';
 import { MEASURE_NAME, startMeasure, stopMeasure } from './analytics/performance';
-import { triggerAnalyticsEvent } from './analytics';
 import { EVENT_ACTION, EVENT_STATUS } from './helpers/const';
-import { ExperiencePerformanceTypes, ExperienceTypes, UFOExperience } from '@atlaskit/ufo';
+import ReconnectHelper from './connectivity/reconnect-helper';
+import { createDocInitExp } from './analytics/ufo';
+import Network from './connectivity/network';
 var logger = createLogger('Channel', 'green');
 export var Channel = /*#__PURE__*/function (_Emitter) {
   _inherits(Channel, _Emitter);
   var _super = _createSuper(Channel);
-  function Channel(config) {
+  function Channel(config, analyticsHelper) {
     var _this;
     _classCallCheck(this, Channel);
     _this = _super.call(this);
     _defineProperty(_assertThisInitialized(_this), "connected", false);
     _defineProperty(_assertThisInitialized(_this), "socket", null);
+    _defineProperty(_assertThisInitialized(_this), "reconnectHelper", null);
     _defineProperty(_assertThisInitialized(_this), "initialized", false);
-    _defineProperty(_assertThisInitialized(_this), "initExperience", new UFOExperience('collab-provider.document-init', {
-      type: ExperienceTypes.Load,
-      performanceType: ExperiencePerformanceTypes.Custom,
-      performanceConfig: {
-        histogram: _defineProperty({}, ExperiencePerformanceTypes.Custom, {
-          duration: '250_500_1000_1500_2000_3000_4000'
-        })
-      }
-    }));
+    _defineProperty(_assertThisInitialized(_this), "network", null);
     _defineProperty(_assertThisInitialized(_this), "getInitialized", function () {
       return _this.initialized;
     });
@@ -51,16 +43,12 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
       return _this.socket;
     });
     _defineProperty(_assertThisInitialized(_this), "onConnectError", function (error) {
-      var measure = stopMeasure(MEASURE_NAME.SOCKET_CONNECT);
-      triggerAnalyticsEvent({
-        eventAction: EVENT_ACTION.CONNECTION,
-        attributes: {
-          eventStatus: EVENT_STATUS.FAILURE,
-          error: error,
-          latency: measure === null || measure === void 0 ? void 0 : measure.duration,
-          documentAri: _this.config.documentAri
-        }
-      }, _this.analyticsClient);
+      var _this$analyticsHelper, _this$analyticsHelper2;
+      var measure = stopMeasure(MEASURE_NAME.SOCKET_CONNECT, _this.analyticsHelper);
+      (_this$analyticsHelper = _this.analyticsHelper) === null || _this$analyticsHelper === void 0 ? void 0 : _this$analyticsHelper.sendActionEvent(EVENT_ACTION.CONNECTION, EVENT_STATUS.FAILURE, {
+        latency: measure === null || measure === void 0 ? void 0 : measure.duration
+      });
+      (_this$analyticsHelper2 = _this.analyticsHelper) === null || _this$analyticsHelper2 === void 0 ? void 0 : _this$analyticsHelper2.sendErrorEvent(error, 'Error while establishing connection');
       // If error received with `data`, it means the connection is rejected
       // by the server on purpose for example no permission, so no need to
       // keep the underneath connection, need to close. But some error like
@@ -74,18 +62,29 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
         data: error.data
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "onReconnectError", function (error) {
+      var _this$reconnectHelper, _this$reconnectHelper2;
+      (_this$reconnectHelper = _this.reconnectHelper) === null || _this$reconnectHelper === void 0 ? void 0 : _this$reconnectHelper.countReconnectError();
+      if ((_this$reconnectHelper2 = _this.reconnectHelper) !== null && _this$reconnectHelper2 !== void 0 && _this$reconnectHelper2.isLikelyNetworkIssue()) {
+        var _this$analyticsHelper3;
+        (_this$analyticsHelper3 = _this.analyticsHelper) === null || _this$analyticsHelper3 === void 0 ? void 0 : _this$analyticsHelper3.sendErrorEvent(error, 'Likely network issue while reconnecting the channel');
+        _this.emit('error', {
+          message: 'Reconnection failed 8 times when browser was offline, likely there was a network issue.',
+          data: {
+            status: 400,
+            code: 'RECONNECTION_NETWORK_ISSUE'
+          }
+        });
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onConnect", function () {
+      var _this$analyticsHelper4;
       _this.connected = true;
       logger('Connected.', _this.socket.id);
-      var measure = stopMeasure(MEASURE_NAME.SOCKET_CONNECT);
-      triggerAnalyticsEvent({
-        eventAction: EVENT_ACTION.CONNECTION,
-        attributes: {
-          eventStatus: EVENT_STATUS.SUCCESS,
-          latency: measure === null || measure === void 0 ? void 0 : measure.duration,
-          documentAri: _this.config.documentAri
-        }
-      }, _this.analyticsClient);
+      var measure = stopMeasure(MEASURE_NAME.SOCKET_CONNECT, _this.analyticsHelper);
+      (_this$analyticsHelper4 = _this.analyticsHelper) === null || _this$analyticsHelper4 === void 0 ? void 0 : _this$analyticsHelper4.sendActionEvent(EVENT_ACTION.CONNECTION, EVENT_STATUS.SUCCESS, {
+        latency: measure === null || measure === void 0 ? void 0 : measure.duration
+      });
       _this.emit('connected', {
         sid: _this.socket.id,
         initialized: _this.initialized
@@ -96,19 +95,16 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
       logger('Session ID is', _this.socket.id);
       if (data.type === 'initial') {
         if (!_this.initialized) {
-          var measure = stopMeasure(MEASURE_NAME.DOCUMENT_INIT);
-          _this.initExperience.success();
-          triggerAnalyticsEvent({
-            eventAction: EVENT_ACTION.DOCUMENT_INIT,
-            attributes: {
-              eventStatus: EVENT_STATUS.SUCCESS,
-              // TODO: detect when document init fails and fire corresponding event for it
-              latency: measure === null || measure === void 0 ? void 0 : measure.duration,
-              documentAri: _this.config.documentAri,
-              requiredPageRecovery: data === null || data === void 0 ? void 0 : data.requiredPageRecovery,
-              ttlEnabled: data === null || data === void 0 ? void 0 : data.ttlEnabled
-            }
-          }, _this.analyticsClient);
+          var _this$initExperience, _this$analyticsHelper5;
+          var measure = stopMeasure(MEASURE_NAME.DOCUMENT_INIT, _this.analyticsHelper);
+          (_this$initExperience = _this.initExperience) === null || _this$initExperience === void 0 ? void 0 : _this$initExperience.success();
+          (_this$analyticsHelper5 = _this.analyticsHelper) === null || _this$analyticsHelper5 === void 0 ? void 0 : _this$analyticsHelper5.sendActionEvent(EVENT_ACTION.DOCUMENT_INIT,
+          // TODO: detect when document init fails and fire corresponding event for it
+          EVENT_STATUS.SUCCESS, {
+            latency: measure === null || measure === void 0 ? void 0 : measure.duration,
+            resetReason: data === null || data === void 0 ? void 0 : data.resetReason,
+            ttlEnabled: data === null || data === void 0 ? void 0 : data.ttlEnabled
+          });
           var doc = data.doc,
             version = data.version,
             userId = data.userId,
@@ -137,10 +133,17 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
         _this.emit('steps:added', data);
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "onOnlineHandler", function () {
+      // Force an immediate reconnect, the socket must first be closed to reset reconnection delay logic
+      if (!_this.connected) {
+        var _this$socket2, _this$socket3;
+        (_this$socket2 = _this.socket) === null || _this$socket2 === void 0 ? void 0 : _this$socket2.close();
+        (_this$socket3 = _this.socket) === null || _this$socket3 === void 0 ? void 0 : _this$socket3.connect();
+      }
+    });
     _this.config = config;
-    if (config.analyticsClient) {
-      _this.analyticsClient = config.analyticsClient;
-    }
+    _this.analyticsHelper = analyticsHelper;
+    _this.initExperience = createDocInitExp(_this.analyticsHelper);
     return _this;
   }
 
@@ -153,10 +156,11 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
      */
     function connect() {
       var _this2 = this;
-      startMeasure(MEASURE_NAME.SOCKET_CONNECT);
+      startMeasure(MEASURE_NAME.SOCKET_CONNECT, this.analyticsHelper);
       if (!this.initialized) {
-        startMeasure(MEASURE_NAME.DOCUMENT_INIT);
-        this.initExperience.start();
+        var _this$initExperience2;
+        startMeasure(MEASURE_NAME.DOCUMENT_INIT, this.analyticsHelper);
+        (_this$initExperience2 = this.initExperience) === null || _this$initExperience2 === void 0 ? void 0 : _this$initExperience2.start();
       }
       var _this$config = this.config,
         documentAri = _this$config.documentAri,
@@ -232,6 +236,7 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
       });
       this.socket.on('disconnect', /*#__PURE__*/function () {
         var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(reason) {
+          var _this2$analyticsHelpe;
           return _regeneratorRuntime.wrap(function _callee$(_context) {
             while (1) {
               switch (_context.prev = _context.next) {
@@ -243,7 +248,18 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
                   });
                   if (reason === 'io server disconnect' && _this2.socket) {
                     // The disconnection was initiated by the server, we need to reconnect manually.
-                    _this2.socket.connect();
+                    try {
+                      _this2.socket.connect();
+                    } catch (error) {
+                      (_this2$analyticsHelpe = _this2.analyticsHelper) === null || _this2$analyticsHelpe === void 0 ? void 0 : _this2$analyticsHelpe.sendErrorEvent(error, 'Error while reconnecting the channel');
+                      _this2.emit('error', {
+                        message: 'Caught error during reconnection.',
+                        data: {
+                          status: 500,
+                          code: 'RECONNECTION_ERROR'
+                        }
+                      });
+                    }
                   }
                 case 4:
                 case "end":
@@ -257,14 +273,26 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
         };
       }());
 
-      // Socket error, including errors from `packetMiddleware`, `controllers` and `onconnect` and more. Paramter is a plain JSON object.
+      // Socket error, including errors from `packetMiddleware`, `controllers` and `onconnect` and more. Parameter is a plain JSON object.
       this.socket.on('error', function (error) {
         _this2.emit('error', error);
       });
 
-      // `connect_error`'s paramter type is `Error`.
+      // `connect_error`'s parameter type is `Error`.
       // Ensure the error emit to the provider has the same structure, so we can handle them unified.
       this.socket.on('connect_error', this.onConnectError);
+
+      // To trigger reconnection when browser comes back online
+      if (!this.network) {
+        this.network = new Network({
+          onlineCallback: this.onOnlineHandler
+        });
+      }
+
+      // Helper class to track reconnection issues, to emit an error if too many failed reconnection attempts happen
+      this.reconnectHelper = new ReconnectHelper();
+      // Fired upon a reconnection attempt error (from Socket.IO Manager)
+      this.socket.io.on('reconnect_error', this.onReconnectError);
     }
   }, {
     key: "fetchCatchup",
@@ -375,7 +403,7 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
                   }
                 };
                 this.emit('error', errorCatchup);
-                return _context2.abrupt("return", {});
+                throw _context2.t19;
               case 52:
               case "end":
                 return _context2.stop();
@@ -420,10 +448,15 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
   }, {
     key: "disconnect",
     value: function disconnect() {
+      var _this$network;
       this.unsubscribeAll();
+      (_this$network = this.network) === null || _this$network === void 0 ? void 0 : _this$network.destroy();
+      this.network = null;
       if (this.socket) {
+        var _this$reconnectHelper3;
         this.socket.close();
         this.socket = null;
+        (_this$reconnectHelper3 = this.reconnectHelper) === null || _this$reconnectHelper3 === void 0 ? void 0 : _this$reconnectHelper3.destroy();
       }
     }
   }]);

package/dist/esm/connectivity/network.js

@@ -0,0 +1,45 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export var NetworkStatus;
+(function (NetworkStatus) {
+  NetworkStatus["ONLINE"] = "ONLINE";
+  NetworkStatus["OFFLINE"] = "OFFLINE";
+})(NetworkStatus || (NetworkStatus = {}));
+var Network = /*#__PURE__*/function () {
+  function Network(props) {
+    var _this = this;
+    _classCallCheck(this, Network);
+    _defineProperty(this, "offlineHandler", function () {
+      _this.status = NetworkStatus.OFFLINE;
+    });
+    _defineProperty(this, "onlineHandler", function () {
+      _this.status = NetworkStatus.ONLINE;
+      if (_this.onlineCallback) {
+        _this.onlineCallback();
+      }
+    });
+    if (props !== null && props !== void 0 && props.initialStatus) {
+      this.status = props.initialStatus;
+    }
+    if (props !== null && props !== void 0 && props.onlineCallback) {
+      this.onlineCallback = props.onlineCallback;
+    }
+    window.addEventListener('offline', this.offlineHandler);
+    window.addEventListener('online', this.onlineHandler);
+  }
+  _createClass(Network, [{
+    key: "getStatus",
+    value: function getStatus() {
+      return this.status || null;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      window.removeEventListener('offline', this.offlineHandler);
+      window.removeEventListener('online', this.onlineHandler);
+    }
+  }]);
+  return Network;
+}();
+export { Network as default };

package/dist/esm/connectivity/reconnect-helper.js

@@ -0,0 +1,42 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { NetworkStatus } from './network';
+import { network } from './singleton';
+
+// Calculation for max 8 offline reconnect attempts, with reconnection delay 200ms, randomization factor 0.5, reconnection delay max 128s
+// Min: 800ms, Avg: 51s, Max: 6m
+var FAILED_RECONNECTS_WHILE_OFFLINE_THRESHOLD = 8;
+var ReconnectHelper = /*#__PURE__*/function () {
+  function ReconnectHelper() {
+    var _this = this;
+    _classCallCheck(this, ReconnectHelper);
+    _defineProperty(this, "failedReconnectCount", 0);
+    _defineProperty(this, "onlineHandler", function () {
+      _this.failedReconnectCount = 0;
+    });
+    window.addEventListener('online', this.onlineHandler);
+  }
+  _createClass(ReconnectHelper, [{
+    key: "countReconnectError",
+    value: function countReconnectError() {
+      // Only count the reconnection attempts when offline
+      if (network.getStatus() === NetworkStatus.OFFLINE) {
+        this.failedReconnectCount++;
+      }
+    }
+  }, {
+    key: "isLikelyNetworkIssue",
+    value: function isLikelyNetworkIssue() {
+      var isLikelyNetworkIssue = this.failedReconnectCount >= FAILED_RECONNECTS_WHILE_OFFLINE_THRESHOLD;
+      return isLikelyNetworkIssue;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      window.removeEventListener('online', this.onlineHandler);
+    }
+  }]);
+  return ReconnectHelper;
+}();
+export { ReconnectHelper as default };

package/dist/esm/connectivity/singleton.js

@@ -0,0 +1,7 @@
+import Network, { NetworkStatus } from './network';
+
+// Assume the connection is established at first
+var network = new Network({
+  initialStatus: NetworkStatus.ONLINE
+});
+export { network };