@robylon/react-native-sdk 2.0.16-staging.2 → 2.0.16-staging.3

package/src/FloatingButton.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { TouchableOpacity, StyleSheet, Text, Image } from "react-native";
+import { errorTracker } from "./services/ErrorTrackingService";
+import { ErrorTypes } from "./constants/errorConstants";
 
 interface FloatingButtonProps {
   onPress: () => void;
@@ -12,13 +14,28 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({
   brandColor = "#007AFF", // Default color
   imageUrl,
 }) => {
+  const handleImageError = () => {
+    errorTracker.trackError(
+      new Error("Failed to load button image"),
+      "FloatingButton",
+      {
+        type: ErrorTypes.RUNTIME_ERROR,
+        context: { imageUrl },
+      }
+    );
+  };
+
   return (
     <TouchableOpacity
       style={[styles.button, { backgroundColor: brandColor }]}
       onPress={onPress}
     >
       {imageUrl ? (
-        <Image source={{ uri: imageUrl }} style={styles.buttonImage} />
+        <Image
+          source={{ uri: imageUrl }}
+          style={styles.buttonImage}
+          onError={handleImageError}
+        />
       ) : (
         <Text style={styles.buttonText}>Chat</Text>
       )}

package/src/components/DebugButton.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet, View } from "react-native";
+import { openDebugMenu } from "../utils/debugMenu";
+import { openDebuggerFromApp } from "../utils/debugMenu";
+
+const DebugButton = () => {
+  if (!__DEV__) return null;
+
+  return (
+    <View style={styles.debugContainer}>
+      <TouchableOpacity style={styles.debugButton} onPress={openDebugMenu}>
+        <Text style={styles.debugText}>Menu</Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[styles.debugButton, styles.debuggerButton]}
+        onPress={openDebuggerFromApp}
+      >
+        <Text style={styles.debugText}>Debug</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  debugContainer: {
+    position: "absolute",
+    top: 40,
+    right: 10,
+    flexDirection: "row",
+    gap: 8,
+  },
+  debugButton: {
+    backgroundColor: "rgba(0,0,0,0.7)",
+    padding: 8,
+    borderRadius: 4,
+  },
+  debuggerButton: {
+    backgroundColor: "rgba(255,0,0,0.7)",
+  },
+  debugText: {
+    color: "white",
+    fontSize: 12,
+  },
+});
+
+export default DebugButton;

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+import { errorTracker } from "../services/ErrorTrackingService";
+import { ErrorTypes } from "../constants/errorConstants";
+
+interface Props {
+  children: ReactNode;
+  componentName: string;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(_: Error): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    errorTracker.trackError(error, this.props.componentName, {
+      errorInfo,
+      type: ErrorTypes.RUNTIME_ERROR,
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null; // Or a fallback UI if needed
+    }
+
+    return this.props.children;
+  }
+}

package/src/constants/errorConstants.ts

@@ -0,0 +1,21 @@
+export enum ErrorCodes {
+  MISSING_API_KEY = "MISSING_API_KEY",
+  ERROR_TRACKING_INIT_FAILED = "ERROR_TRACKING_INIT_FAILED",
+  WEBVIEW_LOAD_ERROR = "WEBVIEW_LOAD_ERROR",
+  CONFIG_FETCH_ERROR = "CONFIG_FETCH_ERROR",
+}
+
+export enum ErrorTypes {
+  INITIALIZATION_ERROR = "INITIALIZATION_ERROR",
+  RUNTIME_ERROR = "RUNTIME_ERROR",
+  NETWORK_ERROR = "NETWORK_ERROR",
+}
+
+export const ErrorMessages = {
+  [ErrorCodes.MISSING_API_KEY]: (apiKey: any) =>
+    `Invalid API key: ${apiKey}. Please provide a valid API key.`,
+  [ErrorCodes.ERROR_TRACKING_INIT_FAILED]:
+    "Failed to initialize error tracking service.",
+  [ErrorCodes.WEBVIEW_LOAD_ERROR]: "Failed to load chatbot interface.",
+  [ErrorCodes.CONFIG_FETCH_ERROR]: "Failed to fetch chatbot configuration.",
+};

package/src/hooks/useChatbotEvents.ts

@@ -0,0 +1,93 @@
+import { useCallback } from "react";
+import { getSystemInfo } from "../utils/systemInfo";
+import { logger } from "../utils/logger";
+import {
+  ChatbotEventType,
+  AllEventTypes,
+  ChatbotEventHandler,
+} from "../types/events";
+import { API_URL } from "../constants";
+
+interface EventHookProps {
+  api_key: string;
+  chatbotConfig: any;
+  user_profile?: Record<string, any>;
+  onEvent?: ChatbotEventHandler;
+  systemInfo: { os: string; browser: string }; // Add this to get system info from WebView
+}
+
+export const useChatbotEvents = ({
+  api_key,
+  chatbotConfig,
+  user_profile,
+  onEvent,
+  systemInfo,
+}: EventHookProps) => {
+  const onInternalEvent = useCallback(
+    async (
+      eventType: AllEventTypes,
+      additionalData: Record<string, any> = {}
+    ) => {
+      if (!api_key) return;
+
+      try {
+        const apiUrl = API_URL;
+        const sysInfo = getSystemInfo(systemInfo);
+
+        const eventData = {
+          trigger_time: Date.now(),
+          channel: "CHATBOT",
+          org_id: api_key,
+          client_user_id: chatbotConfig?.isAnonymous
+            ? "Anonymous"
+            : String(chatbotConfig?.userId || ""),
+          event_type: eventType,
+          user_profile: { ...(user_profile || {}) },
+          ...additionalData,
+        };
+
+        const payload = {
+          org_id: api_key,
+          event_data: eventData,
+          metadata: {
+            timestamp: Date.now(),
+            ...sysInfo,
+          },
+          event_type: "INFO",
+          user_id: chatbotConfig?.userId,
+        };
+
+        logger.debug("Sending internal event:", payload);
+
+        const response = await fetch(`${apiUrl}/users/sdk/record-logs/`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+
+        if (!response.ok) {
+          throw new Error(
+            `Failed to send internal event: ${response.statusText}`
+          );
+        }
+      } catch (error) {
+        logger.error("Failed to send internal event:", error);
+      }
+    },
+    [api_key, chatbotConfig, user_profile, systemInfo]
+  );
+
+  const emitEvent = useCallback(
+    (type: ChatbotEventType, data?: any) => {
+      const timestamp = Date.now();
+      onEvent?.({ type, timestamp, data });
+      onInternalEvent(type, { ...data, timestamp });
+    },
+    [onEvent, onInternalEvent]
+  );
+
+  return {
+    emitEvent,
+    onInternalEvent,
+  };
+};

package/src/index.tsx

@@ -1,2 +1,10 @@
-export { default as ChatbotSDK } from "./Chatbotsdk";
+export { default as Chatbot } from "./Chatbotsdk";
 export { openChatbot } from "./openChatbot";
+export {
+  errorTracker,
+  ErrorTrackingService,
+} from "./services/ErrorTrackingService";
+export * from "./constants/errorConstants";
+export * from "./types/events";
+
+export type { ChatbotProps } from "./Chatbotsdk";

package/src/services/ErrorTrackingService.ts

@@ -0,0 +1,217 @@
+import { getSystemInfo } from "../utils/systemInfo";
+import { logger } from "../utils/logger";
+import { API_URL } from "../constants";
+import { Platform } from "react-native";
+
+export enum EventType {
+  ERROR = "ERROR",
+  INFO = "INFO",
+}
+
+export interface ErrorEvent {
+  message: string;
+  stack?: string;
+  componentName?: string | null | undefined;
+  additionalInfo?: Record<string, any>;
+  timestamp: number;
+}
+
+export interface LogPayload {
+  org_id: string;
+  event_data: ErrorEvent;
+  metadata: Record<string, any>;
+  event_type: EventType;
+  user_id?: string | number | null;
+}
+
+export class ErrorTrackingService {
+  private static instance: ErrorTrackingService;
+  private apiKey: string = "";
+  private userId: string | number | null | undefined = null;
+  private preInitQueue: Array<{
+    error: Error | string;
+    componentName?: string | null | undefined;
+    additionalInfo?: Record<string, any>;
+  }> = [];
+  private isInitialized = false;
+
+  private constructor() {}
+
+  static getInstance(): ErrorTrackingService {
+    if (!ErrorTrackingService.instance) {
+      ErrorTrackingService.instance = new ErrorTrackingService();
+    }
+    return ErrorTrackingService.instance;
+  }
+
+  initialize(apiKey: string, userId: string | number | null = null) {
+    try {
+      // Handle pre-init errors
+      if (this.preInitQueue.length > 0) {
+        const payload: LogPayload = {
+          org_id: "UNINITALIZED",
+          event_data: {
+            message: `SDK Initialization Failed: Required parameter 'api_key' is ${
+              apiKey === undefined
+                ? "undefined"
+                : apiKey === null
+                ? "null"
+                : apiKey === ""
+                ? "empty string"
+                : `invalid: ${apiKey}`
+            }`,
+            componentName: "ErrorTrackingService",
+            additionalInfo: {
+              preInitError: true,
+              apiKey,
+              userId,
+              timestamp: Date.now(),
+            },
+            timestamp: Date.now(),
+          },
+          metadata: getSystemInfo({ os: Platform.OS, browser: "React Native" }),
+          event_type: EventType.ERROR,
+          user_id: userId,
+        };
+
+        this.sendLog(payload).catch((error) =>
+          logger.error("Send log error:", error)
+        );
+      }
+
+      this.apiKey = apiKey;
+      this.userId = userId;
+      this.isInitialized = true;
+
+      this.processPreInitQueue();
+    } catch (error) {
+      logger.error("Error during ErrorTrackingService initialization:", error);
+      this.preInitQueue.push({
+        error: error instanceof Error ? error : new Error(String(error)),
+        componentName: "ErrorTrackingService",
+        additionalInfo: { apiKey, userId },
+      });
+    }
+  }
+
+  private async processPreInitQueue() {
+    if (!this.preInitQueue.length) return;
+
+    logger.info(
+      `Processing ${this.preInitQueue.length} pre-initialization errors`
+    );
+
+    for (const item of this.preInitQueue) {
+      await this.trackError(item.error, item.componentName, {
+        ...item.additionalInfo,
+        preInitError: true,
+      });
+    }
+
+    this.preInitQueue = [];
+  }
+
+  private async sendLog(payload: LogPayload): Promise<void> {
+    try {
+      logger.debug("Sending error log:", payload);
+      const response = await fetch(`${API_URL}/users/sdk/record-logs/`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        logger.error("Failed to send error log:", await response.text());
+      }
+    } catch (error) {
+      logger.error("Error sending log:", error);
+    }
+  }
+
+  async trackError(
+    error: Error | string,
+    componentName: string | null | undefined,
+    additionalInfo?: Record<string, any>
+  ) {
+    if (!this.isInitialized) {
+      const payload: LogPayload = {
+        org_id: "UNINITALIZED",
+        event_data: {
+          message: error instanceof Error ? error.message : error,
+          stack: error instanceof Error ? error.stack : undefined,
+          componentName,
+          additionalInfo: {
+            ...additionalInfo,
+            preInitError: true,
+            timestamp: Date.now(),
+          },
+          timestamp: Date.now(),
+        },
+        metadata: getSystemInfo({ os: Platform.OS, browser: "React Native" }),
+        event_type: EventType.ERROR,
+        user_id: this.userId,
+      };
+
+      try {
+        await this.sendLog(payload);
+      } catch (sendError) {
+        this.preInitQueue.push({ error, componentName, additionalInfo });
+        logger.warn("Error tracked before initialization, queuing:", error);
+      }
+      return;
+    }
+
+    const errorEvent: ErrorEvent = {
+      message: error instanceof Error ? error.message : error,
+      stack: error instanceof Error ? error.stack : undefined,
+      componentName,
+      additionalInfo: {
+        ...additionalInfo,
+        timestamp: Date.now(),
+      },
+      timestamp: Date.now(),
+    };
+
+    const payload: LogPayload = {
+      org_id: this.apiKey || "UNINITALIZED",
+      event_data: errorEvent,
+      metadata: getSystemInfo({ os: Platform.OS, browser: "React Native" }),
+      event_type: EventType.ERROR,
+      user_id: this.userId,
+    };
+
+    await this.sendLog(payload);
+  }
+
+  async trackInfo(
+    message: string,
+    componentName: string | null | undefined,
+    additionalInfo?: Record<string, any>
+  ) {
+    if (!this.apiKey) {
+      logger.error("Error tracking not initialized");
+      return;
+    }
+
+    const infoEvent: ErrorEvent = {
+      message,
+      componentName,
+      additionalInfo,
+      timestamp: Date.now(),
+    };
+
+    const payload: LogPayload = {
+      org_id: this.apiKey,
+      event_data: infoEvent,
+      metadata: getSystemInfo({ os: Platform.OS, browser: "React Native" }),
+      event_type: EventType.INFO,
+      user_id: this.userId,
+    };
+
+    await this.sendLog(payload);
+  }
+}
+
+export const errorTracker = ErrorTrackingService.getInstance();

package/src/types/events.ts

@@ -0,0 +1,25 @@
+export enum ChatbotEventType {
+  CHATBOT_BUTTON_LOADED = "CHATBOT_BUTTON_LOADED",
+  CHATBOT_BUTTON_CLICKED = "CHATBOT_BUTTON_CLICKED",
+  CHATBOT_OPENED = "CHATBOT_OPENED",
+  CHATBOT_CLOSED = "CHATBOT_CLOSED",
+  CHATBOT_APP_READY = "CHATBOT_APP_READY",
+  CHATBOT_LOADED = "CHATBOT_LOADED",
+  CHAT_INITIALIZED = "CHAT_INITIALIZED",
+  SESSION_REFRESHED = "SESSION_REFRESHED",
+  CHAT_INITIALIZATION_FAILED = "CHAT_INITIALIZATION_FAILED",
+}
+
+export enum InternalEventType {
+  CHAT_MOVED = "CHAT_MOVED",
+}
+
+export type AllEventTypes = ChatbotEventType | InternalEventType;
+
+export interface ChatbotEvent {
+  type: ChatbotEventType;
+  timestamp: number;
+  data?: any;
+}
+
+export type ChatbotEventHandler = (event: ChatbotEvent) => void;

package/src/types/react-native-flipper-performance-plugin.d.ts

@@ -0,0 +1,3 @@
+declare module "react-native-flipper-performance-plugin" {
+  export function addPlugin(): void;
+}

package/src/types/react-native-globals.d.ts

@@ -0,0 +1,10 @@
+declare global {
+  interface Global {
+    ErrorUtils: {
+      setGlobalHandler(callback: (error: Error) => void): void;
+      getGlobalHandler(): (error: Error, isFatal?: boolean) => void;
+    };
+  }
+}
+
+export {};

package/src/utils/cookieUtils.ts

@@ -0,0 +1,7 @@
+export const generateUUID = () => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0,
+      v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};

package/src/utils/debugConfig.ts

@@ -0,0 +1,56 @@
+import { Platform } from "react-native";
+
+declare global {
+  interface Window {
+    ReactNativeWebView: any;
+  }
+}
+
+declare let global: {
+  XMLHttpRequest: any;
+  FormData: any;
+  originalXMLHttpRequest: any;
+  originalFormData: any;
+};
+
+export const enableNetworkDebug = () => {
+  if (__DEV__) {
+    // Enable network request debugging
+    global.XMLHttpRequest =
+      global.originalXMLHttpRequest || global.XMLHttpRequest;
+    global.FormData = global.originalFormData || global.FormData;
+  }
+};
+
+export const enableWebViewDebug = (webViewRef: any) => {
+  if (__DEV__ && Platform.OS === "ios") {
+    // Enable console.log from WebView to show in native debugger
+    const script = `
+      window.onerror = function(message, sourcefile, lineno, colno, error) {
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          type: 'ERROR',
+          data: { message, sourcefile, lineno, colno, error: error?.toString() }
+        }));
+      };
+      
+      console = new Proxy(console, {
+        get: function(target, property) {
+          const origMethod = target[property];
+          return function(...args) {
+            const logData = args.map(arg => 
+              typeof arg === 'object' ? JSON.stringify(arg) : arg
+            ).join(' ');
+            
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+              type: 'CONSOLE',
+              level: property,
+              data: logData
+            }));
+            origMethod.apply(target, args);
+          };
+        }
+      });
+    true;`;
+    webViewRef.current?.injectJavaScript(script);
+  }
+};

package/src/utils/debugMenu.ts

@@ -0,0 +1,14 @@
+import { Platform, NativeModules } from "react-native";
+
+export const openDebugMenu = () => {
+  if (Platform.OS === "ios") {
+    NativeModules.DevMenu.show();
+  }
+};
+
+export const openDebuggerFromApp = () => {
+  if (Platform.OS === "ios") {
+    // For iOS
+    NativeModules.DevSettings.setIsDebuggingRemotely(true);
+  }
+};

package/src/utils/errorHandler.ts

@@ -0,0 +1,58 @@
+import { logger } from "./logger";
+import { ErrorTypes } from "../constants/errorConstants";
+import { Platform } from "react-native";
+import { errorTracker } from "../services/ErrorTrackingService";
+
+// Global error handler for uncaught errors and promise rejections
+export const setupGlobalErrorHandlers = () => {
+  if (__DEV__) {
+    // Handle synchronous errors
+    const errorHandler = (error: Error, isFatal?: boolean) => {
+      errorTracker.trackError(error, "GlobalErrorHandler", {
+        isFatal,
+        type: ErrorTypes.RUNTIME_ERROR,
+        platform: Platform.OS,
+      });
+    };
+
+    // Handle promise rejections
+    const rejectionHandler = (event: any) => {
+      errorTracker.trackError(
+        event?.reason || new Error("Unknown Promise Error"),
+        "UnhandledPromiseRejection",
+        {
+          type: ErrorTypes.RUNTIME_ERROR,
+          platform: Platform.OS,
+        }
+      );
+    };
+
+    // Set up handlers
+    if ((global as any).ErrorUtils) {
+      const prevHandler = (global as any).ErrorUtils.getGlobalHandler();
+      (global as any).ErrorUtils.setGlobalHandler(
+        (error: Error, isFatal?: boolean) => {
+          errorHandler(error, isFatal);
+          prevHandler(error, isFatal);
+        }
+      );
+    }
+
+    // Handle promise rejections
+    const setupPromiseRejectionTracking = () => {
+      const tracking = require("promise/setimmediate/rejection-tracking");
+      tracking.enable({
+        allRejections: true,
+        onUnhandled: (id: number, error: Error) => {
+          rejectionHandler({ reason: error });
+        },
+      });
+    };
+
+    try {
+      setupPromiseRejectionTracking();
+    } catch (error) {
+      logger.warn("Promise rejection tracking setup failed:", error);
+    }
+  }
+};

package/src/utils/logger.ts

@@ -0,0 +1,14 @@
+export const logger = {
+  error: (message: string, error?: any) => {
+    console.error(message, error);
+  },
+  info: (message: string, data?: any) => {
+    console.info(message, data);
+  },
+  warn: (message: string, data?: any) => {
+    console.warn(message, data);
+  },
+  debug: (message: string, data?: any) => {
+    console.log(message, data);
+  },
+};