Fix Bitcoin price API for production with CORS and error handling

Author: douvy

pages/api/coinbase-realtime.js

@@ -76,6 +76,18 @@ if (typeof global !== 'undefined') {
 }
 
 export default async function handler(req, res) {
+  // CRITICAL FOR PRODUCTION: Add CORS headers
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+  
+  // If it's a preflight request, send 200
+  if (req.method === 'OPTIONS') {
+    return res.status(200).end();
+  }
+  
+  // Log request in production for debugging
+  console.log('Coinbase realtime API called, environment:', process.env.NODE_ENV);
   // If WebSocket is not available or hasn't received data yet
   if (!lastPrice) {
     console.log('WebSocket data not available, fetching direct price');

pages/api/price-history.js

@@ -9,10 +9,23 @@ let cacheTimestamp = 0;
 const CACHE_TTL = 5 * 60 * 1000; // 5 minutes cache for historical data
 
 export default async function handler(req, res) {
+  // CRITICAL FOR PRODUCTION: Add CORS headers
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+  
+  // If it's a preflight request, send 200
+  if (req.method === 'OPTIONS') {
+    return res.status(200).end();
+  }
+  
   // Set cache headers for the browser - allow for more frequent updates
   // We use WebSockets for real-time data, so this is just for the historical data
   res.setHeader('Cache-Control', 'public, max-age=60, s-maxage=300');
 
+  // Log for debugging in production
+  console.log('Price history API called, environment:', process.env.NODE_ENV);
+  
   try {
     // Try to use cache if available and not expired
     const now = Date.now();

src/hooks/useBitcoinPrice.ts

@@ -161,15 +161,23 @@ export function useBitcoinPrice(initialTimeframe: TimeFrame = '1D'): UseBitcoinP
 
   // Set up polling on mount
   useEffect(() => {
+    // Add debug log for production
+    console.log('Setting up Bitcoin price polling in', process.env.NODE_ENV);
+    
     // Do NOT use fallback data - just show loading state until real data arrives
     // The initial fetch is fast enough with WebSockets
 
     // Initial fetch
-    fetchBitcoinData(true);
+    console.log('Starting initial Bitcoin price fetch');
+    fetchBitcoinData(true)
+      .then(() => console.log('Initial Bitcoin price fetch complete'))
+      .catch(err => console.error('Error in initial price fetch:', err));
 
     // Set up refresh interval for real-time updates
     pollingIntervalRef.current = setInterval(() => {
-      fetchBitcoinData(true);
+      console.log('Executing periodic Bitcoin price refresh');
+      fetchBitcoinData(true)
+        .catch(err => console.error('Error in periodic price fetch:', err));
     }, REFRESH_INTERVAL);
 
     // Cleanup on unmount

src/lib/minimalBitcoinApi.ts

@@ -78,17 +78,24 @@ export async function getBitcoinPrice(timeframe: TimeFrame): Promise<BitcoinPric
 
     clearTimeout(timeoutId);
 
-    if (realtimeResponse.ok) {
-      const realtimeData = await realtimeResponse.json();
-      
-      if (realtimeData.success && realtimeData.price) {
-        realtimePrice = realtimeData.price;
-        console.log('Using real-time price:', realtimePrice, 'from', realtimeData.source || 'unknown');
-      } else {
-        console.warn('Real-time API returned success:false');
-      }
-    } else {
+    // Try to parse even if status is not OK
+    let realtimeData;
+    try {
+      realtimeData = await realtimeResponse.json();
+      console.log('Real-time API response:', realtimeData);
+    } catch (parseError) {
+      console.warn('Failed to parse real-time API response', parseError);
+      const text = await realtimeResponse.text();
+      console.warn('Raw response:', text);
+    }
+    
+    if (realtimeData && realtimeData.success && realtimeData.price) {
+      realtimePrice = realtimeData.price;
+      console.log('Using real-time price:', realtimePrice, 'from', realtimeData.source || 'unknown');
+    } else if (!realtimeResponse.ok) {
       console.warn('Real-time API returned non-OK status:', realtimeResponse.status);
+    } else {
+      console.warn('Real-time API returned invalid data:', realtimeData);
     }
   } catch (error) {
     console.warn('Failed to get real-time price, will use historical data:', error);
@@ -123,11 +130,31 @@ export async function getBitcoinPrice(timeframe: TimeFrame): Promise<BitcoinPric
 
     clearTimeout(timeoutId);
 
+    // Try to parse the response even if status is not OK
+    let result;
+    try {
+      result = await response.json();
+      console.log('Historical API response structure:', 
+        result ? 
+        `success=${!!result.success}, has timeframes=${!!result.timeframes}, timeframe count=${result.timeframes ? Object.keys(result.timeframes).length : 0}` : 
+        'null response'
+      );
+    } catch (error) {
+      console.error('Failed to parse historical API response', error);
+      const text = await response.text();
+      console.error('Raw historical response:', text);
+      throw new Error(`Failed to parse API response: ${error instanceof Error ? error.message : String(error)}`);
+    }
+    
     if (!response.ok) {
-      throw new Error(`API error: ${response.status}`);
+      console.error(`Historical API error: ${response.status}`);
     }
 
-    const result = await response.json();
+    // Validate the response structure
+    if (!result || !result.price || !result.timeframes) {
+      console.error('Invalid historical API response structure:', result);
+      throw new Error('Invalid historical data structure');
+    }
 
     // Save to cache for future use
     saveToCache(result);