Troubleshooting - Problèmes courants

Résolution des problèmes de déploiement et production.

Erreurs de build

Build échoue avec erreur TypeScript

error TS2305: Module 'X' has no exported member 'Y'

Solutions :

1. Vérifiez les imports

// ❌ Mauvais
import { User } from '@/types'
 
// ✅ Bon
import type { User } from '@/types'

2. Réinstallez les dépendances

rm -rf node_modules pnpm-lock.yaml
pnpm install

3. Vérifiez tsconfig.json

Build échoue : “Cannot find module”

error: Cannot find module '@/components/Button'

Solutions :

1. Vérifiez l’existence du fichier
2. Vérifiez le chemin (sensibilité à la casse)
3. Vérifiez tsconfig.json compilerOptions.paths

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]  // Correct?
    }
  }
}

Build échoue : “Out of memory”

JavaScript heap out of memory

Solutions :

# Augmenter la mémoire
NODE_OPTIONS="--max-old-space-size=4096" pnpm build
 
# Ou nettoyez
rm -rf .next
pnpm build

Erreurs à l’runtime

”Cannot access database”

Error: connect ECONNREFUSED 127.0.0.1:5432

Solutions :

1. Vérifiez DATABASE_URL

# Tester la connexion
psql postgresql://user:pass@host:5432/db

2. Whitelist l’IP Vercel

   • DB Provider (Render, Railway) → Security
   • Ajouter l’IP Vercel
   • Ou accepter tous les IPs (moins secure)

3. Vérifiez les credentials

DATABASE_URL="postgresql://user:PASSWORD@host:5432/db"
#                              ^^^^^^^^
#                          Correct?

4. Vérifiez le SSL

DATABASE_URL="postgresql://...?sslmode=require"

”Stripe API error: Invalid API Key”

Error: Your API key is invalid

Solutions :

1. Vérifiez que la clé est en MODE LIVE

STRIPE_SECRET_KEY="sk_live_..."  # Pas sk_test_!

2. Copiez correctement (pas d’espaces)
3. Redéployez (les variables mettent du temps à s’appliquer)

“Cannot access session”

Error: Session is not available

Solutions :

1. Vérifiez BETTER_AUTH_URL

BETTER_AUTH_URL="https://monsite.com"  # Correct?
# Pas http://localhost:3000!

2. Vérifiez BETTER_AUTH_SECRET

BETTER_AUTH_SECRET="..."  # Longue clé secrète?

3. Les cookies sont-ils activés?

”OAuth callback error”

The redirect_uri does not match

Solutions :

1. Vérifiez la callback URL

GitHub OAuth : https://monsite.com/api/auth/callback/github
Google OAuth : https://monsite.com/api/auth/callback/google

2. Doit correspondre exactement au setting OAuth
3. Mettez à jour si vous changez de domaine

Problèmes de performance

Site lent

Mesurez avec :

curl -w "@curl-format.txt" -o /dev/null -s https://monsite.com

Ou utilisez PageSpeed Insights

Response time > 5s

1. Vérifiez les logs :

vercel logs --follow

2. Identifiez les requêtes lentes

/api/slow-endpoint → 4000ms

3. Optimisez la requête
   • Ajouter des indexes
   • Vérifier la query N+1
   • Cacher le résultat

Time out (>60s)

Vercel coupe à 60s en gratuit, 600s en pro

Solutions :

1. Asynchrone/queue

// ❌ Mauvais
for (let i = 0; i < 1000; i++) {
  await processItem(i)  // 1000 * 100ms = 100s!
}
 
// ✅ Bon
await Promise.all(
  items.map(item => processItem(item))  // Parallèle
)

2. Job queue (Bull, BullMQ)

3. Passer en Pro pour plus de temps

Erreurs utilisateur

404 sur images

image: https://monsite.com/images/test.jpg → 404

Solutions :

1. Image existe-t-elle?
2. Chemins corrects?
3. Vérifiez next.config.mjs

export default {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.vercel.app',
      },
    ],
  },
}

CSS n’est pas chargé

Solutions :

1. Vérifiez les imports CSS

// ✅
import './styles.css'
 
// Ou Tailwind
import 'tailwindcss/tailwind.css'

2. Vérifiez les chemins
3. Cache du navigateur :
   • Ctrl + Shift + Delete
   • Cleared cache

JavaScript ne charge pas

Solutions :

1. Vérifiez les erreurs navigateur (F12)
2. Vérifiez la CDN/CSP
3. Vercel → Logs

Erreurs de sécurité

”Refused to connect” (CSP)

Refused to load the script 'https://...' because it violates the Content Security Policy directive

Solutions :

1. Vérifiez next.config.mjs pour CSP headers
2. Whitelist les domaines autorisés

export default {
  headers: async () => [
    {
      source: '/(.*)',
      headers: [
        {
          key: 'Content-Security-Policy',
          value: "script-src 'self' https://trusted.com",
        },
      ],
    },
  ],
}

”Mixed content” (HTTPS + HTTP)

Mixed Content: The page was loaded over HTTPS, but requested an insecure resource

Solutions :

1. Tous les liens doivent être HTTPS
2. Pas de http:// en production

Erreurs de base de données

”Too many connections”

Error: remaining connection slots are reserved for non-replication superuser connections

Solutions :

1. Vérifiez les connexions ouvertes
2. Utilisez connection pooling

# PgBouncer ou Prisma connection pooling
DATABASE_URL="postgresql://...?pgbouncer=true"

3. Réduire maxConnections en Prisma

datasource db {
  provider = "postgresql"
  url = env("DATABASE_URL")
 
  // Réduire les connexions
  extensions = [pgvector(map: "vector"), uuid_ossp(map: "uuid_ossp")]
}
 
// Dans generate
  client {
    maxConnections = 5
  }

”Syntax error” en Prisma

error: unknown field `unknownField` for model User

Solutions :

1. Vérifiez le schéma Prisma
2. Vérifiez que les migrations sont appliquées

DATABASE_URL="..." pnpm prisma migrate deploy

Rollback

Si quelque chose va mal

# Vercel - voir deployments
vercel list  # Liste des déploiements
 
# Rollback au précédent
vercel rollback
 
# Ou manuellement
git log --oneline | head -5
git revert <commit-hash>
git push

Contacter le support

Vercel Support

• Forum : https://github.com/vercel/vercel/discussions 
• Email : support@vercel.com

Stripe Support

• Dashboard : https://support.stripe.com 
• Chat : Dans le dashboard

Wagoo Support

• Dashboard → Create Ticket
• Voir Créer un ticket

Checklist de debug

• ✅ Vérifiez les logs
• ✅ Testez localement
• ✅ Vérifiez les variables d’env
• ✅ Vérifiez les permissions BD
• ✅ Videz le cache navigateur
• ✅ Attendez la propagation DNS (max 24h)
• ✅ Redéployez si nécessaire

Prochaines étapes

→ Créez un ticket si le problème persiste