@quiltt/react-native 4.5.1 → 5.0.1

package/dist/utils/index.js

@@ -0,0 +1,201 @@
+import Honeybadger from '@honeybadger-io/react-native';
+import React from 'react';
+import { Platform } from 'react-native';
+import { getUserAgent as getUserAgent$1 } from '@quiltt/core';
+import DeviceInfo from 'react-native-device-info';
+
+var version = "5.0.1";
+
+// Custom Error Reporter to avoid hooking into or colliding with a client's Honeybadger singleton
+class ErrorReporter {
+    constructor(userAgent){
+        // Create an isolated Honeybadger instance to avoid colliding with client's singleton
+        this.client = Honeybadger.factory({
+            apiKey: process.env.HONEYBADGER_API_KEY_REACT_NATIVE || '',
+            environment: userAgent,
+            revision: version,
+            reportData: true,
+            enableUncaught: false,
+            enableUnhandledRejection: false
+        });
+    }
+    async notify(error, context) {
+        if (!this.client) {
+            console.warn('ErrorReporter: Honeybadger client not initialized');
+            return;
+        }
+        try {
+            // Set context for this error report
+            if (context) {
+                this.client.setContext(context);
+            }
+            // Notify Honeybadger
+            await this.client.notify(error);
+        } catch (err) {
+            console.error('ErrorReporter: Failed to send error report', err);
+        } finally{
+            // Clear context after reporting (always runs if context was set)
+            if (context) {
+                this.client.clear();
+            }
+        }
+    }
+}
+
+const getErrorMessage = (responseStatus, error)=>{
+    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';
+};
+
+/**
+ * Gets the React version from the runtime
+ */ const getReactVersion = ()=>{
+    return React.version || 'unknown';
+};
+/**
+ * Gets the React Native version from Platform constants
+ */ const getReactNativeVersion = ()=>{
+    try {
+        const rnVersion = Platform.constants?.reactNativeVersion;
+        if (rnVersion) {
+            return `${rnVersion.major}.${rnVersion.minor}.${rnVersion.patch}`;
+        }
+    } catch (error) {
+        console.warn('Failed to get React Native version:', error);
+    }
+    return 'unknown';
+};
+/**
+ * Gets OS information (platform and version)
+ */ const getOSInfo = ()=>{
+    try {
+        const os = Platform.OS // 'ios' or 'android'
+        ;
+        const osVersion = Platform.Version // string (iOS) or number (Android)
+        ;
+        // Map platform names to correct capitalization
+        const platformNames = {
+            ios: 'iOS',
+            android: 'Android'
+        };
+        const osName = platformNames[os] || 'Unknown';
+        return `${osName}/${osVersion}`;
+    } catch (error) {
+        console.warn('Failed to get OS info:', error);
+        return 'Unknown/Unknown';
+    }
+};
+/**
+ * Gets device model information
+ */ const getDeviceModel = async ()=>{
+    try {
+        const model = await DeviceInfo.getModel();
+        return model || 'Unknown';
+    } catch (error) {
+        console.warn('Failed to get device model:', error);
+        return 'Unknown';
+    }
+};
+/**
+ * Generates platform information string for React Native
+ * Format: React/<version>; ReactNative/<version>; <OS>/<version>; <device-model>
+ */ const getPlatformInfo = async ()=>{
+    const reactVersion = getReactVersion();
+    const rnVersion = getReactNativeVersion();
+    const osInfo = getOSInfo();
+    const deviceModel = await getDeviceModel();
+    return `React/${reactVersion}; ReactNative/${rnVersion}; ${osInfo}; ${deviceModel}`;
+};
+/**
+ * Synchronously generates platform information string for React Native
+ * Format: React/<version>; ReactNative/<version>; <OS>/<version>; Unknown
+ * Note: Device model is set to 'Unknown' since it requires async DeviceInfo call
+ */ const getPlatformInfoSync = ()=>{
+    const reactVersion = getReactVersion();
+    const rnVersion = getReactNativeVersion();
+    const osInfo = getOSInfo();
+    return `React/${reactVersion}; ReactNative/${rnVersion}; ${osInfo}; Unknown`;
+};
+/**
+ * Generates User-Agent string for React Native SDK
+ * Format: Quiltt/<sdk-version> (React/<version>; ReactNative/<version>; <OS>/<version>; <device-model>)
+ */ const getUserAgent = async (sdkVersion)=>{
+    const platformInfo = await getPlatformInfo();
+    return getUserAgent$1(sdkVersion, platformInfo);
+};
+
+/**
+ * Checks if a string appears to be already URL encoded
+ * @param str The string to check
+ * @returns boolean indicating if the string appears to be URL encoded
+ */ const isEncoded = (str)=>{
+    // Check for typical URL encoding patterns like %20, %3A, etc.
+    const hasEncodedChars = /%[0-9A-F]{2}/i.test(str);
+    // Check if double encoding has occurred (e.g., %253A instead of %3A)
+    const hasDoubleEncoding = /%25[0-9A-F]{2}/i.test(str);
+    // If we have encoded chars but no double encoding, it's likely properly encoded
+    return hasEncodedChars && !hasDoubleEncoding;
+};
+/**
+ * Smart URL encoder that ensures a string is encoded exactly once
+ * @param str The string to encode
+ * @returns A properly URL encoded string
+ */ const smartEncodeURIComponent = (str)=>{
+    if (!str) return str;
+    // If it's already encoded, return as is
+    if (isEncoded(str)) {
+        console.log('URL already encoded, skipping encoding');
+        return str;
+    }
+    // Otherwise, encode it
+    const encoded = encodeURIComponent(str);
+    console.log('URL encoded');
+    return encoded;
+};
+/**
+ * Creates a URL with proper parameter encoding
+ * @param baseUrl The base URL string
+ * @param params Object containing key-value pairs to be added as search params
+ * @returns A properly formatted URL string
+ */ const createUrlWithParams = (baseUrl, params)=>{
+    try {
+        const url = new URL(baseUrl);
+        // Add each parameter without additional encoding
+        // (URLSearchParams.append will encode them automatically)
+        Object.entries(params).forEach(([key, value])=>{
+            // Skip undefined or null values
+            if (value == null) return;
+            // For oauth_redirect_url specifically, ensure it's not double encoded
+            if (key === 'oauth_redirect_url' && isEncoded(value)) {
+                // Decode once to counteract the automatic encoding that will happen
+                const decodedOnce = decodeURIComponent(value);
+                url.searchParams.append(key, decodedOnce);
+            } else {
+                url.searchParams.append(key, value);
+            }
+        });
+        return url.toString();
+    } catch (error) {
+        console.error('Error creating URL with params:', error);
+        return baseUrl;
+    }
+};
+/**
+ * Checks if a string appears to be double-encoded
+ */ const isDoubleEncoded = (str)=>{
+    if (!str) return false;
+    return /%25[0-9A-F]{2}/i.test(str);
+};
+/**
+ * Normalizes a URL string by decoding it once if it appears to be double-encoded
+ */ const normalizeUrlEncoding = (urlStr)=>{
+    if (isDoubleEncoded(urlStr)) {
+        console.log('Detected double-encoded URL:', urlStr);
+        const normalized = decodeURIComponent(urlStr);
+        console.log('Normalized to:', normalized);
+        return normalized;
+    }
+    return urlStr;
+};
+
+export { ErrorReporter, createUrlWithParams, getDeviceModel, getErrorMessage, getOSInfo, getPlatformInfo, getPlatformInfoSync, getReactNativeVersion, getReactVersion, getUserAgent, isEncoded, normalizeUrlEncoding, smartEncodeURIComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "4.5.1",
+  "version": "5.0.1",
   "description": "React Native Components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -16,7 +16,27 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "require": "./dist/components/index.cjs",
+      "import": "./dist/components/index.js",
+      "default": "./dist/components/index.js"
+    },
+    "./providers": {
+      "types": "./dist/providers/index.d.ts",
+      "require": "./dist/providers/index.cjs",
+      "import": "./dist/providers/index.js",
+      "default": "./dist/providers/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "require": "./dist/utils/index.cjs",
+      "import": "./dist/utils/index.js",
+      "default": "./dist/utils/index.js"
     }
   },
   "module": "./dist/index.js",
@@ -28,24 +48,24 @@
   ],
   "main": "dist/index.js",
   "dependencies": {
-    "@honeybadger-io/core": "6.6.0",
+    "@honeybadger-io/react-native": "6.4.7",
     "lodash.debounce": "4.0.8",
-    "@quiltt/react": "4.5.1",
-    "@quiltt/core": "4.5.1"
+    "react-native-device-info": "15.0.1",
+    "@quiltt/react": "5.0.1",
+    "@quiltt/core": "5.0.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.8",
+    "@biomejs/biome": "2.3.14",
     "@types/base-64": "1.0.2",
     "@types/lodash.debounce": "4.0.9",
-    "@types/node": "22.19.2",
-    "@types/react": "19.2.7",
+    "@types/node": "24.10.10",
+    "@types/react": "19.2.11",
     "base-64": "1.0.0",
-    "bunchee": "6.6.2",
-    "react": "19.2.3",
+    "bunchee": "6.9.4",
+    "react": "19.2.4",
     "react-native": "0.81.5",
     "react-native-url-polyfill": "3.0.0",
     "react-native-webview": "13.15.0",
-    "react-test-renderer": "19.2.3",
     "rimraf": "6.1.2",
     "typescript": "5.9.3"
   },

package/src/components/QuilttConnector.tsx

@@ -18,6 +18,7 @@ import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTyp
 import {
   ErrorReporter,
   getErrorMessage,
+  getUserAgent,
   isEncoded,
   normalizeUrlEncoding,
   smartEncodeURIComponent,
@@ -28,7 +29,6 @@ import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 import { ErrorScreen } from './ErrorScreen'
 import { LoadingScreen } from './LoadingScreen'
 
-const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`)
 const PREFLIGHT_RETRY_COUNT = 3
 
 export type PreFlightCheck = {
@@ -55,6 +55,7 @@ const parseMetadata = (url: URL, connectorId: string): ConnectorSDKCallbackMetad
 
 export const checkConnectorUrl = async (
   connectorUrl: string,
+  errorReporter: ErrorReporter,
   retryCount = 0
 ): Promise<PreFlightCheck> => {
   let responseStatus: number | undefined
@@ -85,7 +86,7 @@ export const checkConnectorUrl = async (
       const delay = 50 * 2 ** retryCount
       await new Promise((resolve) => setTimeout(resolve, delay))
       console.log(`Retrying connection... Attempt ${retryCount + 1}`)
-      return checkConnectorUrl(connectorUrl, retryCount + 1)
+      return checkConnectorUrl(connectorUrl, errorReporter, retryCount + 1)
     }
 
     // Report error after retries exhausted
@@ -170,6 +171,25 @@ const QuilttConnector = forwardRef<QuilttConnectorHandle, QuilttConnectorProps>(
     const webViewRef = useRef<WebView>(null)
     const { session } = useQuilttSession()
     const [preFlightCheck, setPreFlightCheck] = useState<PreFlightCheck>({ checked: false })
+    const [errorReporter, setErrorReporter] = useState<ErrorReporter | null>(null)
+    const [userAgent, setUserAgent] = useState<string>('')
+
+    // Initialize error reporter and user agent
+    useEffect(() => {
+      let mounted = true
+      const init = async () => {
+        const agent = await getUserAgent(version)
+        if (mounted) {
+          setUserAgent(agent)
+          setErrorReporter(new ErrorReporter(agent))
+        }
+      }
+      init()
+
+      return () => {
+        mounted = false
+      }
+    }, [])
 
     // Script to disable scrolling on header
     const disableHeaderScrollScript = `
@@ -197,11 +217,13 @@ const QuilttConnector = forwardRef<QuilttConnectorHandle, QuilttConnectorProps>(
     }, [oauthRedirectUrl])
 
     const connectorUrl = useMemo(() => {
+      if (!userAgent) return null
+
       const url = new URL(`https://${connectorId}.quiltt.app`)
 
       // For normal parameters, just append them directly
       url.searchParams.append('mode', 'webview')
-      url.searchParams.append('agent', `react-native-${version}`)
+      url.searchParams.append('agent', userAgent)
 
       // For the oauth_redirect_url, we need to be careful
       // If it's already encoded, we need to decode it once to prevent
@@ -214,16 +236,16 @@ const QuilttConnector = forwardRef<QuilttConnectorHandle, QuilttConnectorProps>(
       }
 
       return url.toString()
-    }, [connectorId, safeOAuthRedirectUrl])
+    }, [connectorId, safeOAuthRedirectUrl, userAgent])
 
     useEffect(() => {
-      if (preFlightCheck.checked) return
+      if (preFlightCheck.checked || !connectorUrl || !errorReporter) return
       const fetchDataAndSetState = async () => {
-        const connectorUrlStatus = await checkConnectorUrl(connectorUrl)
+        const connectorUrlStatus = await checkConnectorUrl(connectorUrl, errorReporter)
         setPreFlightCheck(connectorUrlStatus)
       }
       fetchDataAndSetState()
-    }, [connectorUrl, preFlightCheck])
+    }, [connectorUrl, preFlightCheck, errorReporter])
 
     const initInjectedJavaScript = useCallback(() => {
       const script = `\
@@ -404,7 +426,7 @@ const QuilttConnector = forwardRef<QuilttConnectorHandle, QuilttConnectorProps>(
       []
     )
 
-    if (!preFlightCheck.checked) {
+    if (!preFlightCheck.checked || !connectorUrl) {
       return <LoadingScreen testId="loading-screen" />
     }
 

package/src/index.ts

@@ -7,16 +7,38 @@ if (!global.atob) {
 }
 
 export * from '@quiltt/core'
+// Re-export Apollo Client types (via @quiltt/react)
+export type {
+  ApolloQueryResult,
+  DocumentNode,
+  ErrorPolicy,
+  FetchPolicy,
+  MutationHookOptions,
+  MutationResult,
+  NormalizedCacheObject,
+  OperationVariables,
+  QueryHookOptions,
+  QueryResult,
+  SubscriptionHookOptions,
+  SubscriptionResult,
+  TypedDocumentNode,
+  WatchQueryFetchPolicy,
+} from '@quiltt/react'
+// Re-export Apollo Client utilities and hooks (via @quiltt/react)
+// Re-export Quiltt-specific providers and hooks
 export {
-  QuilttAuthProvider,
-  QuilttProvider,
   QuilttSettingsProvider,
+  useLazyQuery,
+  useMutation,
+  useQuery,
   useQuilttClient,
   useQuilttConnector,
   useQuilttSession,
   useQuilttSettings,
   useSession,
   useStorage,
+  useSubscription,
 } from '@quiltt/react'
 
 export * from './components'
+export * from './providers'

package/src/providers/QuilttAuthProvider.tsx

@@ -0,0 +1,46 @@
+import type { FC } from 'react'
+import { useMemo } from 'react'
+
+import { createVersionLink, InMemoryCache, QuilttClient } from '@quiltt/core'
+import type { QuilttAuthProviderProps as ReactQuilttAuthProviderProps } from '@quiltt/react'
+import { QuilttAuthProvider as ReactQuilttAuthProvider } from '@quiltt/react'
+
+import { getPlatformInfoSync } from '@/utils/telemetry'
+
+export type QuilttAuthProviderProps = ReactQuilttAuthProviderProps
+
+/**
+ * React Native-specific QuilttAuthProvider that injects platform information
+ * into the GraphQL client's User-Agent header.
+ *
+ * If a token is provided, will validate the token against the api and then import
+ * it into trusted storage. While this process is happening, the component is put
+ * into a loading state and the children are not rendered to prevent race conditions
+ * from triggering within the transitionary state.
+ */
+export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({
+  graphqlClient,
+  token,
+  children,
+}) => {
+  // Create React Native-specific GraphQL client with platform info if no custom client provided
+  const platformClient = useMemo(() => {
+    if (graphqlClient) {
+      return graphqlClient
+    }
+
+    const platformInfo = getPlatformInfoSync()
+    return new QuilttClient({
+      cache: new InMemoryCache(),
+      versionLink: createVersionLink(platformInfo),
+    })
+  }, [graphqlClient])
+
+  return (
+    <ReactQuilttAuthProvider token={token} graphqlClient={platformClient}>
+      {children}
+    </ReactQuilttAuthProvider>
+  )
+}
+
+export default QuilttAuthProvider

package/src/providers/QuilttProvider.tsx

@@ -0,0 +1,30 @@
+import type { FC } from 'react'
+
+import type { QuilttSettingsProviderProps } from '@quiltt/react'
+import { QuilttSettingsProvider } from '@quiltt/react'
+
+import type { QuilttAuthProviderProps } from './QuilttAuthProvider'
+import { QuilttAuthProvider } from './QuilttAuthProvider'
+
+type QuilttProviderProps = QuilttSettingsProviderProps & QuilttAuthProviderProps
+
+/**
+ * React Native-specific QuilttProvider that combines settings and auth providers
+ * with platform-specific GraphQL client configuration.
+ */
+export const QuilttProvider: FC<QuilttProviderProps> = ({
+  clientId,
+  graphqlClient,
+  token,
+  children,
+}) => {
+  return (
+    <QuilttSettingsProvider clientId={clientId}>
+      <QuilttAuthProvider token={token} graphqlClient={graphqlClient}>
+        {children}
+      </QuilttAuthProvider>
+    </QuilttSettingsProvider>
+  )
+}
+
+export default QuilttProvider

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export * from './QuilttAuthProvider'
+export * from './QuilttProvider'

package/src/utils/error/ErrorReporter.ts

@@ -1,101 +1,44 @@
 // Custom Error Reporter to avoid hooking into or colliding with a client's Honeybadger singleton
-import type { Notice, NoticeTransportPayload } from '@honeybadger-io/core/build/src/types'
-import { generateStackTrace, getCauses, makeBacktrace } from '@honeybadger-io/core/build/src/util'
+import Honeybadger from '@honeybadger-io/react-native'
 
 import { version } from '@/version'
 
-const notifier = {
-  name: 'Quiltt React Native SDK Reporter',
-  url: 'https://www.quiltt.dev/connector/sdk/react-native',
-  version: version,
-}
-
-type HoneybadgerResponseData = {
-  id: string
-}
-
 class ErrorReporter {
-  private noticeUrl: string
-  private apiKey: string
-  private clientName: string
-  private clientVersion: string
-  private platform: string
-  private logger: Console
-  private userAgent: string
-
-  constructor(platform: string) {
-    this.noticeUrl = 'https://api.honeybadger.io/v1/notices'
-    this.apiKey = process.env.HONEYBADGER_API_KEY_REACT_NATIVE || ''
-    this.clientName = 'react-native-sdk'
-    this.clientVersion = version
-    this.platform = platform
-    this.logger = console
-    this.userAgent = `${this.clientName} ${this.clientVersion}; ${this.platform}`
+  private client: typeof Honeybadger
+
+  constructor(userAgent: string) {
+    // Create an isolated Honeybadger instance to avoid colliding with client's singleton
+    this.client = Honeybadger.factory({
+      apiKey: process.env.HONEYBADGER_API_KEY_REACT_NATIVE || '',
+      environment: userAgent,
+      revision: version,
+      reportData: true,
+      enableUncaught: false, // Don't hook into global error handlers
+      enableUnhandledRejection: false, // Don't hook into global rejection handlers
+    })
   }
 
   async notify(error: Error, context?: any): Promise<void> {
-    const headers = {
-      'X-API-Key': this.apiKey,
-      'Content-Type': 'application/json',
-      Accept: 'application/json',
-      'User-Agent': `${this.clientName} ${this.clientVersion}; ${this.platform}`,
+    if (!this.client) {
+      console.warn('ErrorReporter: Honeybadger client not initialized')
+      return
     }
 
-    const payload = await this.buildPayload(error, context)
-    const method = 'POST'
-    const body = JSON.stringify(payload)
-    const mode = 'cors'
-
-    fetch(this.noticeUrl, { headers, method, body, mode })
-      .then((response) => {
-        if (response.status !== 201) {
-          this.logger.warn(
-            `Error report failed: unknown response from server. code=${response.status}`
-          )
-          return
-        }
-        return response.json()
-      })
-      .then((data: HoneybadgerResponseData) => {
-        if (data) {
-          this.logger.info(`Error report sent ⚡ https://app.honeybadger.io/notice/${data?.id}`)
-        }
-      })
-  }
-
-  async buildPayload(error: Error, localContext = {}): Promise<Partial<NoticeTransportPayload>> {
-    const notice: Notice = error as Notice
-    notice.stack = generateStackTrace()
-
-    notice.backtrace = makeBacktrace(notice.stack)
-
-    return {
-      notifier,
-      error: {
-        class: notice.name as string,
-        message: notice.message as string,
-        backtrace: notice.backtrace,
-        // fingerprint: this.calculateFingerprint(notice),
-        tags: notice.tags || [],
-        causes: getCauses(notice, this.logger),
-      },
-      request: {
-        url: notice.url,
-        component: notice.component,
-        action: notice.action,
-        context: localContext || {},
-        cgi_data: {},
-        params: {},
-        session: {},
-      },
-      server: {
-        project_root: notice.projectRoot,
-        environment_name: this.userAgent,
-        revision: version,
-        hostname: this.platform,
-        time: new Date().toUTCString(),
-      },
-      details: notice.details || {},
+    try {
+      // Set context for this error report
+      if (context) {
+        this.client.setContext(context)
+      }
+
+      // Notify Honeybadger
+      await this.client.notify(error)
+    } catch (err) {
+      console.error('ErrorReporter: Failed to send error report', err)
+    } finally {
+      // Clear context after reporting (always runs if context was set)
+      if (context) {
+        this.client.clear()
+      }
     }
   }
 }

package/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './error'
+export * from './telemetry'
 export * from './url'