NETLIFY_API_FIX.md

🔧 Netlify API Not Working - Diagnosis & Fix

🔍 The Problem

The Netlify function wasn't working because of a URL format mismatch:

• App calls: /.netlify/functions/upc/product/123456789012
• Function expects: /.netlify/functions/upc?barcode=123456789012

✅ The Fix

I've updated netlify/functions/upc.js to handle both formats:

• ✅ Query parameter: ?barcode=123
• ✅ Path-based: /product/123 or /product/123/

🧪 How to Test

1. Test the Function Directly

After deploying, test these URLs in your browser:

Query parameter format:

https://your-site.netlify.app/.netlify/functions/upc?barcode=0123456789012

Path format (now supported):

https://your-site.netlify.app/.netlify/functions/upc/product/0123456789012

Both should return JSON product data.

2. Check Environment Variables

Make sure in Netlify Dashboard → Site Settings → Environment Variables:

Required:

• UPC_API_KEY=4190D3F1E6057DD921DA7E426A79AAF3
• SPOONACULAR_API_KEY=6da1ac7558c34c9d9c314d1172952a6a

Scopes: Make sure "Functions" is checked ✅

3. Check Function Logs

1. Go to Netlify Dashboard → Functions
2. Click on upc function
3. View logs to see if there are errors
4. Look for:
   • Missing UPC_API_KEY errors
   • Network errors
   • API response errors

4. Test in Browser Console

1. Open your Netlify site
2. Open DevTools (F12) → Console
3. Scan a barcode
4. Look for:
   • Network requests to /.netlify/functions/upc
   • Any error messages
   • Check if ITEM_INFO_PROXY_URL is set correctly

🐛 Common Issues

Issue 1: "Function not found" (404)

Solution:

• Verify netlify/functions/upc.js exists in your repo
• Check that function was deployed (should see it in Functions tab)
• Trigger a new deploy

Issue 2: "Missing API key" error

Solution:

• Go to Netlify Dashboard → Environment Variables
• Verify UPC_API_KEY is set
• Make sure "Functions" scope is checked
• Trigger a new deploy after adding variables

Issue 3: "CORS error"

Solution:

• The function handles CORS automatically
• If you still see CORS errors, check browser console
• Make sure you're calling the function from the same domain

Issue 4: "Network error" or timeout

Solution:

• Check Netlify function logs
• Verify UPC Database API is accessible
• Check if API key is valid
• Function has 10-second timeout by default

🔄 After Fixing

1. Push the fix:

   git add netlify/functions/upc.js
   git commit -m "Fix Netlify function to handle path-based URLs"
   git push

2. Wait for Netlify to rebuild (automatic)

3. Test again:

   • Test function directly (see URLs above)
   • Test in your app
   • Check browser console for errors

📊 Debugging Steps

1. Check if function is deployed:

   • Netlify Dashboard → Functions → Should see upc and recipe

2. Test function directly:

   • Use the test URLs above
   • Should return JSON (even if error, means function works)

3. Check environment variables:

   • Netlify Dashboard → Environment Variables
   • Verify all required variables are set

4. Check browser console:

   • Open DevTools → Console
   • Look for errors when scanning
   • Check Network tab for API calls

5. Check function logs:

   • Netlify Dashboard → Functions → upc → View logs
   • Look for errors or missing variables

✅ Expected Behavior

After the fix:

• ✅ Function accepts both ?barcode=123 and /product/123 formats
• ✅ App automatically detects Netlify and uses /.netlify/functions/upc
• ✅ Product information loads when scanning barcodes
• ✅ No CORS errors
• ✅ Function logs show successful API calls

---

The fix has been pushed. After Netlify rebuilds, test again!