Řešení Prisma Error 500 na Vercel Deployment pro ReactJS projekty

Odstraňování problémů s databází Prisma při nasazení Vercel

Nasazení projektu z místního vývojového prostředí na platformu, jako je Vercel, může být vzrušujícím krokem, který signalizuje, že vaše aplikace je téměř připravena na svět. 🌍 Není však neobvyklé, že se po cestě setkáte s nečekanými problémy. Například sestavení, které perfektně funguje na vašem místním počítači, může při nasazení na server náhle narazit na chyby.

Tato výzva je zvláště známá při práci s nástroji, jako je Prisma pro správu databáze. I když Prisma usnadňuje místní interakci s vaší databází, nasazuje ji na platformu, jako je Vercel může někdy vyvolat záhadné problémy, jako je například obávaná „Chyba 500“ při pokusu o přístup k databázi.

V mém případě jsem po nastavení Prismy s CockroachDB jako zdrojem dat narazil během nasazení na zeď: při pokusu o interakci s databází se objevila trvalá chybová zpráva „Požadavek se nezdařil se stavovým kódem 500“. Ačkoli stejný kód fungoval lokálně, proces nasazení na Vercelu odhalil skrytý problém.

V tomto článku se ponoříme do toho, jak jsem tento problém diagnostikoval a vyřešil, pomocí příkladů ze skutečného světa, které ilustrují kroky pro odstraňování problémů. Ať už se setkáváte s podobnou chybou nebo jste jen zvědaví na běžná úskalí nasazení Prismy, čtěte dále a dozvíte se více! ⚙️

Pochopení integrace Prisma a Next.js pro bezchybné nasazení Vercel

První skript se soustředí na zpracování požadavků API v Next.js pomocí Prisma. V tomto kódu definujeme koncový bod POST pro zachycení e-mailového vstupu a vytvoření nového záznamu v databázi. Zde funkce Next.js `POST` využívá metodu `await req.json()` k analýze datové části JSON, což nám umožňuje extrahovat pole e-mailu poskytnuté uživatelem. Zabalením databázového volání do bloku `try`-`catch` toto nastavení efektivně zachytí potenciální chyby databáze, které jsou nezbytné pro monitorování hladkého nasazení. Bez tohoto zpracování chyb by problémy, jako jsou duplicitní záznamy, mohly zůstat nekontrolované, což by vedlo k nejasným chybám serveru. Takové pečlivé zacházení se známými chybami, jako jsou jedinečná omezení, pomáhá při zobrazování uživatelsky přívětivých zpráv – což je nezbytné v aplikacích, které pravidelně zpracovávají uživatelská data, jako jsou registrační formuláře nebo seznamy kontaktů. 📝

Kontrola `PrismaClientKnownRequestError` v bloku catch nám umožňuje odhalit běžné chyby, jako je pokus o přidání již existujícího e-mailu. Tato manipulace zlepšuje spolehlivost aplikace na Vercelu tím, že vrací specifický stavový kód 520, když dojde k takové známé chybě, což usnadňuje určení a manipulaci na frontendu. Metoda `NextResponse.json()` odesílá odpovědi ve formátu JSON, což nám umožňuje přizpůsobit stavy HTTP na základě typu chyby. To umožňuje frontendovým aplikacím konzistentně zpracovávat chyby serveru a zobrazovat relevantní zprávy uživatelům bez odhalení citlivých podrobností o chybách.

Ve druhém skriptu kód definuje, jak se Prisma připojuje k databázi, ať už ve vývoji nebo výrobě. Zde používáme `globalThis`, abychom se vyhnuli vytváření více instancí `PrismaClient` ve vývoji, které by jinak mohly způsobit problémy s pamětí při častém připojení k databázi. Podmíněným nastavením `globalThis.prisma = db` aplikace udržuje jednu instanci Prisma na relaci ve vývoji. Pro výroba prostředí, kde by úniky paměti z více připojení byly ještě problematičtější, zajišťuje toto nastavení stabilní a vysoce výkonné připojení k databázi. Taková modulární správa připojení je nezbytná při nasazení na platformy jako Vercel, které optimalizují svá prostředí pro škálovatelnost. 🌐

Soubor schématu definuje, jak je databáze strukturována. Zadáním CockroachDB jako poskytovatele může Prisma generovat optimalizované dotazy pro tento konkrétní databázový stroj. Model pro tabulku `Kontakt` používá `email` jako jedinečný identifikátor s atributy `@id` a `@unique`, což umožňuje rychlé vyhledávání a zajišťuje, že každý záznam kontaktu má odlišný e-mail. Tato struktura je efektivní pro aplikace, které potřebují jedinečné uživatelské záznamy, jako jsou systémy pro autentizaci uživatelů. Navíc `@default(now())` automaticky přiřadí časové razítko vytvoření, které může být užitečné pro účely auditu nebo řazení záznamů podle data vytvoření. Konfigurace schématu Prisma je optimalizována pro místní i nasazená prostředí, takže je vysoce přizpůsobivá změnám.

A konečně, jednotkové testy ověřují každou funkci a kontrolují, že interakce s databází fungují podle očekávání a zda je efektivní zpracování chyb. Například pomocí Jestových funkcí `describe` a `expect` můžeme potvrdit, že konkrétní databázové odpovědi, jako jsou jedinečné chyby omezení, vracejí správný stavový kód. V aplikacích v reálném světě pomáhají testy včas zachytit problémy, zejména při manipulaci se vstupy, které by jinak mohly narušit produkční nasazení. Tyto testy jednotek pokrývají případy, jako je vytváření nových záznamů, správa duplicitních dat a vracení příslušných stavů HTTP. Tímto způsobem, i když jsou přidány nové funkce nebo se změní backend, testy pomáhají zajistit, aby API zůstalo spolehlivé a bez chyb.

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);
    });
});

Optimalizace nasazení Prisma a Vercel pro spolehlivou výrobu

Nasazování aplikací s Prisma a Vercel přináší výkonnou a flexibilní kombinaci pro práci s databázemi v produkčním prostředí. Rozdíly mezi místním vývojem a prostředím serverů však mohou vést k problémům, jako je chyba stavu 500 při přístupu k databázi. Tato chyba často pramení z konfigurací připojení k databázi, které se neshodují mezi prostředími nebo chybějícími proměnnými prostředí v nastavení Vercelu. Abychom takovým problémům předešli, je důležité pochopit, jak Prisma zpracovává připojení v produkci, zejména při používání cloudové databáze, jako je CockroachDB. Na rozdíl od místního vývoje mohou mít produkční databáze další omezení zabezpečení nebo připojení, která mohou ovlivnit chování připojení Prisma.

Dalším zásadním aspektem je efektivní správa instance klienta Prisma. Ve vývoji je běžné znovu inicializovat Prisma pokaždé, když se soubor změní, ale to může způsobit úniky paměti v produkčním prostředí. S platformami jako Vercel, které často restartují instance, pomáhá použití `globalThis` v konfiguračním souboru omezit inicializaci klienta Prisma na jedinou instanci. Nastavení DATABASE_URL bezpečně prostřednictvím proměnných prostředí Vercel a jejich použití v rámci `schema.prisma` zajišťuje, že vaše přihlašovací údaje k databázi jsou přístupné při zachování zabezpečení. To je zvláště důležité pro projekty s uživatelskými daty, kde je zabezpečení zásadní. 🔒

Optimalizace nastavení nasazení a správa chyb pro známé problémy, jako jsou duplicitní záznamy, pomáhá zajistit hladký chod vaší aplikace. Například v produkčním prostředí můžete chtít zachytit chyby Prisma pomocí `PrismaClientKnownRequestError`, abyste do frontendu vrátili jasné a uživatelsky přívětivé zprávy. Jemným vyladěním konfigurace Prisma a správným zpracováním nastavení specifických pro dané prostředí můžete předejít 500 chybám a zajistit spolehlivější připojení k databázi. Testování různých částí aplikace, zejména databázových interakcí, zvyšuje jistotu stability nasazení. 🛠️