feat: add debug logging functionality

Author: amitpdev

README.md

@@ -186,33 +186,33 @@ const PlaceDetailsExample = () => {
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| **Essential Props** |
+| **Basic Configuration** |
 | apiKey | string | Yes | - | Your Google Places API key |
-| **Input Configuration** |
-| value | string | No | '' | Initial input value |
-| placeHolderText | string | No | - | Placeholder text for input |
-| minCharsToFetch | number | No | 1 | Minimum characters before fetching |
-| debounceDelay | number | No | 200 | Delay before triggering search |
-| **Places API Configuration** |
-| proxyUrl | string | No | - | Custom proxy URL for Places API requests |
+| value | string | No | - | Controlled input value |
+| placeHolderText | string | No | - | Placeholder text for the input |
+| onPlaceSelect | (place: Place, sessionToken?: string) => void | Yes | - | Callback when a place is selected |
+| onTextChange | (text: string) => void | No | - | Callback when input text changes |
+| **Search Configuration** |
+| proxyUrl | string | No | - | Custom proxy URL for API requests (Required for Expo web) |
 | languageCode | string | No | - | Language code (e.g., 'en', 'fr') |
 | includedRegionCodes | string[] | No | - | Array of region codes to filter results |
 | types | string[] | No | [] | Array of place types to filter |
 | biasPrefixText | (text: string) => string | No | - | Optional function to modify the input text before sending to the Places API |
+| minCharsToFetch | number | No | 1 | Minimum characters before triggering search |
+| debounceDelay | number | No | 200 | Delay in milliseconds before triggering search |
 | **Place Details Configuration** |
 | fetchDetails | boolean | No | false | Automatically fetch place details when a place is selected |
 | detailsProxyUrl | string | No | null | Custom proxy URL for place details requests (Required on Expo web)|
 | detailsFields | string[] | No | ['displayName', 'formattedAddress', 'location', 'id'] | Array of fields to include in the place details response. see [Valid Fields](https://developers.google.com/maps/documentation/places/web-service/place-details#fieldmask) |
 | **UI Customization** |
-| style | StyleProp | No | {} | Custom styles object |
-| showLoadingIndicator | boolean | No | true | Show/hide loading indicator |
-| showClearButton | boolean | No | true | Show/hide the input clear button |
-| forceRTL | boolean | No | undefined | Force RTL layout direction |
-hideOnKeyboardDismiss | boolean | No | false | Hide suggestions when keyboard is dismissed
-| **Event Handlers** |
-| onPlaceSelect | (place: Place \| null, sessionToken?: string) => void | Yes | - | Callback when place is selected |
-| onTextChange | (text: string) => void | No | - | Callback triggered on text input changes |
-| onError | (error: any) => void | No | - | Callback for handling API errors |
+| showLoadingIndicator | boolean | No | true | Show loading spinner during API requests |
+| showClearButton | boolean | No | true | Show clear (×) button when input has text |
+| forceRTL | boolean | No | - | Force RTL layout (auto-detected if not provided) |
+| style | GooglePlacesTextInputStyles | No | {} | Custom styling object |
+| hideOnKeyboardDismiss | boolean | No | false | Hide suggestions when keyboard is dismissed |
+| **Error Handling & Debugging** |
+| onError | (error: any) => void | No | - | Callback when API errors occur |
+| enableDebug | boolean | No | false | Enable detailed console logging for troubleshooting |
 
 ## Place Details Fetching
 

src/GooglePlacesTextInput.tsx

@@ -94,6 +94,7 @@ interface GooglePlacesTextInputProps {
   detailsProxyUrl?: string | null; // ✅ Add | null to match JS
   detailsFields?: string[];
   onError?: (error: any) => void;
+  enableDebug?: boolean; // ✅ Add debug prop
 }
 
 interface GooglePlacesTextInputRef {
@@ -133,6 +134,7 @@ const GooglePlacesTextInput = forwardRef<
       detailsProxyUrl = null,
       detailsFields = [],
       onError,
+      enableDebug = false,
     },
     ref
   ) => {
@@ -209,8 +211,37 @@ const GooglePlacesTextInput = forwardRef<
       }
     }, [fetchDetails, detailsProxyUrl]);
 
+    // Debug logger utility
+    const debugLog = (category: string, message: string, data?: any) => {
+      if (enableDebug) {
+        const timestamp = new Date().toISOString();
+        console.log(
+          `[GooglePlacesTextInput:${category}] ${timestamp} - ${message}`
+        );
+        if (data) {
+          console.log(`[GooglePlacesTextInput:${category}] Data:`, data);
+        }
+      }
+    };
+
     const fetchPredictions = async (text: string): Promise<void> => {
+      debugLog('PREDICTIONS', `Starting fetch for text: "${text}"`);
+      debugLog('PREDICTIONS', 'Request params', {
+        text,
+        apiKey: apiKey ? '[PROVIDED]' : '[MISSING]', // ✅ Security fix
+        proxyUrl,
+        sessionToken,
+        languageCode,
+        includedRegionCodes,
+        types,
+        minCharsToFetch,
+      });
+
       if (!text || text.length < minCharsToFetch) {
+        debugLog(
+          'PREDICTIONS',
+          `Text too short (${text.length} < ${minCharsToFetch})`
+        );
         setPredictions([]);
         return;
       }
@@ -230,9 +261,19 @@ const GooglePlacesTextInput = forwardRef<
         });
 
       if (error) {
+        debugLog('PREDICTIONS', 'API Error occurred', {
+          errorType: error.constructor.name,
+          errorMessage: error.message,
+          errorStack: error.stack,
+        });
         onError?.(error);
         setPredictions([]);
       } else {
+        debugLog(
+          'PREDICTIONS',
+          `Success: ${fetchedPredictions.length} predictions received`
+        );
+        debugLog('PREDICTIONS', 'Predictions data', fetchedPredictions);
         setPredictions(fetchedPredictions);
         setShowSuggestions(fetchedPredictions.length > 0);
       }
@@ -243,7 +284,33 @@ const GooglePlacesTextInput = forwardRef<
     const fetchPlaceDetails = async (
       placeId: string
     ): Promise<PlaceDetailsFields | null> => {
-      if (!fetchDetails || !placeId) return null;
+      debugLog('DETAILS', `Starting details fetch for placeId: ${placeId}`);
+      debugLog('DETAILS', 'Request params', {
+        placeId,
+        apiKey: apiKey ? '[PROVIDED]' : '[MISSING]', // ✅ Security fix
+        detailsProxyUrl,
+        sessionToken,
+        languageCode,
+        detailsFields,
+        fetchDetails,
+        platform: Platform.OS,
+      });
+
+      if (!fetchDetails || !placeId) {
+        debugLog('DETAILS', 'Skipping details fetch', {
+          fetchDetails,
+          placeId,
+        });
+        return null;
+      }
+
+      // Web CORS warning
+      if (Platform.OS === 'web' && !detailsProxyUrl) {
+        debugLog(
+          'DETAILS',
+          'WARNING: Web platform detected without detailsProxyUrl - CORS issues likely'
+        );
+      }
 
       setDetailsLoading(true);
 
@@ -259,10 +326,16 @@ const GooglePlacesTextInput = forwardRef<
       setDetailsLoading(false);
 
       if (error) {
+        debugLog('DETAILS', 'API Error occurred', {
+          errorType: error.constructor.name,
+          errorMessage: error.message,
+          errorStack: error.stack,
+        });
         onError?.(error);
         return null;
       }
 
+      debugLog('DETAILS', 'Success: Details received', details);
       return details;
     };
 
@@ -283,17 +356,39 @@ const GooglePlacesTextInput = forwardRef<
       suggestion: PredictionItem
     ): Promise<void> => {
       const place = suggestion.placePrediction;
+      debugLog(
+        'SELECTION',
+        `User selected place: ${place.structuredFormat.mainText.text}`
+      );
+      debugLog('SELECTION', 'Selected place data', place);
+
       setInputText(place.structuredFormat.mainText.text);
       setShowSuggestions(false);
       Keyboard.dismiss();
 
       if (fetchDetails) {
+        debugLog('SELECTION', 'Fetching place details...');
         setLoading(true);
         const details = await fetchPlaceDetails(place.placeId);
         const enrichedPlace: Place = details ? { ...place, details } : place;
+
+        debugLog(
+          'SELECTION',
+          'Final place object being sent to onPlaceSelect',
+          {
+            hasDetails: !!details,
+            placeKeys: Object.keys(enrichedPlace),
+            detailsKeys: details ? Object.keys(details) : null,
+          }
+        );
+
         onPlaceSelect?.(enrichedPlace, sessionToken);
         setLoading(false);
       } else {
+        debugLog(
+          'SELECTION',
+          'Sending place without details (fetchDetails=false)'
+        );
         onPlaceSelect?.(place, sessionToken);
       }
       setSessionToken(generateSessionToken());
@@ -395,17 +490,28 @@ const GooglePlacesTextInput = forwardRef<
       return { end: paddingValue };
     };
 
+    // Debug initialization
+    useEffect(() => {
+      if (enableDebug) {
+        debugLog('INIT', 'Component initialized with props', {
+          apiKey: apiKey ? '[PROVIDED]' : '[MISSING]', // ✅ Security fix
+          fetchDetails,
+          detailsProxyUrl,
+          detailsFields,
+          platform: Platform.OS,
+          minCharsToFetch,
+          debounceDelay,
+        });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // ✅ Only run on mount
+
     return (
       <View style={[styles.container, style.container]}>
         <View>
           <TextInput
             ref={inputRef}
-            style={[
-              styles.input,
-              style.input,
-              getPadding(),
-              { textAlign: isRTL ? 'right' : 'left' },
-            ]}
+            style={[styles.input, style.input, getPadding(), getTextAlign()]}
             placeholder={placeHolderText}
             placeholderTextColor={style.placeholder?.color || '#666666'}
             value={inputText}

src/services/googlePlacesApi.ts

@@ -162,8 +162,10 @@ export const fetchPlaceDetails = async ({
  */
 export const generateUUID = (): string => {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    /* eslint-disable no-bitwise */
     const r = (Math.random() * 16) | 0;
     const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    /* eslint-enable no-bitwise */
     return v.toString(16);
   });
 };