Mengatasi Error 500: Function Invocation Failed di Vercel – Pengalaman XII TKJ 2

Masalah: Website Crash Setelah Deploy

Masalah ini muncul saat kami mencoba melakukan deployment website Kelas XII TKJ 2 ke Vercel. Meskipun di lokal (npm run dev) lancar jaya, saat dibuka di URL Vercel justru muncul pesan error yang bikin panik:

500: INTERNAL_SERVER_ERROR Code: FUNCTION_INVOCATION_FAILED

Error ini sangat menjengkelkan karena tidak memberitahukan secara spesifik bagian mana yang salah di kodingan kita.

Analisis Penyebab

Setelah melakukan investigasi mendalam (dan sedikit pusing), kami menemukan 3 penyebab utama:

1. Versi Node.js Terlalu Baru (22.x vs 20.x): Vercel secara otomatis menggunakan Node.js 22 jika kita tidak membatasi versinya. Sayangnya, runtime Node.js 22 masih sering mengalami crash pada Serverless Functions di beberapa region Vercel.
2. Environment Variables undefined: Penggunaan import.meta.env di Astro terkadang tidak terbaca dengan baik di environment Serverless Vercel jika tidak ada fallback ke process.env.
3. Hantu Folder .vercel: Folder .vercel/output telanjur masuk ke Git, sehingga Vercel menggunakan hasil build lokal daripada melakukan build ulang di server mereka.

Solusi Jitu yang Kami Lakukan

Berikut adalah langkah-langkah yang terbukti berhasil mengatasi masalah tersebut:

1. Menurunkan (Downgrade) Versi Node.js ke 20.x

Kami mengubah package.json untuk memaksa Vercel menggunakan Node.js 20 (LTS) yang jauh lebih stabil.

"engines": {
  "node": "20.x"
}

Kami juga membuat file .node-version di root folder dengan isi:

20

2. Memperbaiki Konfigurasi Supabase Client

Kami menambahkan fallback ke process.env agar variabel API tetap terbaca di serverless function.

// src/lib/supabase.ts
const supabaseUrl = process.env.PUBLIC_SUPABASE_URL || import.meta.env.PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.PUBLIC_SUPABASE_ANON_KEY || import.meta.env.PUBLIC_SUPABASE_ANON_KEY;

3. “Membersihkan” Repository dari Artifact Build

Ini langkah paling krusial. Kami menghapus folder .vercel dari cache Git agar Vercel melakukan build murni di server mereka.

git rm -rf --cached .vercel/
rm -rf .vercel/
git add -A
git commit -m "chore: force pure build on vercel"
git push

Hasil Akhir

Setelah langkah-langkah di atas dilakukan, build di Vercel berjalan sedikit lebih lama (sebab melakukan build murni, bukan pakai cache lokal), tapi hasilnya 100% SUCCESS dan link website kembali normal!

Penutup

Pelajaran berharga buat kami anak TKJ: Terlalu update (pakai versi bleeding-edge) nggak selamanya bagus untuk production. Selalu gunakan versi LTS (Long Term Support) untuk kestabilan sistem kamu.

Ditulis berdasarkan pengalaman nyata perbaikan deployment XII TKJ 2 - SMKN 2 JEMBER