@quiltt/react-native 4.2.2 → 4.2.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @quiltt/react-native
 
+## 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.2.3";
 
 // 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';
 };
 
 /**
@@ -258,32 +258,45 @@ const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`);
 const PREFLIGHT_RETRY_COUNT = 3;
 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
@@ -322,7 +335,7 @@ const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
         }
     }
 };
-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({
@@ -496,7 +509,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 +521,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 +538,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: [
                 '*'
@@ -544,6 +559,7 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             ,
             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.2.3",
   "description": "React Native Components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -30,14 +30,14 @@
   "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.2.3",
+    "@quiltt/react": "4.2.3"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@types/base-64": "1.0.2",
     "@types/lodash.debounce": "4.0.9",
-    "@types/node": "22.15.31",
+    "@types/node": "22.18.1",
     "@types/react": "18.3.20",
     "base-64": "1.0.0",
     "bunchee": "6.3.4",

package/src/components/QuilttConnector.tsx

@@ -36,25 +36,41 @@ export const checkConnectorUrl = async (
   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 }
   }
 }
@@ -99,15 +115,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 +133,7 @@ const QuilttConnector = ({
   onExitSuccess,
   onExitAbort,
   onExitError,
+  testId,
 }: QuilttConnectorProps) => {
   const webViewRef = useRef<WebView>(null)
   const { session } = useQuilttSession()
@@ -296,7 +312,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 +325,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 +342,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 +358,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/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'
 }