@thead-vantage/react 2.11.0 → 2.13.0

package/README.md

@@ -31,7 +31,7 @@ The TheAd Vantage integration supports multiple modes of operation to accommodat
 **Use Case**: Platform developers using the component in production deployments.
 
 **Behavior**: 
-- Connects to `https://thead-vantage.com/api/ads`
+- Connects to `https://www.thead-vantage.com/api/ads` (uses www to avoid 308 redirects)
 - Full tracking enabled (impressions and clicks are recorded)
 - No configuration required
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.11.0",
+  "version": "2.13.0",
   "description": "React components and utilities for TheAd Vantage ad platform integration",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/lib/ads.ts

@@ -168,16 +168,26 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
       });
 
       // Handle redirects manually (if any)
+      // Note: 308 redirects at Vercel edge level will still break CORS preflight
+      // This handles redirects for the actual GET request, but preflight redirects are blocked by browser
       if (response.type === 'opaqueredirect' || (response.status >= 300 && response.status < 400)) {
         const location = response.headers.get('location');
         if (location) {
-          // Follow the redirect for the actual request (not preflight)
+          // Extract the redirect URL
           const redirectUrl = location.startsWith('http') 
             ? location 
             : new URL(location, normalizedUrl).toString();
-          console.warn('[AdBanner] Server redirected request, following redirect:', redirectUrl.replace(new RegExp(`api_key=${params.apiKey}`, 'g'), 'api_key=***'));
+          
+          console.warn('[AdBanner] Server redirected request (status:', response.status, '), following redirect:', redirectUrl.replace(new RegExp(`api_key=${params.apiKey}`, 'g'), 'api_key=***'));
+          console.warn('[AdBanner] Note: If this is a 308 redirect, it may break CORS preflight. Consider using the canonical domain directly.');
+          
           // Recursively call with the redirect URL
-          return await fetchAdBanner({ ...params, apiUrl: redirectUrl });
+          // Limit recursion to prevent infinite loops
+          const redirectCount = (params as any).__redirectCount || 0;
+          if (redirectCount >= 3) {
+            throw new Error('Too many redirects. The server may be misconfigured.');
+          }
+          return await fetchAdBanner({ ...params, apiUrl: redirectUrl, __redirectCount: redirectCount + 1 } as any);
         }
       }
 
@@ -303,9 +313,22 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
     } catch (error) {
       // Handle CORS errors specifically
       if (error instanceof TypeError && (error.message.includes('CORS') || error.message.includes('Failed to fetch'))) {
-        console.error('[AdBanner] CORS error detected. This usually means the server is redirecting preflight requests.');
-        console.error('[AdBanner] The server at thead-vantage.com needs to handle OPTIONS requests directly without redirecting.');
-        throw new Error('CORS error: The ad server is redirecting preflight requests. This needs to be fixed server-side. See CORS_CONFIGURATION.md for details.');
+        // Check if this might be a 308 redirect issue
+        // Vercel redirects thead-vantage.com → www.thead-vantage.com at edge level
+        // This breaks CORS preflight because browsers don't allow redirects on OPTIONS requests
+        const isRedirectIssue = normalizedUrl.includes('thead-vantage.com') && !normalizedUrl.includes('www.');
+        
+        if (isRedirectIssue) {
+          console.error('[AdBanner] CORS error detected. This appears to be a 308 redirect issue.');
+          console.error('[AdBanner] The domain thead-vantage.com redirects to www.thead-vantage.com at Vercel edge level.');
+          console.error('[AdBanner] This breaks CORS preflight requests because browsers block redirects on OPTIONS requests.');
+          console.error('[AdBanner] Solution: Use www.thead-vantage.com directly (library has been updated to do this).');
+          throw new Error('CORS error: 308 redirect detected. The server redirects thead-vantage.com → www.thead-vantage.com, which breaks CORS preflight. The library now uses www.thead-vantage.com by default. If you see this error, check your API URL configuration.');
+        } else {
+          console.error('[AdBanner] CORS error detected. This usually means the server is redirecting preflight requests.');
+          console.error('[AdBanner] The server needs to handle OPTIONS requests directly without redirecting.');
+          throw new Error('CORS error: The ad server is redirecting preflight requests. This needs to be fixed server-side. See CORS_CONFIGURATION.md for details.');
+        }
       }
       
       console.error('[AdBanner] Error fetching ad:', error);
@@ -355,6 +378,15 @@ export async function trackImpression(adId: string): Promise<void> {
       trackingUrl = trackingUrl.replace(/\/$/, '') + '/api/ads/track';
     }
     
+    // Normalize URL to HTTPS and ensure www (avoid 308 redirects)
+    if (trackingUrl.startsWith('http://')) {
+      trackingUrl = trackingUrl.replace('http://', 'https://');
+    }
+    // Ensure www to avoid redirects
+    if (trackingUrl.includes('thead-vantage.com') && !trackingUrl.includes('www.')) {
+      trackingUrl = trackingUrl.replace('thead-vantage.com', 'www.thead-vantage.com');
+    }
+    
     // Check if we should skip tracking (dev mode)
     const useDevFlags = shouldUseDevFlags();
     if (useDevFlags) {
@@ -364,6 +396,8 @@ export async function trackImpression(adId: string): Promise<void> {
     
     const response = await fetch(trackingUrl, {
       method: 'POST',
+      mode: 'cors', // Explicitly enable CORS
+      credentials: 'omit', // Don't send cookies
       headers: {
         'Content-Type': 'application/json',
         'Accept': 'application/json',
@@ -384,7 +418,12 @@ export async function trackImpression(adId: string): Promise<void> {
       console.log(`[DEV] Impression tracking skipped for ad: ${adId}`);
     }
   } catch (error) {
-    console.error('Error tracking impression:', error);
+    // Handle CORS errors silently (tracking failures shouldn't break the app)
+    if (error instanceof TypeError && (error.message.includes('CORS') || error.message.includes('Failed to fetch'))) {
+      console.warn(`[AdBanner] CORS error tracking impression for ad: ${adId}. The tracking endpoint needs CORS headers configured.`);
+    } else {
+      console.error('Error tracking impression:', error);
+    }
     // Don't throw - tracking failures shouldn't break the app
   }
 }
@@ -407,6 +446,15 @@ export async function trackClick(adId: string): Promise<void> {
       trackingUrl = trackingUrl.replace(/\/$/, '') + '/api/ads/track';
     }
     
+    // Normalize URL to HTTPS and ensure www (avoid 308 redirects)
+    if (trackingUrl.startsWith('http://')) {
+      trackingUrl = trackingUrl.replace('http://', 'https://');
+    }
+    // Ensure www to avoid redirects
+    if (trackingUrl.includes('thead-vantage.com') && !trackingUrl.includes('www.')) {
+      trackingUrl = trackingUrl.replace('thead-vantage.com', 'www.thead-vantage.com');
+    }
+    
     // Check if we should skip tracking (dev mode)
     const useDevFlags = shouldUseDevFlags();
     if (useDevFlags) {
@@ -416,6 +464,8 @@ export async function trackClick(adId: string): Promise<void> {
     
     const response = await fetch(trackingUrl, {
       method: 'POST',
+      mode: 'cors', // Explicitly enable CORS
+      credentials: 'omit', // Don't send cookies
       headers: {
         'Content-Type': 'application/json',
         'Accept': 'application/json',
@@ -436,7 +486,12 @@ export async function trackClick(adId: string): Promise<void> {
       console.log(`[DEV] Click tracking skipped for ad: ${adId}`);
     }
   } catch (error) {
-    console.error('Error tracking click:', error);
+    // Handle CORS errors silently (tracking failures shouldn't break the app)
+    if (error instanceof TypeError && (error.message.includes('CORS') || error.message.includes('Failed to fetch'))) {
+      console.warn(`[AdBanner] CORS error tracking click for ad: ${adId}. The tracking endpoint needs CORS headers configured.`);
+    } else {
+      console.error('Error tracking click:', error);
+    }
     // Don't throw - tracking failures shouldn't break the app
   }
 }

package/src/lib/thead-vantage-config.ts

@@ -85,16 +85,19 @@ export function getApiBaseUrl(explicitApiUrl?: string): string {
 
   // Priority 4: Localhost development (platform developers on localhost)
   // Use production API but will add dev flags to prevent tracking
+  // Use www.thead-vantage.com to avoid 308 redirects
   if (!selectedUrl && isLocalhost()) {
-    selectedUrl = 'https://thead-vantage.com/api/ads';
-    reason = 'localhost detection (production API with dev flags)';
+    selectedUrl = 'https://www.thead-vantage.com/api/ads';
+    reason = 'localhost detection (production API with dev flags - using www to avoid redirects)';
   }
 
   // Priority 5: Production mode (default)
   // Platform developers use this by default in production
+  // IMPORTANT: Use www.thead-vantage.com to avoid 308 redirects at Vercel edge
+  // Vercel redirects thead-vantage.com → www.thead-vantage.com, which breaks CORS preflight
   if (!selectedUrl) {
-    selectedUrl = 'https://thead-vantage.com/api/ads';
-    reason = 'production mode (default)';
+    selectedUrl = 'https://www.thead-vantage.com/api/ads';
+    reason = 'production mode (default - using www to avoid redirects)';
   }
 
   // Normalize the URL to avoid redirects that cause CORS preflight issues