@atlaskit/collab-provider 36.0.4 → 36.0.6

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/collab-provider
 
+## 36.0.6
+
+### Patch Changes
+
+- [`283c2b7c4aed3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/283c2b7c4aed3) -
+  Presence connects with WebSocket first and falls back to long polling only when WebSocket fails,
+  behind `platform_editor_presence_ws_first_with_fallback`
+- Updated dependencies
+
+## 36.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 36.0.4
 
 ### Patch Changes

package/dist/cjs/socket-io-provider.js

@@ -4,12 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.WEBSOCKET_CONNECT_TIMEOUT_MS = void 0;
 exports.createSocketIOCollabProvider = createSocketIOCollabProvider;
 exports.createSocketIOSocket = createSocketIOSocket;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _socket = require("socket.io-client");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _config = require("./config");
+var _const = require("./helpers/const");
 var _utils = require("./helpers/utils");
 var _provider = require("./provider");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -21,6 +23,7 @@ function createSocketIOSocket(url, auth, productInfo, isPresenceOnly, analyticsH
   var socketIOOptions = _config.SOCKET_IO_OPTIONS;
   // Default: polling first, with WebSocket upgrade fallback
   var transports = ['polling', 'websocket'];
+  var presenceWebSocketFirst = false;
 
   // Determine transport strategy based on connection type and tenant.
   // https://socket.io/docs/v4/client-options/#transports
@@ -39,10 +42,11 @@ function createSocketIOSocket(url, auth, productInfo, isPresenceOnly, analyticsH
   };
   switch (getConnectionCase()) {
     case 'presence':
-      // Presence for all tenants (commercial, GCP, IC, …): WebSocket only when flag is enabled
+      // Presence for all tenants (commercial, GCP, IC, …): WebSocket first, polling only when WebSocket fails
       socketIOOptions = _config.SOCKET_IO_OPTIONS_WITH_HIGH_JITTER;
-      if ((0, _fg.fg)('platform-editor-presence-websocket-only')) {
-        transports = ['websocket'];
+      if ((0, _fg.fg)('platform_editor_presence_ws_first_with_fallback')) {
+        transports = ['websocket', 'polling'];
+        presenceWebSocketFirst = true;
       }
       break;
     case 'gcp-collab':
@@ -67,15 +71,74 @@ function createSocketIOSocket(url, auth, productInfo, isPresenceOnly, analyticsH
     closeOnBeforeunload: false,
     withCredentials: true,
     transports: transports,
+    // When WebSocket is rejected while opening, try polling in the same attempt
+    tryAllTransports: presenceWebSocketFirst,
     path: path ? "".concat(path, "/socket.io") : "/".concat(pathname.split('/')[1], "/socket.io"),
     auth: auth,
     extraHeaders: extraHeaders,
-    query: {
+    query: _objectSpread({
       sourceId: documentAri === null || documentAri === void 0 ? void 0 : documentAri.split('/')[1]
-    }
+    }, presenceWebSocketFirst ? extraHeaders : {})
   });
+  if (presenceWebSocketFirst) {
+    addPollingFallback(client, url, analyticsHelper);
+  }
   return client;
 }
+
+// Long enough for the permission token fetch on a slow network. A false trigger only restores polling-first.
+var WEBSOCKET_CONNECT_TIMEOUT_MS = exports.WEBSOCKET_CONNECT_TIMEOUT_MS = 8000;
+
+/**
+ * `tryAllTransports` only covers a WebSocket that fails fast. Some proxies hang the upgrade, or accept it and
+ * drop every frame, and then no error fires. Switch to polling-first when WebSocket does not connect in time,
+ * or fails at the transport level. A server rejection (error with `data`) proves WebSocket works, so it never
+ * triggers the fallback. Once switched, all reconnects of this socket use polling-first.
+ */
+function addPollingFallback(client, url, analyticsHelper) {
+  var timer;
+  var webSocketWorks = false;
+  var isWebSocketFirst = function isWebSocketFirst() {
+    var _client$io$opts$trans;
+    return !webSocketWorks && ((_client$io$opts$trans = client.io.opts.transports) === null || _client$io$opts$trans === void 0 ? void 0 : _client$io$opts$trans[0]) === 'websocket';
+  };
+  var fallbackToPolling = function fallbackToPolling(reason) {
+    clearTimeout(timer);
+    if (!isWebSocketFirst() || typeof navigator !== 'undefined' && navigator.onLine === false) {
+      return;
+    }
+    client.io.opts.transports = ['polling', 'websocket'];
+    client.io.opts.tryAllTransports = false;
+    analyticsHelper === null || analyticsHelper === void 0 || analyticsHelper.sendActionEvent(_const.EVENT_ACTION.POLLING_FALLBACK, _const.EVENT_STATUS.INFO, {
+      url: url,
+      reason: reason
+    });
+    client.disconnect().connect();
+  };
+  var startTimer = function startTimer() {
+    clearTimeout(timer);
+    if (isWebSocketFirst()) {
+      timer = setTimeout(function () {
+        return !client.connected && fallbackToPolling('timeout');
+      }, WEBSOCKET_CONNECT_TIMEOUT_MS);
+    }
+  };
+  startTimer();
+  client.io.on('reconnect_attempt', startTimer);
+  client.on('connect', function () {
+    clearTimeout(timer);
+    webSocketWorks || (webSocketWorks = client.io.engine.transport.name === 'websocket');
+  });
+  client.on('connect_error', function (error) {
+    if (error.data) {
+      var _client$io$opts$trans2;
+      clearTimeout(timer);
+      webSocketWorks || (webSocketWorks = ((_client$io$opts$trans2 = client.io.opts.transports) === null || _client$io$opts$trans2 === void 0 ? void 0 : _client$io$opts$trans2[0]) === 'websocket');
+    } else if (error.type === 'TransportError' || error.message === 'timeout') {
+      fallbackToPolling(error.message);
+    }
+  });
+}
 function createSocketIOCollabProvider(config) {
   return new _provider.Provider(_objectSpread(_objectSpread({}, config), {}, {
     createSocket: createSocketIOSocket

package/dist/cjs/version-wrapper.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = exports.name = "@atlaskit/collab-provider";
-var version = exports.version = "36.0.3";
+var version = exports.version = "36.0.5";
 var nextMajorVersion = exports.nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/socket-io-provider.js

@@ -1,6 +1,7 @@
 import { io } from 'socket.io-client';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { SOCKET_IO_OPTIONS, SOCKET_IO_OPTIONS_WITH_HIGH_JITTER } from './config';
+import { EVENT_ACTION, EVENT_STATUS } from './helpers/const';
 import { getProduct, getSubProduct, isGCPtenant } from './helpers/utils';
 import { Provider } from './provider';
 export function createSocketIOSocket(url, auth, productInfo, isPresenceOnly, analyticsHelper, path, documentAri) {
@@ -11,6 +12,7 @@ export function createSocketIOSocket(url, auth, productInfo, isPresenceOnly, ana
   let socketIOOptions = SOCKET_IO_OPTIONS;
   // Default: polling first, with WebSocket upgrade fallback
   let transports = ['polling', 'websocket'];
+  let presenceWebSocketFirst = false;
 
   // Determine transport strategy based on connection type and tenant.
   // https://socket.io/docs/v4/client-options/#transports
@@ -29,10 +31,11 @@ export function createSocketIOSocket(url, auth, productInfo, isPresenceOnly, ana
   };
   switch (getConnectionCase()) {
     case 'presence':
-      // Presence for all tenants (commercial, GCP, IC, …): WebSocket only when flag is enabled
+      // Presence for all tenants (commercial, GCP, IC, …): WebSocket first, polling only when WebSocket fails
       socketIOOptions = SOCKET_IO_OPTIONS_WITH_HIGH_JITTER;
-      if (fg('platform-editor-presence-websocket-only')) {
-        transports = ['websocket'];
+      if (fg('platform_editor_presence_ws_first_with_fallback')) {
+        transports = ['websocket', 'polling'];
+        presenceWebSocketFirst = true;
       }
       break;
     case 'gcp-collab':
@@ -57,15 +60,74 @@ export function createSocketIOSocket(url, auth, productInfo, isPresenceOnly, ana
     closeOnBeforeunload: false,
     withCredentials: true,
     transports,
+    // When WebSocket is rejected while opening, try polling in the same attempt
+    tryAllTransports: presenceWebSocketFirst,
     path: path ? `${path}/socket.io` : `/${pathname.split('/')[1]}/socket.io`,
     auth,
     extraHeaders,
     query: {
-      sourceId: documentAri === null || documentAri === void 0 ? void 0 : documentAri.split('/')[1]
+      sourceId: documentAri === null || documentAri === void 0 ? void 0 : documentAri.split('/')[1],
+      // Browsers cannot send extraHeaders on a WebSocket handshake, so the BE reads these from the query too
+      ...(presenceWebSocketFirst ? extraHeaders : {})
     }
   });
+  if (presenceWebSocketFirst) {
+    addPollingFallback(client, url, analyticsHelper);
+  }
   return client;
 }
+
+// Long enough for the permission token fetch on a slow network. A false trigger only restores polling-first.
+export const WEBSOCKET_CONNECT_TIMEOUT_MS = 8000;
+
+/**
+ * `tryAllTransports` only covers a WebSocket that fails fast. Some proxies hang the upgrade, or accept it and
+ * drop every frame, and then no error fires. Switch to polling-first when WebSocket does not connect in time,
+ * or fails at the transport level. A server rejection (error with `data`) proves WebSocket works, so it never
+ * triggers the fallback. Once switched, all reconnects of this socket use polling-first.
+ */
+function addPollingFallback(client, url, analyticsHelper) {
+  let timer;
+  let webSocketWorks = false;
+  const isWebSocketFirst = () => {
+    var _client$io$opts$trans;
+    return !webSocketWorks && ((_client$io$opts$trans = client.io.opts.transports) === null || _client$io$opts$trans === void 0 ? void 0 : _client$io$opts$trans[0]) === 'websocket';
+  };
+  const fallbackToPolling = reason => {
+    clearTimeout(timer);
+    if (!isWebSocketFirst() || typeof navigator !== 'undefined' && navigator.onLine === false) {
+      return;
+    }
+    client.io.opts.transports = ['polling', 'websocket'];
+    client.io.opts.tryAllTransports = false;
+    analyticsHelper === null || analyticsHelper === void 0 ? void 0 : analyticsHelper.sendActionEvent(EVENT_ACTION.POLLING_FALLBACK, EVENT_STATUS.INFO, {
+      url,
+      reason
+    });
+    client.disconnect().connect();
+  };
+  const startTimer = () => {
+    clearTimeout(timer);
+    if (isWebSocketFirst()) {
+      timer = setTimeout(() => !client.connected && fallbackToPolling('timeout'), WEBSOCKET_CONNECT_TIMEOUT_MS);
+    }
+  };
+  startTimer();
+  client.io.on('reconnect_attempt', startTimer);
+  client.on('connect', () => {
+    clearTimeout(timer);
+    webSocketWorks ||= client.io.engine.transport.name === 'websocket';
+  });
+  client.on('connect_error', error => {
+    if (error.data) {
+      var _client$io$opts$trans2;
+      clearTimeout(timer);
+      webSocketWorks ||= ((_client$io$opts$trans2 = client.io.opts.transports) === null || _client$io$opts$trans2 === void 0 ? void 0 : _client$io$opts$trans2[0]) === 'websocket';
+    } else if (error.type === 'TransportError' || error.message === 'timeout') {
+      fallbackToPolling(error.message);
+    }
+  });
+}
 export function createSocketIOCollabProvider(config) {
   return new Provider({
     ...config,

package/dist/es2019/version-wrapper.js

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

package/dist/esm/socket-io-provider.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { io } from 'socket.io-client';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { SOCKET_IO_OPTIONS, SOCKET_IO_OPTIONS_WITH_HIGH_JITTER } from './config';
+import { EVENT_ACTION, EVENT_STATUS } from './helpers/const';
 import { getProduct, getSubProduct, isGCPtenant } from './helpers/utils';
 import { Provider } from './provider';
 export function createSocketIOSocket(url, auth, productInfo, isPresenceOnly, analyticsHelper, path, documentAri) {
@@ -13,6 +14,7 @@ export function createSocketIOSocket(url, auth, productInfo, isPresenceOnly, ana
   var socketIOOptions = SOCKET_IO_OPTIONS;
   // Default: polling first, with WebSocket upgrade fallback
   var transports = ['polling', 'websocket'];
+  var presenceWebSocketFirst = false;
 
   // Determine transport strategy based on connection type and tenant.
   // https://socket.io/docs/v4/client-options/#transports
@@ -31,10 +33,11 @@ export function createSocketIOSocket(url, auth, productInfo, isPresenceOnly, ana
   };
   switch (getConnectionCase()) {
     case 'presence':
-      // Presence for all tenants (commercial, GCP, IC, …): WebSocket only when flag is enabled
+      // Presence for all tenants (commercial, GCP, IC, …): WebSocket first, polling only when WebSocket fails
       socketIOOptions = SOCKET_IO_OPTIONS_WITH_HIGH_JITTER;
-      if (fg('platform-editor-presence-websocket-only')) {
-        transports = ['websocket'];
+      if (fg('platform_editor_presence_ws_first_with_fallback')) {
+        transports = ['websocket', 'polling'];
+        presenceWebSocketFirst = true;
       }
       break;
     case 'gcp-collab':
@@ -59,15 +62,74 @@ export function createSocketIOSocket(url, auth, productInfo, isPresenceOnly, ana
     closeOnBeforeunload: false,
     withCredentials: true,
     transports: transports,
+    // When WebSocket is rejected while opening, try polling in the same attempt
+    tryAllTransports: presenceWebSocketFirst,
     path: path ? "".concat(path, "/socket.io") : "/".concat(pathname.split('/')[1], "/socket.io"),
     auth: auth,
     extraHeaders: extraHeaders,
-    query: {
+    query: _objectSpread({
       sourceId: documentAri === null || documentAri === void 0 ? void 0 : documentAri.split('/')[1]
-    }
+    }, presenceWebSocketFirst ? extraHeaders : {})
   });
+  if (presenceWebSocketFirst) {
+    addPollingFallback(client, url, analyticsHelper);
+  }
   return client;
 }
+
+// Long enough for the permission token fetch on a slow network. A false trigger only restores polling-first.
+export var WEBSOCKET_CONNECT_TIMEOUT_MS = 8000;
+
+/**
+ * `tryAllTransports` only covers a WebSocket that fails fast. Some proxies hang the upgrade, or accept it and
+ * drop every frame, and then no error fires. Switch to polling-first when WebSocket does not connect in time,
+ * or fails at the transport level. A server rejection (error with `data`) proves WebSocket works, so it never
+ * triggers the fallback. Once switched, all reconnects of this socket use polling-first.
+ */
+function addPollingFallback(client, url, analyticsHelper) {
+  var timer;
+  var webSocketWorks = false;
+  var isWebSocketFirst = function isWebSocketFirst() {
+    var _client$io$opts$trans;
+    return !webSocketWorks && ((_client$io$opts$trans = client.io.opts.transports) === null || _client$io$opts$trans === void 0 ? void 0 : _client$io$opts$trans[0]) === 'websocket';
+  };
+  var fallbackToPolling = function fallbackToPolling(reason) {
+    clearTimeout(timer);
+    if (!isWebSocketFirst() || typeof navigator !== 'undefined' && navigator.onLine === false) {
+      return;
+    }
+    client.io.opts.transports = ['polling', 'websocket'];
+    client.io.opts.tryAllTransports = false;
+    analyticsHelper === null || analyticsHelper === void 0 || analyticsHelper.sendActionEvent(EVENT_ACTION.POLLING_FALLBACK, EVENT_STATUS.INFO, {
+      url: url,
+      reason: reason
+    });
+    client.disconnect().connect();
+  };
+  var startTimer = function startTimer() {
+    clearTimeout(timer);
+    if (isWebSocketFirst()) {
+      timer = setTimeout(function () {
+        return !client.connected && fallbackToPolling('timeout');
+      }, WEBSOCKET_CONNECT_TIMEOUT_MS);
+    }
+  };
+  startTimer();
+  client.io.on('reconnect_attempt', startTimer);
+  client.on('connect', function () {
+    clearTimeout(timer);
+    webSocketWorks || (webSocketWorks = client.io.engine.transport.name === 'websocket');
+  });
+  client.on('connect_error', function (error) {
+    if (error.data) {
+      var _client$io$opts$trans2;
+      clearTimeout(timer);
+      webSocketWorks || (webSocketWorks = ((_client$io$opts$trans2 = client.io.opts.transports) === null || _client$io$opts$trans2 === void 0 ? void 0 : _client$io$opts$trans2[0]) === 'websocket');
+    } else if (error.type === 'TransportError' || error.message === 'timeout') {
+      fallbackToPolling(error.message);
+    }
+  });
+}
 export function createSocketIOCollabProvider(config) {
   return new Provider(_objectSpread(_objectSpread({}, config), {}, {
     createSocket: createSocketIOSocket

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/collab-provider";
-export var version = "36.0.3";
+export var version = "36.0.5";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/helpers/const.d.ts

@@ -302,7 +302,8 @@ type StepsRebasedAnalyticsEvent = {
 type PollingFallbackAnalyticsEvent = {
     attributes: {
         eventStatus: EVENT_STATUS.INFO;
-        url: 'string';
+        reason: string;
+        url: string;
     } & BaseActionAnalyticsEventAttributes;
     eventAction: EVENT_ACTION.POLLING_FALLBACK;
 };

package/dist/types/socket-io-provider.d.ts

@@ -3,4 +3,5 @@ import type AnalyticsHelper from './analytics/analytics-helper';
 import { Provider } from './provider';
 import type { Config, ProductInformation, InitAndAuthData, AuthCallback } from './types';
 export declare function createSocketIOSocket(url: string, auth?: AuthCallback | InitAndAuthData, productInfo?: ProductInformation, isPresenceOnly?: boolean, analyticsHelper?: AnalyticsHelper, path?: string, documentAri?: string): Socket;
+export declare const WEBSOCKET_CONNECT_TIMEOUT_MS = 8000;
 export declare function createSocketIOCollabProvider(config: Omit<Config, 'createSocket'>): Provider;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/collab-provider",
-	"version": "36.0.4",
+	"version": "36.0.6",
 	"description": "A provider for collaborative editing.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/prosemirror-collab": "^1.1.0",
 		"@atlaskit/react-ufo": "^8.1.0",
-		"@atlaskit/tmp-editor-statsig": "^239.0.0",
+		"@atlaskit/tmp-editor-statsig": "^240.0.0",
 		"@atlaskit/ufo": "^2.0.0",
 		"@atlaskit/util-service-support": "^7.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -38,7 +38,7 @@
 		"eventemitter2": "^4.1.0",
 		"lodash": "^4.17.21",
 		"prosemirror-changeset": "^2.3.1",
-		"socket.io-client": "^4.7.5",
+		"socket.io-client": "^4.8.4",
 		"uuid": "^11.1.1"
 	},
 	"devDependencies": {
@@ -64,7 +64,7 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform-editor-presence-websocket-only": {
+		"platform_editor_presence_ws_first_with_fallback": {
 			"type": "boolean"
 		},
 		"collab_edit_via_websocket_only_for_gcp": {