Depurar peticiones fallidas

Cuando las peticiones fallan, la depuración sistemática ayuda a identificar el problema rápidamente.

Habilitar registro detallado

async function debugRequest(url, options) {
  console.log('=== Petición API ===");
  console.log('URL:', url);
  console.log('Método:', options.method);
  console.log('Headers:', {
    ...options.headers,
    'x-api-key': options.headers['x-api-key']?.substring(0, 10) + '...'
  });
  console.log('Body:', options.body);
  
  const startTime = Date.now();
  
  try {
    const response = await fetch(url, options);
    const duration = Date.now() - startTime;
    
    console.log('=== Respuesta API ===");
    console.log('Estado:', response.status, response.statusText);
    console.log('Duración:', duration + 'ms');
    console.log('Headers:', Object.fromEntries(response.headers));
    
    const data = await response.json();
    console.log('Body:', data);
    
    return { response, data };
    
  } catch (error) {
    console.error('=== Petición Fallida ===");
    console.error('Error:', error.message);
    console.error('Duración:', Date.now() - startTime + 'ms');
    throw error;
  }
}

Verifica esto primero

1. La clave API es correcta:

console.log('Clave API comienza con:', apiKey.substring(0, 10));
console.log('Longitud clave API:', apiKey.length);

2. Nombre de header es exacto:

// Debe ser minúsculas 'x-api-key'
headers: {
  'x-api-key': apiKey,  // ✓ Correcto
  'X-API-Key': apiKey,  // ✗ Incorrecto
  'api-key': apiKey,    // ✗ Incorrecto
}

3. JSON es válido:

try {
  const body = JSON.stringify({ query: 'test' });
  console.log('JSON válido:', body);
} catch (e) {
  console.error('JSON inválido:', e);
}

4. La petición llega al servidor:

// Usa pestaña Network de DevTools del navegador o
curl -v -X POST https://api.cathopic.com/resources \
  -H "x-api-key: TU_CLAVE" \
  -H "Content-Type: application/json" \
  -d '{"query": "test"}'

Errores comunes

Content-Type incorrecto:

// ✗ Incorrecto
headers: {
  'Content-Type': 'text/plain'
}
// ✓ Correcto
headers: {
  'Content-Type': 'application/json'
}

No convertir body a string:

// ✗ Incorrecto
body: { query: 'test' }
// ✓ Correcto
body: JSON.stringify({ query: 'test' })

Usar GET en lugar de POST:

// ✗ Todos los endpoints requieren POST
method: 'GET'
// ✓ Correcto
method: 'POST'

Probar con petición mínima

Reduce al mínimo para aislar el problema:

const response = await fetch('https://api.cathopic.com/resources', {
  method: 'POST',
  headers: {
    'x-api-key': 'TU_CLAVE_REAL_AQUI',
    'Content-Type': 'application/json'
  },
  body: '{}'  // Objeto vacío
});
console.log(response.status);
console.log(await response.json());

Si esto funciona, añade gradualmente parámetros hasta que falle.

Comparar con ejemplo que funciona

Prueba con curl para verificar tu implementación:

curl -X POST https://api.cathopic.com/resources \
  -H "x-api-key: TU_CLAVE" \
  -H "Content-Type: application/json" \
  -d '{"query": "Jesús", "page": 1, "page_size": 5}'

Si curl funciona pero tu código no, compara los headers y body exactos.

¿Aún atascado?

Contacta con soporte para desarrolladores con:

• Mensaje de error completo

• Headers de petición (oculta tu clave API completa)

• Body de petición

• Estado y body de respuesta

• Lenguaje de programación y biblioteca HTTP

• Fragmento de código (sin exponer credenciales)