Menyelesaikan Prisma Error 500 pada Deployment Vercel untuk Proyek ReactJS

Memecahkan Masalah Basis Data Prisma pada Penerapan Vercel

Menerapkan proyek dari lingkungan pengembangan lokal ke platform seperti Vercel bisa menjadi langkah menarik, yang menandakan bahwa aplikasi Anda hampir siap untuk digunakan di dunia. 🌍 Namun, tidak jarang kita menghadapi masalah yang tidak terduga dalam prosesnya. Misalnya, build yang berfungsi sempurna di mesin lokal Anda mungkin tiba-tiba mengalami error saat diterapkan ke server.

Tantangan ini sangat umum terjadi ketika bekerja dengan alat seperti itu prisma untuk manajemen basis data. Meskipun Prisma memudahkan interaksi dengan database Anda secara lokal, menerapkannya ke platform seperti Vercel terkadang dapat memicu masalah misterius, seperti "Error 500" yang ditakuti saat mencoba mengakses database.

Dalam kasus saya, setelah mengatur Prisma dengan CockroachDB sebagai sumber data saya, saya mengalami hambatan selama penerapan: pesan kesalahan terus-menerus, "Permintaan gagal dengan kode status 500," muncul ketika mencoba berinteraksi dengan database. Meskipun kode yang sama berfungsi secara lokal, proses penerapan di Vercel mengungkapkan masalah tersembunyi.

Dalam artikel ini, kita akan mendalami cara saya mendiagnosis dan mengatasi masalah ini, menggunakan contoh nyata untuk mengilustrasikan langkah pemecahan masalah. Baik Anda mengalami kesalahan serupa atau hanya ingin tahu tentang kendala umum penerapan Prisma, baca terus untuk mempelajari lebih lanjut! ⚙️

Memahami Integrasi Prisma dan Next.js untuk Penerapan Vercel Bebas Kesalahan

Skrip pertama berpusat pada penanganan permintaan API Berikutnya.js menggunakan Prisma. Dalam kode ini, kita mendefinisikan titik akhir POST untuk menangkap masukan email dan membuat catatan baru di database. Di sini, fungsi Next.js `POST` menggunakan metode `await req.json()` untuk mengurai payload JSON, memungkinkan kita mengekstrak kolom email yang disediakan oleh pengguna. Dengan menggabungkan panggilan database dalam blok `try`-`catch`, pengaturan ini secara efektif menangkap potensi kesalahan database, yang penting untuk memantau kelancaran penerapan. Tanpa penanganan kesalahan ini, masalah seperti entri duplikat dapat diabaikan, sehingga menyebabkan kesalahan server yang tidak jelas. Penanganan kesalahan umum yang hati-hati, seperti batasan unik, membantu menampilkan pesan yang mudah digunakan—penting dalam aplikasi yang menangani data pengguna secara rutin, seperti formulir pendaftaran atau daftar kontak. 📝

Pemeriksaan `PrismaClientKnownRequestError` dalam blok catch memungkinkan kami mendeteksi kesalahan umum seperti upaya menambahkan email yang sudah ada. Penanganan ini meningkatkan keandalan aplikasi di Vercel dengan mengembalikan kode status 520 tertentu ketika kesalahan umum terjadi, sehingga lebih mudah untuk menentukan dan menangani di frontend. Metode `NextResponse.json()` mengirimkan respons dalam format JSON, memungkinkan kita menyesuaikan status HTTP berdasarkan jenis kesalahan. Hal ini memungkinkan aplikasi frontend menangani kesalahan server secara konsisten, menampilkan pesan yang relevan kepada pengguna tanpa memperlihatkan detail kesalahan sensitif.

Dalam skrip kedua, kode tersebut mendefinisikan bagaimana Prisma terhubung ke database, baik dalam pengembangan atau produksi. Di sini, kami menggunakan `globalThis` untuk menghindari pembuatan beberapa instance `PrismaClient` dalam pengembangan, yang dapat menyebabkan masalah memori dengan seringnya koneksi database. Dengan menyetel `globalThis.prisma = db` secara kondisional, aplikasi mempertahankan satu instance Prisma per sesi dalam pengembangan. Untuk produksi lingkungan, di mana kebocoran memori dari beberapa koneksi akan menjadi lebih bermasalah, pengaturan ini memastikan koneksi yang stabil dan berperforma tinggi ke database. Manajemen koneksi modular seperti itu sangat penting ketika diterapkan pada platform seperti Vercel, yang mengoptimalkan lingkungannya untuk skalabilitas. 🌐

File skema mendefinisikan bagaimana database disusun. Dengan menetapkan CockroachDB sebagai penyedia, Prisma dapat menghasilkan kueri yang dioptimalkan untuk mesin basis data spesifik ini. Model untuk tabel `Kontak` menggunakan `email` sebagai pengidentifikasi unik dengan atribut `@id` dan `@unique`, memungkinkan pencarian cepat dan memastikan setiap catatan kontak memiliki email yang berbeda. Struktur ini efisien untuk aplikasi yang memerlukan catatan pengguna unik, seperti sistem otentikasi pengguna. Selain itu, `@default(now())` secara otomatis menetapkan stempel waktu pembuatan, yang dapat berguna untuk tujuan audit atau mengurutkan rekaman berdasarkan tanggal pembuatan. Konfigurasi skema Prisma dioptimalkan untuk lingkungan lokal dan penerapan, sehingga sangat mudah beradaptasi terhadap perubahan.

Terakhir, pengujian unit memvalidasi setiap fungsi, memeriksa apakah interaksi database berfungsi seperti yang diharapkan dan penanganan kesalahan efektif. Misalnya, dengan menggunakan fungsi `describe` dan `expect` Jest, kita dapat mengonfirmasi bahwa respons database tertentu, seperti kesalahan batasan unik, mengembalikan kode status yang benar. Dalam aplikasi dunia nyata, pengujian membantu mendeteksi masalah sejak dini, terutama saat menangani masukan yang dapat mengganggu penerapan produksi. Pengujian unit ini mencakup kasus-kasus seperti membuat catatan baru, mengelola data duplikat, dan mengembalikan status HTTP yang sesuai. Dengan cara ini, meskipun fitur baru ditambahkan atau backend diubah, pengujian membantu memastikan API tetap andal dan bebas bug.

import { db } from "@/lib/db";
import { Prisma } from "@prisma/client";
import { NextResponse } from "next/server";
export async function POST(req: Request) {
    try {
        const { email } = await req.json();
        const contact = await db.contact.create({
            data: { email }
        });
        return NextResponse.json(contact);
    } catch (error) {
        if (error instanceof Prisma.PrismaClientKnownRequestError) {
            console.log("[CONTACT]", "Email already exists");
            return NextResponse.json({ message: "Email already exists" }, { status: 520 });
        } else {
            console.log("[CONTACT]", error);
            return NextResponse.json({ message: "Server error" }, { status: 500 });
        }
    }
}

import { PrismaClient } from "@prisma/client";
declare global {
    var prisma: PrismaClient | undefined;
};
export const db = globalThis.prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") globalThis.prisma = db;

generator client {
    provider = "prisma-client-js"
}
datasource db {
    provider      = "cockroachdb"
    url           = env("DATABASE_URL")
    relationMode  = "prisma"
}
model Contact {
    email         String  @id @unique
    creation      DateTime @default(now())
}

import { db } from "@/lib/db";
import { POST } from "@/pages/api/contact";
import { NextResponse } from "next/server";
describe("POST /api/contact", () => {
    it("should create a new contact and return the data", async () => {
        const request = new Request("http://localhost/api/contact", {
            method: "POST",
            body: JSON.stringify({ email: "test@example.com" }),
        });
        const response = await POST(request);
        const data = await response.json();
        expect(data.email).toBe("test@example.com");
    });
    it("should handle known Prisma errors (e.g., duplicate email)", async () => {
        const request = new Request("http://localhost/api/contact", {
            method: "POST",
            body: JSON.stringify({ email: "duplicate@example.com" }),
        });
        const response = await POST(request);
        expect(response.status).toBe(520);
    });
});

Mengoptimalkan Penerapan Prisma dan Vercel untuk Produksi yang Andal

Menyebarkan aplikasi dengan prisma dan Vercel menghadirkan kombinasi yang kuat dan fleksibel untuk menangani database di lingkungan produksi. Namun, perbedaan antara pengembangan lokal dan lingkungan server dapat menyebabkan masalah seperti kesalahan status 500 saat mengakses database. Kesalahan ini sering kali berasal dari konfigurasi koneksi database yang tidak selaras antar lingkungan atau variabel lingkungan yang hilang dalam pengaturan Vercel. Untuk mencegah masalah tersebut, penting untuk memahami cara Prisma menangani koneksi dalam produksi, terutama saat menggunakan database cloud seperti CockroachDB. Tidak seperti pengembangan lokal, database produksi mungkin memiliki batasan keamanan atau koneksi tambahan yang dapat memengaruhi perilaku koneksi Prisma.

Aspek penting lainnya adalah mengelola instance klien Prisma secara efisien. Dalam pengembangan, Prisma biasanya diinisialisasi ulang setiap kali file diubah, namun hal ini dapat menyebabkan kebocoran memori di lingkungan produksi. Dengan platform seperti Vercel yang sering memulai ulang instance, penggunaan `globalThis` dalam file konfigurasi Anda membantu membatasi inisialisasi klien Prisma menjadi satu instance. Pengaturan DATABASE_URL dengan aman melalui variabel lingkungan Vercel dan menggunakannya dalam `schema.prisma` memastikan kredensial database Anda dapat diakses dengan tetap menjaga keamanan. Hal ini sangat relevan untuk proyek dengan data pengguna, yang mengutamakan keamanan. 🔒

Mengoptimalkan pengaturan penerapan dan mengelola penanganan kesalahan untuk masalah umum, seperti rekaman duplikat, membantu memastikan aplikasi Anda berjalan dengan lancar. Misalnya, dalam produksi, Anda mungkin ingin menangkap kesalahan Prisma menggunakan `PrismaClientKnownRequestError` untuk mengembalikan pesan yang jelas dan mudah digunakan ke frontend. Dengan menyempurnakan konfigurasi Prisma dan menangani pengaturan spesifik lingkungan dengan benar, Anda dapat mencegah kesalahan 500 dan memastikan koneksi database yang lebih andal. Menguji berbagai bagian aplikasi, terutama interaksi database, menambah keyakinan terhadap stabilitas penerapan. 🛠️