@dynamic-labs/react-native-extension 4.83.0 → 4.83.2-alpha.0

package/index.cjs

@@ -8,6 +8,7 @@ var react = require('react');
 var reactNativeWebview = require('react-native-webview');
 var logger$1 = require('@dynamic-labs/logger');
 var messageTransport = require('@dynamic-labs/message-transport');
+var webviewMessages = require('@dynamic-labs/webview-messages');
 var jsxRuntime = require('react/jsx-runtime');
 var expoModulesCore = require('expo-modules-core');
 var reactNativePasskey = require('react-native-passkey');
@@ -34,7 +35,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var version = "4.83.0";
+var version = "4.83.2-alpha.0";
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -47,8 +48,9 @@ function _extends() {
 }
 
 class WebViewFailedToLoadError extends Error {
-  constructor() {
+  constructor(meta) {
     super('Could not load Dynamic WebView');
+    this.meta = meta;
   }
 }
 
@@ -121,6 +123,122 @@ const useMessageTransportWebViewBridge = (core, webViewRef) => {
   };
 };
 
+const CLEAR_STATE_PARAM = 'clear-state';
+const ENVIRONMENT_ID_PARAM = 'environmentId';
+const WEBVIEW_START_TIME_PARAM = 'webviewStartTime';
+
+const hasClearStateInUrl = webViewUrl => Boolean(webViewUrl.searchParams.get(CLEAR_STATE_PARAM));
+
+const MANIFEST_MESSAGE_TYPE$1 = 'manifest';
+const RETRY_QUERY_PARAM = 'retry';
+const emptyPerAttemptState$1 = () => ({
+  htmlLoadStartedAt: null,
+  htmlLoadedAt: null,
+  manifestReceivedAt: null,
+  onLoadEndAt: null,
+  sdkReadyAt: null
+});
+const diffMs$1 = (later, earlier) => later !== null && earlier !== null ? later - earlier : null;
+const readRetryCount = webViewUrl => {
+  const raw = webViewUrl.searchParams.get(RETRY_QUERY_PARAM);
+  if (raw === null) return 0;
+  const parsed = Number(raw);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+/**
+ * Tracks how long each step of the WebView load took, so when we raise
+ * `WebViewFailedToLoadError` we can attach the timings to the error log.
+ *
+ * The timings cover the host-side phases of the load — the webview-side
+ * timings (`webview.time_to_load_manifest`, `webview.time_to_sdk_ready`)
+ * still come from the webview itself once it boots, but those don't help
+ * when the webview never boots in the first place.
+ */
+const useWebViewPhaseTimers = ({
+  core,
+  webViewUrl,
+  loadingTimeout,
+  recoveryTimeout
+}) => {
+  const perAttemptRef = react.useRef(emptyPerAttemptState$1());
+  const nativeErrorCountRef = react.useRef(0);
+  const osKillCountRef = react.useRef(0);
+  const webViewUrlRef = react.useRef(webViewUrl);
+  webViewUrlRef.current = webViewUrl;
+  /**
+   * Listen on the message transport for the two webview-originated
+   * messages that mark "JS bundle alive" and "SDK ready".
+   *
+   * We only record the first occurrence per attempt so that a healthy
+   * reload doesn't overwrite the timing from the attempt that ultimately
+   * failed.
+   */
+  react.useEffect(() => {
+    const handler = message => {
+      if (message.origin !== 'webview') return;
+      if (message.type === MANIFEST_MESSAGE_TYPE$1 && perAttemptRef.current.manifestReceivedAt === null) {
+        perAttemptRef.current.manifestReceivedAt = Date.now();
+      }
+      if (message.type === webviewMessages.sdkHasLoadedEventName && perAttemptRef.current.sdkReadyAt === null) {
+        perAttemptRef.current.sdkReadyAt = Date.now();
+      }
+    };
+    core.messageTransport.on(handler);
+    return () => core.messageTransport.off(handler);
+  }, [core]);
+  const recordEvent = react.useCallback(event => {
+    const now = Date.now();
+    switch (event) {
+      case 'load_start':
+        perAttemptRef.current = emptyPerAttemptState$1();
+        perAttemptRef.current.htmlLoadStartedAt = now;
+        break;
+      case 'load':
+        perAttemptRef.current.htmlLoadedAt = now;
+        break;
+      case 'load_end':
+        perAttemptRef.current.onLoadEndAt = now;
+        break;
+      case 'native_error':
+        nativeErrorCountRef.current += 1;
+        break;
+      case 'os_kill':
+        osKillCountRef.current += 1;
+        break;
+    }
+  }, []);
+  const getMeta = react.useCallback(({
+    phase
+  }) => {
+    const url = webViewUrlRef.current;
+    const {
+      htmlLoadStartedAt,
+      htmlLoadedAt,
+      onLoadEndAt,
+      manifestReceivedAt,
+      sdkReadyAt
+    } = perAttemptRef.current;
+    return {
+      hadClearState: hasClearStateInUrl(url),
+      htmlLoadMs: diffMs$1(htmlLoadedAt, htmlLoadStartedAt),
+      loadingTimeoutMs: loadingTimeout,
+      manifestReceivedMs: diffMs$1(manifestReceivedAt, onLoadEndAt),
+      nativeErrorCount: nativeErrorCountRef.current,
+      onLoadToOnLoadEndMs: diffMs$1(onLoadEndAt, htmlLoadedAt),
+      osKillCount: osKillCountRef.current,
+      phase,
+      recoveryTimeoutMs: recoveryTimeout,
+      retryCount: readRetryCount(url),
+      sdkReadyMs: diffMs$1(sdkReadyAt, onLoadEndAt),
+      webviewUrl: url.toString()
+    };
+  }, [loadingTimeout, recoveryTimeout]);
+  return {
+    getMeta,
+    recordEvent
+  };
+};
+
 const useWebViewVisibility = core => {
   const webViewVisibilityRequestChannelRef = react.useRef(messageTransport.createRequestChannel(core.messageTransport));
   const [visible, setVisible] = react.useState(false);
@@ -157,10 +275,6 @@ const styles = reactNative.StyleSheet.create({
   }
 });
 
-const CLEAR_STATE_PARAM = 'clear-state';
-const ENVIRONMENT_ID_PARAM = 'environmentId';
-const WEBVIEW_START_TIME_PARAM = 'webviewStartTime';
-
 const setClearStateToUrl = webViewUrl => {
   const newWebViewUrl = new URL(webViewUrl);
   newWebViewUrl.searchParams.set(CLEAR_STATE_PARAM, 'true');
@@ -168,8 +282,6 @@ const setClearStateToUrl = webViewUrl => {
   return newWebViewUrl;
 };
 
-const hasClearStateInUrl = webViewUrl => Boolean(webViewUrl.searchParams.get(CLEAR_STATE_PARAM));
-
 const useWebViewRecoveryTimeout = ({
   core,
   webViewUrl,
@@ -322,13 +434,15 @@ const shouldAllowNavigation = (request, webViewUrl) => {
   return false;
 };
 
+const DEFAULT_RECOVERY_TIMEOUT_MS$1 = 20000;
+const DEFAULT_LOADING_TIMEOUT_MS$1 = 20000;
 const WebView = ({
   webviewUrl: initialWebViewUrl,
   core,
   webviewDebuggingEnabled: _webviewDebuggingEnabled = false,
   disableRecovery: _disableRecovery = false,
-  recoveryTimeout: _recoveryTimeout = 8000,
-  loadingTimeout: _loadingTimeout = 10000
+  recoveryTimeout: _recoveryTimeout = DEFAULT_RECOVERY_TIMEOUT_MS$1,
+  loadingTimeout: _loadingTimeout = DEFAULT_LOADING_TIMEOUT_MS$1
 }) => {
   const webViewRef = react.useRef(null);
   const {
@@ -338,6 +452,15 @@ const WebView = ({
   const {
     onMessageHandler
   } = useMessageTransportWebViewBridge(core, webViewRef);
+  const {
+    recordEvent,
+    getMeta
+  } = useWebViewPhaseTimers({
+    core,
+    loadingTimeout: _loadingTimeout,
+    recoveryTimeout: _recoveryTimeout,
+    webViewUrl
+  });
   const containerStyles = [styles['container'], visible ? styles.show : styles.hide];
   /**
    * Block the message transport when the webview is unmounted
@@ -379,13 +502,23 @@ const WebView = ({
       return newWebViewUrl;
     });
   }, [core]);
-  const blockAndReloadWebViewOsKill = react.useCallback(() => blockAndReloadWebView('os_kill'), [blockAndReloadWebView]);
+  const blockAndReloadWebViewOsKill = react.useCallback(() => {
+    recordEvent('os_kill');
+    blockAndReloadWebView('os_kill');
+  }, [blockAndReloadWebView, recordEvent]);
   react.useEffect(() => core.messageTransport.recoveryManager.onRecoveryRequested(() => blockAndReloadWebView('recovery')), [core, blockAndReloadWebView]);
-  const setWebViewLoadError = react.useCallback(() => {
+  const setWebViewLoadError = react.useCallback(phase => {
     // Error was already thrown, do not throw again
     if (core.initialization.error instanceof WebViewFailedToLoadError) return;
-    core.initialization.error = new WebViewFailedToLoadError();
-  }, [core]);
+    core.initialization.error = new WebViewFailedToLoadError(getMeta({
+      phase
+    }));
+  }, [core, getMeta]);
+  /**
+   * Wraps `setWebViewLoadError` so the consumer doesn't need to know
+   * about the phase enum; each callsite below binds its own phase.
+   */
+  const setWebViewLoadErrorWithPhase = react.useCallback(phase => () => setWebViewLoadError(phase), [setWebViewLoadError]);
   /**
    * Reload the webview with a clean state when a timeout is reached
    * and the webview did not get to the loaded state yet
@@ -393,7 +526,7 @@ const WebView = ({
   const startRecoveryTimeout = useWebViewRecoveryTimeout({
     core,
     disableRecovery: _disableRecovery,
-    onFailedToLoadAfterClearState: setWebViewLoadError,
+    onFailedToLoadAfterClearState: setWebViewLoadErrorWithPhase('after_clear_state'),
     recoveryTimeout: _recoveryTimeout,
     setWebViewUrl,
     webViewUrl
@@ -401,17 +534,30 @@ const WebView = ({
   const webViewLoadErrorCountRef = react.useRef(0);
   const onWebViewLoadError = react.useCallback(() => {
     webViewLoadErrorCountRef.current = webViewLoadErrorCountRef.current + 1;
+    recordEvent('native_error');
     /**
      * This is the first attempt to load the webview, do not throw an error
      * because the recovery system will attempt to reload the webview
      */
     if (webViewLoadErrorCountRef.current === 1) return;
-    setWebViewLoadError();
-  }, [setWebViewLoadError]);
+    setWebViewLoadError('native_error');
+  }, [recordEvent, setWebViewLoadError]);
   const {
-    onLoad,
-    onLoadStart
-  } = useWebViewLoadingTimeout(_loadingTimeout, setWebViewLoadError);
+    onLoad: onLoadFromTimeout,
+    onLoadStart: onLoadStartFromTimeout
+  } = useWebViewLoadingTimeout(_loadingTimeout, setWebViewLoadErrorWithPhase('html_load'));
+  const onLoadStart = react.useCallback(() => {
+    recordEvent('load_start');
+    onLoadStartFromTimeout();
+  }, [onLoadStartFromTimeout, recordEvent]);
+  const onLoad = react.useCallback(() => {
+    recordEvent('load');
+    onLoadFromTimeout();
+  }, [onLoadFromTimeout, recordEvent]);
+  const onLoadEnd = react.useCallback(() => {
+    recordEvent('load_end');
+    startRecoveryTimeout();
+  }, [recordEvent, startRecoveryTimeout]);
   return /*#__PURE__*/jsxRuntime.jsx(reactNativeWebview.WebView, {
     ref: webViewRef,
     source: {
@@ -420,7 +566,7 @@ const WebView = ({
     containerStyle: containerStyles,
     style: styles['webview'],
     onMessage: onMessageHandler,
-    onLoadEnd: () => startRecoveryTimeout(),
+    onLoadEnd: onLoadEnd,
     onLoadStart: onLoadStart,
     onLoad: onLoad,
     hideKeyboardAccessoryView: true,
@@ -472,6 +618,105 @@ const getEmbeddedWebView = () => {
   }
 };
 
+const MANIFEST_MESSAGE_TYPE = 'manifest';
+const emptyPerAttemptState = () => ({
+  htmlLoadStartedAt: null,
+  htmlLoadedAt: null,
+  manifestReceivedAt: null,
+  onLoadEndAt: null,
+  sdkReadyAt: null
+});
+const diffMs = (later, earlier) => later !== null && earlier !== null ? later - earlier : null;
+/**
+ * Non-React equivalent of `useWebViewPhaseTimers` for the embedded native
+ * webview path. The embedded path is a singleton wired by `setupEmbeddedWebView`
+ * (not a React component), so we expose the same phase-timing surface as a
+ * plain factory.
+ *
+ * The hook and the factory are intentionally separate: the embedded path does
+ * not have a retry or clear-state model, so `retryCount` is always `0` and
+ * `hadClearState` is always `false` in the meta produced here. Sharing one
+ * implementation would require either pulling React into a hot non-React path
+ * or threading a stateless adapter through both consumers \u2014 the duplication
+ * is small enough that keeping them separate stays cleaner.
+ */
+const createEmbeddedWebViewPhaseTimers = ({
+  core,
+  webViewUrl,
+  loadingTimeoutMs,
+  recoveryTimeoutMs
+}) => {
+  let perAttempt = emptyPerAttemptState();
+  let nativeErrorCount = 0;
+  let osKillCount = 0;
+  const handleMessage = message => {
+    if (message.origin !== 'webview') return;
+    if (message.type === MANIFEST_MESSAGE_TYPE && perAttempt.manifestReceivedAt === null) {
+      perAttempt.manifestReceivedAt = Date.now();
+    }
+    if (message.type === webviewMessages.sdkHasLoadedEventName && perAttempt.sdkReadyAt === null) {
+      perAttempt.sdkReadyAt = Date.now();
+    }
+  };
+  core.messageTransport.on(handleMessage);
+  const recordEvent = event => {
+    const now = Date.now();
+    switch (event) {
+      case 'load_start':
+        perAttempt = emptyPerAttemptState();
+        perAttempt.htmlLoadStartedAt = now;
+        break;
+      case 'load':
+        perAttempt.htmlLoadedAt = now;
+        break;
+      case 'load_end':
+        perAttempt.onLoadEndAt = now;
+        break;
+      case 'native_error':
+        nativeErrorCount += 1;
+        break;
+      case 'os_kill':
+        osKillCount += 1;
+        break;
+    }
+  };
+  const getMeta = ({
+    phase
+  }) => {
+    const {
+      htmlLoadStartedAt,
+      htmlLoadedAt,
+      onLoadEndAt,
+      manifestReceivedAt,
+      sdkReadyAt
+    } = perAttempt;
+    return {
+      hadClearState: false,
+      htmlLoadMs: diffMs(htmlLoadedAt, htmlLoadStartedAt),
+      loadingTimeoutMs,
+      manifestReceivedMs: diffMs(manifestReceivedAt, onLoadEndAt),
+      nativeErrorCount,
+      onLoadToOnLoadEndMs: diffMs(onLoadEndAt, htmlLoadedAt),
+      osKillCount,
+      phase,
+      recoveryTimeoutMs,
+      retryCount: 0,
+      sdkReadyMs: diffMs(sdkReadyAt, onLoadEndAt),
+      webviewUrl: webViewUrl.toString()
+    };
+  };
+  const dispose = () => {
+    core.messageTransport.off(handleMessage);
+  };
+  return {
+    dispose,
+    getMeta,
+    recordEvent
+  };
+};
+
+const DEFAULT_LOADING_TIMEOUT_MS = 20000;
+const DEFAULT_RECOVERY_TIMEOUT_MS = 20000;
 // Wires the JS-side bridge to the native WKWebView singleton owned by Swift.
 // This is intentionally not a React component: the embedded webview lives
 // outside the React tree (in a dedicated UIWindow on iOS), so its setup runs
@@ -484,10 +729,47 @@ const getEmbeddedWebView = () => {
 const setupEmbeddedWebView = ({
   webviewUrl,
   core,
-  webviewDebuggingEnabled: _webviewDebuggingEnabled = false
+  webviewDebuggingEnabled: _webviewDebuggingEnabled = false,
+  loadingTimeoutMs: _loadingTimeoutMs = DEFAULT_LOADING_TIMEOUT_MS,
+  recoveryTimeoutMs: _recoveryTimeoutMs = DEFAULT_RECOVERY_TIMEOUT_MS
 }) => {
   const native = getEmbeddedWebView();
   const builtUrl = assignStartTimeToUrl(assignEnvironmentIdToUrl(webviewUrl, core.environmentId));
+  const phaseTimers = createEmbeddedWebViewPhaseTimers({
+    core,
+    loadingTimeoutMs: _loadingTimeoutMs,
+    recoveryTimeoutMs: _recoveryTimeoutMs,
+    webViewUrl: builtUrl
+  });
+  let loadingTimer = null;
+  let recoveryTimer = null;
+  let hasFailed = false;
+  const clearLoadingTimer = () => {
+    if (loadingTimer !== null) {
+      clearTimeout(loadingTimer);
+      loadingTimer = null;
+    }
+  };
+  const clearRecoveryTimer = () => {
+    if (recoveryTimer !== null) {
+      clearTimeout(recoveryTimer);
+      recoveryTimer = null;
+    }
+  };
+  // Raise `WebViewFailedToLoadError` once per setup. Subsequent triggers
+  // (e.g. recovery timeout firing after html_load already failed) are
+  // suppressed so we don't spam the initialization-error setter with
+  // duplicate logs for the same load attempt.
+  const raiseFailure = (phase, extraMeta = {}) => {
+    if (hasFailed) return;
+    hasFailed = true;
+    clearLoadingTimer();
+    clearRecoveryTimer();
+    const meta = phaseTimers.getMeta({
+      phase
+    });
+    core.initialization.error = new WebViewFailedToLoadError(Object.assign(Object.assign({}, meta), extraMeta));
+  };
   const visibilityChannel = messageTransport.createRequestChannel(core.messageTransport);
   const removeVisibilityHandler = visibilityChannel.handle('setVisibility', visible => {
     native.setVisible(visible).catch(err => {
@@ -501,6 +783,15 @@ const setupEmbeddedWebView = ({
     });
   };
   core.messageTransport.on(handleHostMessage);
+  // Watch for the webview-side SDK ready signal so we can clear the
+  // recovery timer. The phase-timer factory also subscribes for its own
+  // bookkeeping — both subscriptions are independent and idempotent.
+  const handleSdkReady = message => {
+    if (message.origin !== 'webview') return;
+    if (message.type !== webviewMessages.sdkHasLoadedEventName) return;
+    clearRecoveryTimer();
+  };
+  core.messageTransport.on(handleSdkReady);
   const onMessageSub = native.addListener('onMessage', event => {
     let parsed = null;
     try {
@@ -523,7 +814,32 @@ const setupEmbeddedWebView = ({
       logger.warn('EmbeddedWebView.respondToShouldStartLoad failed', err);
     });
   });
+  const onLoadStartSub = native.addListener('onLoadStart', () => {
+    phaseTimers.recordEvent('load_start');
+    // Re-arm both timers on every load_start. A retry from the native
+    // side (e.g. a redirect, or a reload after a transient failure)
+    // resets the html_load window cleanly without leaving a stale timer
+    // around from the previous attempt.
+    clearLoadingTimer();
+    clearRecoveryTimer();
+    loadingTimer = setTimeout(() => {
+      raiseFailure('html_load');
+    }, _loadingTimeoutMs);
+  });
+  const onLoadSub = native.addListener('onLoad', () => {
+    phaseTimers.recordEvent('load');
+    clearLoadingTimer();
+  });
+  const onLoadEndSub = native.addListener('onLoadEnd', () => {
+    phaseTimers.recordEvent('load_end');
+    clearLoadingTimer();
+    clearRecoveryTimer();
+    recoveryTimer = setTimeout(() => {
+      raiseFailure('sdk_bootstrap');
+    }, _recoveryTimeoutMs);
+  });
   const onLoadErrorSub = native.addListener('onLoadError', event => {
+    phaseTimers.recordEvent('native_error');
     logger.warn('EmbeddedWebView load error', event);
     logger.instrument('Embedded webview load error', {
       environmentId: core.environmentId,
@@ -537,7 +853,13 @@ const setupEmbeddedWebView = ({
       time: 0,
       webviewUrl: builtUrl.toString()
     });
-    core.initialization.error = new WebViewFailedToLoadError();
+    raiseFailure('embedded_native_error', {
+      nativeErrorCode: event.code,
+      nativeErrorDescription: event.description,
+      nativeErrorDomain: event.domain,
+      nativeErrorFailedUrl: event.url,
+      nativeErrorIsProvisional: event.isProvisional
+    });
   });
   native.setDebuggingEnabled(_webviewDebuggingEnabled).catch(err => {
     logger.warn('EmbeddedWebView.setDebuggingEnabled failed', err);
@@ -546,11 +868,18 @@ const setupEmbeddedWebView = ({
     logger.warn('EmbeddedWebView.setUrl failed', err);
   });
   return () => {
+    clearLoadingTimer();
+    clearRecoveryTimer();
     removeVisibilityHandler();
     core.messageTransport.off(handleHostMessage);
+    core.messageTransport.off(handleSdkReady);
     onMessageSub.remove();
     onShouldStartLoadSub.remove();
+    onLoadStartSub.remove();
+    onLoadSub.remove();
+    onLoadEndSub.remove();
     onLoadErrorSub.remove();
+    phaseTimers.dispose();
   };
 };