Fix JSON parsing error when verification API returns HTML

[Copilot]

Verification buttons (Follow, Like, Retweet) crash with Unexpected token '<', "<!doctype "... is not valid JSON when API endpoints return HTML (404 pages) instead of JSON.

Changes

src/utils/api.ts

• Check Content-Type header before calling response.json()
• Gracefully fallback to verified = true when API returns non-JSON (backwards compatible)
• Log diagnostic warnings to console

vercel.json

• Add explicit /api/* rewrite rule to ensure proper serverless function routing

Implementation

// Before
const data = await response.json(); // crashes on HTML responses

// After
const contentType = response.headers.get('content-type');
if (!contentType || !contentType.includes('application/json')) {
  console.warn('API endpoint returned non-JSON response. The verification API may not be deployed correctly.');
  verified = true; // allow action when API unavailable
} else {
  const data = await response.json(); // safe
  // ... existing logic
}

Behavior

Scenario	Before	After
API returns HTML/404	❌ Crash	✅ Allow with warning
API returns JSON error	✅ Handle	✅ Handle (unchanged)
API verifies successfully	✅ Verify	✅ Verify (unchanged)
API returns verification failure	✅ Block	✅ Block (unchanged)

Original prompt

Problem

The verification buttons (Follow, Like, Retweet) are failing with the error:

Verification error: Unexpected token '<', "<!doctype "... is not valid JSON. Please try again later.

This error occurs because the API endpoints are returning HTML (likely a 404 page) instead of JSON responses when the serverless functions aren't properly deployed or accessible.

Root Cause

In src/utils/api.ts, the verifyAction method calls await response.json() without first checking if the response is actually JSON. When the API endpoints don't exist or return HTML error pages, this causes a JSON parsing error.

Required Changes

1. Improve Error Handling in src/utils/api.ts

In the XPostAPI.verifyAction method around line 636-676:

• Check the Content-Type header before attempting to parse JSON
• Provide a clearer error message when API endpoints aren't available
• Handle HTML responses gracefully without crashing

Changes needed:

// After const response = await fetch(endpoint, ...)
// Check if response is JSON before parsing
const contentType = response.headers.get('content-type');
if (!contentType || !contentType.includes('application/json')) {
  console.warn('API endpoint returned non-JSON response. The verification API may not be deployed correctly.');
  // For backwards compatibility, allow the action
  verified = true;
} else {
  const data = await response.json();
  // ... rest of existing logic
}

2. Verify vercel.json Configuration

Ensure the vercel.json file properly routes API requests:

{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/$1" }
  ]
}

3. Check API Functions Structure

Verify that all three API files exist and export default handlers:

• api/verify-follow.ts
• api/verify-like.ts
• api/verify-retweet.ts

Each should have export default async function handler(req: VercelRequest, res: VercelResponse)

4. Add Better User Feedback

Update error messages to be more informative:

• If API is not configured: "Verification system is not set up. Action completed successfully without verification."
• If API returns unexpected response: "Verification service temporarily unavailable. Action completed successfully."

Expected Behavior After Fix

1. If API endpoints work: Normal verification flow
2. If API endpoints don't exist: Gracefully fall back to allowing actions without verification (backwards compatible)
3. If API returns HTML: Clear error message instead of JSON parsing error
4. Users can still complete tasks and earn points even if verification API is unavailable

Testing

After implementing:

1. Test with API endpoints deployed (should verify normally)
2. Test with API endpoints not deployed (should allow actions with warning)
3. Check browser console for helpful debug messages
4. Verify users can complete tasks regardless of API status

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.