@quiltt/react-native 4.2.2 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @quiltt/react-native
 
+## 4.3.0
+
+### Minor Changes
+
+- [#363](https://github.com/quiltt/quiltt-js/pull/363) [`641d766`](https://github.com/quiltt/quiltt-js/commit/641d76620ffbb99bc80fdc9998ac936883fe1d06) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Upgrade rails/actioncable to v8
+
+### Patch Changes
+
+- Updated dependencies [[`641d766`](https://github.com/quiltt/quiltt-js/commit/641d76620ffbb99bc80fdc9998ac936883fe1d06)]:
+  - @quiltt/react@4.3.0
+  - @quiltt/core@4.3.0
+
+## 4.2.3
+
+### Patch Changes
+
+- [#355](https://github.com/quiltt/quiltt-js/pull/355) [`6d32f3e`](https://github.com/quiltt/quiltt-js/commit/6d32f3e40e7554c512ca63ef532d689d5485e10c) Thanks [@rubendinho](https://github.com/rubendinho)! - Improve error handling in React Native
+
+- Updated dependencies [[`6d32f3e`](https://github.com/quiltt/quiltt-js/commit/6d32f3e40e7554c512ca63ef532d689d5485e10c)]:
+  - @quiltt/core@4.2.3
+  - @quiltt/react@4.2.3
+
 ## 4.2.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -14,14 +14,14 @@ declare const checkConnectorUrl: (connectorUrl: string, retryCount?: number) =>
  */
 declare const handleOAuthUrl: (oauthUrl: URL | string | null | undefined) => void;
 type QuilttConnectorProps = {
-    testId?: string;
     connectorId: string;
     connectionId?: string;
     institution?: string;
     oauthRedirectUrl: string;
+    testId?: string;
 } & ConnectorSDKCallbacks;
 declare const QuilttConnector: {
-    ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, }: QuilttConnectorProps): react_jsx_runtime.JSX.Element;
+    ({ connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, testId, }: QuilttConnectorProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -9,7 +9,7 @@ import { URL } from 'react-native-url-polyfill';
 import { WebView } from 'react-native-webview';
 import { generateStackTrace, makeBacktrace, getCauses } from '@honeybadger-io/core/build/src/util';
 
-var version = "4.2.2";
+var version = "4.3.0";
 
 // Custom Error Reporter to avoid hooking into or colliding with a client's Honeybadger singleton
 const notifier = {
@@ -91,8 +91,8 @@ class ErrorReporter {
 }
 
 const getErrorMessage = (responseStatus, error)=>{
-    if (error) return `An error occurred while checking the connector URL: ${error?.name} \n${error?.message}`;
-    return responseStatus ? `The URL is not routable. Response status: ${responseStatus}` : 'An error occurred while checking the connector URL';
+    if (error) return `An error occurred while checking the Connector URL: ${error?.name} \n${error?.message}`;
+    return responseStatus ? `An error occurred loading the Connector. Response status: ${responseStatus}` : 'An error occurred while checking the Connector URL';
 };
 
 /**
@@ -256,34 +256,61 @@ const LoadingScreen = ({ testId })=>/*#__PURE__*/ jsx(AndroidSafeAreaView, {
 
 const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`);
 const PREFLIGHT_RETRY_COUNT = 3;
+const parseMetadata = (url, connectorId)=>{
+    const metadata = {
+        connectorId: url.searchParams.get('connectorId') ?? connectorId
+    };
+    const profileId = url.searchParams.get('profileId');
+    if (profileId) metadata.profileId = profileId;
+    const connectionId = url.searchParams.get('connectionId');
+    if (connectionId) metadata.connectionId = connectionId;
+    const connectorSessionId = url.searchParams.get('connectorSession');
+    if (connectorSessionId) metadata.connectorSession = {
+        id: connectorSessionId
+    };
+    return metadata;
+};
 const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
     let responseStatus;
-    let error;
     try {
         const response = await fetch(connectorUrl);
-        if (!response.ok) {
-            responseStatus = response.status;
-            throw new Error('Connector URL is not routable.');
+        switch(response.status){
+            case 200:
+                return {
+                    checked: true
+                };
+            case 400:
+                console.log('Invalid configuration');
+                return {
+                    checked: true
+                };
+            case 404:
+                console.error('Connector not found');
+                return {
+                    checked: true
+                };
+            default:
+                throw new Error('Connector URL is not routable.');
         }
-        return {
-            checked: true
-        };
-    } catch (e) {
-        error = e;
-        console.error('Failed to connect to connector URL');
+    } catch (error) {
+        // Log error for debugging
+        console.error(error);
+        // Try again
         if (retryCount < PREFLIGHT_RETRY_COUNT) {
             const delay = 50 * 2 ** retryCount;
             await new Promise((resolve)=>setTimeout(resolve, delay));
             console.log(`Retrying connection... Attempt ${retryCount + 1}`);
             return checkConnectorUrl(connectorUrl, retryCount + 1);
         }
+        // Report error after retries exhausted
         const errorMessage = getErrorMessage(responseStatus, error);
         const errorToSend = error || new Error(errorMessage);
         const context = {
             connectorUrl,
             responseStatus
         };
-        if (responseStatus !== 404) await errorReporter.notify(errorToSend, context);
+        await errorReporter.notify(errorToSend, context);
+        // Return errored preflight check
         return {
             checked: true,
             error: errorMessage
@@ -308,7 +335,7 @@ const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
         const normalizedUrl = normalizeUrlEncoding(urlString);
         // Open the normalized URL
         Linking.openURL(normalizedUrl);
-    } catch (error) {
+    } catch (_error) {
         console.error('OAuth URL handling error');
         // Only try the fallback if oauthUrl is not null
         if (oauthUrl != null) {
@@ -316,13 +343,13 @@ const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
                 const fallbackUrl = typeof oauthUrl === 'string' ? oauthUrl : oauthUrl.toString();
                 console.log('Attempting fallback OAuth opening');
                 Linking.openURL(fallbackUrl);
-            } catch (fallbackError) {
+            } catch (_fallbackError) {
                 console.error('Fallback OAuth opening failed');
             }
         }
     }
 };
-const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
+const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, testId })=>{
     const webViewRef = useRef(null);
     const { session } = useQuilttSession();
     const [preFlightCheck, setPreFlightCheck] = useState({
@@ -418,7 +445,7 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
     const handleQuilttEvent = useCallback((url)=>{
         url.searchParams.delete('source');
         url.searchParams.append('connectorId', connectorId);
-        const metadata = Object.fromEntries(url.searchParams);
+        const metadata = parseMetadata(url, connectorId);
         requestAnimationFrame(()=>{
             const eventType = url.host;
             switch(eventType){
@@ -461,7 +488,7 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
                                 try {
                                     const decodedUrl = decodeURIComponent(navigateUrl);
                                     handleOAuthUrl(decodedUrl);
-                                } catch (error) {
+                                } catch (_error) {
                                     console.error('Navigate URL decoding failed, using original');
                                     handleOAuthUrl(navigateUrl);
                                 }
@@ -496,7 +523,9 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             handleQuilttEvent(url);
             return false;
         }
-        if (shouldRender(url)) return true;
+        if (shouldRender(url)) {
+            return true;
+        }
         // Plaid set oauth url by doing window.location.href = url
         // So we use `handleOAuthUrl` as a catch all and assume all url got to this step is Plaid OAuth url
         handleOAuthUrl(url);
@@ -506,9 +535,11 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
         isQuilttEvent,
         shouldRender
     ]);
-    if (!preFlightCheck.checked) return /*#__PURE__*/ jsx(LoadingScreen, {
-        testId: "loading-screen"
-    });
+    if (!preFlightCheck.checked) {
+        return /*#__PURE__*/ jsx(LoadingScreen, {
+            testId: "loading-screen"
+        });
+    }
     if (preFlightCheck.error) {
         return /*#__PURE__*/ jsx(ErrorScreen, {
             testId: "error-screen",
@@ -521,10 +552,8 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
     return /*#__PURE__*/ jsx(AndroidSafeAreaView, {
         testId: testId,
         children: /*#__PURE__*/ jsx(WebView, {
-            testID: "webview",
             ref: webViewRef,
             // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
-            // All whitelists are now handled in requestHandler, handleQuilttEvent and handleOAuthUrl
             style: styles.webview,
             originWhitelist: [
                 '*'
@@ -540,10 +569,10 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             bounces: false,
             scrollEnabled: true,
             automaticallyAdjustContentInsets: false,
-            contentInsetAdjustmentBehavior: "never" // Controls how the WebView adjusts its content layout relative to safe areas and system UI
-            ,
+            contentInsetAdjustmentBehavior: "never",
             showsVerticalScrollIndicator: false,
             showsHorizontalScrollIndicator: false,
+            testID: "webview",
             ...Platform.OS === 'ios' ? {
                 decelerationRate: 'normal',
                 keyboardDisplayRequiresUserAction: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "4.2.2",
+  "version": "4.3.0",
   "description": "React Native Components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -30,23 +30,23 @@
   "dependencies": {
     "@honeybadger-io/core": "6.6.0",
     "lodash.debounce": "4.0.8",
-    "@quiltt/core": "4.2.2",
-    "@quiltt/react": "4.2.2"
+    "@quiltt/core": "4.3.0",
+    "@quiltt/react": "4.3.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "2.2.4",
     "@types/base-64": "1.0.2",
     "@types/lodash.debounce": "4.0.9",
-    "@types/node": "22.15.31",
-    "@types/react": "18.3.20",
+    "@types/node": "22.18.6",
+    "@types/react": "18.3.23",
     "base-64": "1.0.0",
-    "bunchee": "6.3.4",
+    "bunchee": "6.6.0",
     "react": "18.3.1",
     "react-native": "0.76.7",
     "react-native-url-polyfill": "2.0.0",
     "react-native-webview": "13.12.5",
     "rimraf": "6.0.1",
-    "typescript": "5.8.3"
+    "typescript": "5.9.2"
   },
   "peerDependencies": {
     "base-64": "^1.0.0",

package/src/components/QuilttConnector.tsx

@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Linking, Platform } from 'react-native'
-import { StyleSheet } from 'react-native'
+import { Linking, Platform, StyleSheet } from 'react-native'
+
+import type { ConnectorSDKCallbackMetadata, ConnectorSDKCallbacks } from '@quiltt/react'
+import { ConnectorSDKEventType, useQuilttSession } from '@quiltt/react'
 import { URL } from 'react-native-url-polyfill' // https://github.com/facebook/react-native/issues/16434
 import { WebView } from 'react-native-webview'
 import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes'
 
-import { ConnectorSDKEventType, useQuilttSession } from '@quiltt/react'
-import type { ConnectorSDKCallbackMetadata, ConnectorSDKCallbacks } from '@quiltt/react'
-
 import {
   ErrorReporter,
   getErrorMessage,
@@ -16,6 +15,7 @@ import {
   smartEncodeURIComponent,
 } from '@/utils'
 import { version } from '@/version'
+
 import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 import { ErrorScreen } from './ErrorScreen'
 import { LoadingScreen } from './LoadingScreen'
@@ -28,33 +28,65 @@ export type PreFlightCheck = {
   error?: string
 }
 
+const parseMetadata = (url: URL, connectorId: string): ConnectorSDKCallbackMetadata => {
+  const metadata: ConnectorSDKCallbackMetadata = {
+    connectorId: url.searchParams.get('connectorId') ?? connectorId,
+  }
+
+  const profileId = url.searchParams.get('profileId')
+  if (profileId) metadata.profileId = profileId
+
+  const connectionId = url.searchParams.get('connectionId')
+  if (connectionId) metadata.connectionId = connectionId
+
+  const connectorSessionId = url.searchParams.get('connectorSession')
+  if (connectorSessionId) metadata.connectorSession = { id: connectorSessionId }
+
+  return metadata
+}
+
 export const checkConnectorUrl = async (
   connectorUrl: string,
   retryCount = 0
 ): Promise<PreFlightCheck> => {
   let responseStatus: number | undefined
-  let error: Error | undefined
   try {
     const response = await fetch(connectorUrl)
-    if (!response.ok) {
-      responseStatus = response.status
-      throw new Error('Connector URL is not routable.')
+
+    switch (response.status) {
+      case 200:
+        return { checked: true }
+
+      case 400:
+        console.log('Invalid configuration')
+        return { checked: true }
+
+      case 404:
+        console.error('Connector not found')
+        return { checked: true }
+
+      default:
+        throw new Error('Connector URL is not routable.')
     }
-    return { checked: true }
-  } catch (e) {
-    error = e as Error
-    console.error('Failed to connect to connector URL')
+  } catch (error) {
+    // Log error for debugging
+    console.error(error)
 
+    // Try again
     if (retryCount < PREFLIGHT_RETRY_COUNT) {
       const delay = 50 * 2 ** retryCount
       await new Promise((resolve) => setTimeout(resolve, delay))
       console.log(`Retrying connection... Attempt ${retryCount + 1}`)
       return checkConnectorUrl(connectorUrl, retryCount + 1)
     }
+
+    // Report error after retries exhausted
     const errorMessage = getErrorMessage(responseStatus, error as Error)
     const errorToSend = (error as Error) || new Error(errorMessage)
     const context = { connectorUrl, responseStatus }
-    if (responseStatus !== 404) await errorReporter.notify(errorToSend, context)
+    await errorReporter.notify(errorToSend, context)
+
+    // Return errored preflight check
     return { checked: true, error: errorMessage }
   }
 }
@@ -82,7 +114,7 @@ export const handleOAuthUrl = (oauthUrl: URL | string | null | undefined) => {
 
     // Open the normalized URL
     Linking.openURL(normalizedUrl)
-  } catch (error) {
+  } catch (_error) {
     console.error('OAuth URL handling error')
 
     // Only try the fallback if oauthUrl is not null
@@ -91,7 +123,7 @@ export const handleOAuthUrl = (oauthUrl: URL | string | null | undefined) => {
         const fallbackUrl = typeof oauthUrl === 'string' ? oauthUrl : oauthUrl.toString()
         console.log('Attempting fallback OAuth opening')
         Linking.openURL(fallbackUrl)
-      } catch (fallbackError) {
+      } catch (_fallbackError) {
         console.error('Fallback OAuth opening failed')
       }
     }
@@ -99,15 +131,14 @@ export const handleOAuthUrl = (oauthUrl: URL | string | null | undefined) => {
 }
 
 type QuilttConnectorProps = {
-  testId?: string
   connectorId: string
   connectionId?: string
   institution?: string
   oauthRedirectUrl: string
+  testId?: string
 } & ConnectorSDKCallbacks
 
 const QuilttConnector = ({
-  testId,
   connectorId,
   connectionId,
   institution,
@@ -118,6 +149,7 @@ const QuilttConnector = ({
   onExitSuccess,
   onExitAbort,
   onExitError,
+  testId,
 }: QuilttConnectorProps) => {
   const webViewRef = useRef<WebView>(null)
   const { session } = useQuilttSession()
@@ -211,7 +243,7 @@ const QuilttConnector = ({
     (url: URL) => {
       url.searchParams.delete('source')
       url.searchParams.append('connectorId', connectorId)
-      const metadata = Object.fromEntries(url.searchParams) as ConnectorSDKCallbackMetadata
+      const metadata = parseMetadata(url, connectorId)
 
       requestAnimationFrame(() => {
         const eventType = url.host
@@ -256,7 +288,7 @@ const QuilttConnector = ({
                 try {
                   const decodedUrl = decodeURIComponent(navigateUrl)
                   handleOAuthUrl(decodedUrl)
-                } catch (error) {
+                } catch (_error) {
                   console.error('Navigate URL decoding failed, using original')
                   handleOAuthUrl(navigateUrl)
                 }
@@ -296,7 +328,11 @@ const QuilttConnector = ({
         handleQuilttEvent(url)
         return false
       }
-      if (shouldRender(url)) return true
+
+      if (shouldRender(url)) {
+        return true
+      }
+
       // Plaid set oauth url by doing window.location.href = url
       // So we use `handleOAuthUrl` as a catch all and assume all url got to this step is Plaid OAuth url
       handleOAuthUrl(url)
@@ -305,7 +341,10 @@ const QuilttConnector = ({
     [handleQuilttEvent, isQuilttEvent, shouldRender]
   )
 
-  if (!preFlightCheck.checked) return <LoadingScreen testId="loading-screen" />
+  if (!preFlightCheck.checked) {
+    return <LoadingScreen testId="loading-screen" />
+  }
+
   if (preFlightCheck.error) {
     return (
       <ErrorScreen
@@ -319,10 +358,8 @@ const QuilttConnector = ({
   return (
     <AndroidSafeAreaView testId={testId}>
       <WebView
-        testID="webview"
         ref={webViewRef}
         // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
-        // All whitelists are now handled in requestHandler, handleQuilttEvent and handleOAuthUrl
         style={styles.webview}
         originWhitelist={['*']}
         source={{ uri: connectorUrl }}
@@ -337,6 +374,7 @@ const QuilttConnector = ({
         contentInsetAdjustmentBehavior="never" // Controls how the WebView adjusts its content layout relative to safe areas and system UI
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
+        testID="webview"
         {...(Platform.OS === 'ios'
           ? {
               decelerationRate: 'normal',

package/src/index.ts

@@ -7,7 +7,6 @@ if (!global.atob) {
 }
 
 export * from '@quiltt/core'
-
 export {
   QuilttAuthProvider,
   QuilttProvider,

package/src/utils/error/getErrorMessage.ts

@@ -1,7 +1,7 @@
 export const getErrorMessage = (responseStatus?: number, error?: Error): string => {
   if (error)
-    return `An error occurred while checking the connector URL: ${error?.name} \n${error?.message}`
+    return `An error occurred while checking the Connector URL: ${error?.name} \n${error?.message}`
   return responseStatus
-    ? `The URL is not routable. Response status: ${responseStatus}`
-    : 'An error occurred while checking the connector URL'
+    ? `An error occurred loading the Connector. Response status: ${responseStatus}`
+    : 'An error occurred while checking the Connector URL'
 }