@quiltt/react-native 5.0.0 → 5.0.2

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.2";
+
+// 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": "5.0.0",
+  "version": "5.0.2",
   "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,18 +48,18 @@
   ],
   "main": "dist/index.js",
   "dependencies": {
-    "@honeybadger-io/core": "6.7.2",
+    "@honeybadger-io/react-native": "6.4.7",
     "lodash.debounce": "4.0.8",
     "react-native-device-info": "15.0.1",
-    "@quiltt/core": "5.0.0",
-    "@quiltt/react": "5.0.0"
+    "@quiltt/core": "5.0.2",
+    "@quiltt/react": "5.0.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.13",
+    "@biomejs/biome": "2.3.14",
     "@types/base-64": "1.0.2",
     "@types/lodash.debounce": "4.0.9",
-    "@types/node": "24.10.9",
-    "@types/react": "19.2.10",
+    "@types/node": "24.10.10",
+    "@types/react": "19.2.11",
     "base-64": "1.0.0",
     "bunchee": "6.9.4",
     "react": "19.2.4",

package/src/utils/error/ErrorReporter.ts

@@ -1,95 +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 logger: Console
-  private userAgent: string
+  private client: typeof Honeybadger
 
   constructor(userAgent: string) {
-    this.noticeUrl = 'https://api.honeybadger.io/v1/notices'
-    this.apiKey = process.env.HONEYBADGER_API_KEY_REACT_NATIVE || ''
-    this.logger = console
-    this.userAgent = 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, // 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.userAgent,
+    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.userAgent,
-        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/telemetry.ts

@@ -2,14 +2,7 @@ import React from 'react'
 import { Platform } from 'react-native'
 
 import { getUserAgent as coreGetUserAgent } from '@quiltt/core'
-
-// Optionally import react-native-device-info if available
-let DeviceInfo: any = null
-try {
-  DeviceInfo = require('react-native-device-info').default
-} catch {
-  // react-native-device-info is not installed - will use fallback
-}
+import DeviceInfo from 'react-native-device-info'
 
 /**
  * Gets the React version from the runtime
@@ -57,13 +50,8 @@ export const getOSInfo = (): string => {
 
 /**
  * Gets device model information
- * Falls back to 'Unknown' if react-native-device-info is not installed
  */
 export const getDeviceModel = async (): Promise<string> => {
-  if (!DeviceInfo) {
-    return 'Unknown'
-  }
-
   try {
     const model = await DeviceInfo.getModel()
     return model || 'Unknown'