Riešenie Prisma Error 500 na Vercel Deployment pre projekty ReactJS

Riešenie problémov s databázou Prisma pri nasadení Vercel

Nasadenie projektu z miestneho vývojového prostredia na platformu ako Vercel môže byť vzrušujúcim krokom, ktorý signalizuje, že vaša aplikácia je takmer pripravená na svet. 🌍 Nie je však nezvyčajné stretnúť sa s nečakanými problémami. Napríklad zostava, ktorá perfektne funguje na vašom lokálnom počítači, môže náhle naraziť na chyby pri nasadení na server.

Táto výzva je obzvlášť známa pri práci s nástrojmi ako napr Prisma pre správu databázy. Aj keď Prisma uľahčuje lokálnu interakciu s vašou databázou, jej nasadenie na platformu, ako je napr Vercel môže niekedy vyvolať záhadné problémy, ako napríklad obávanú „Chybu 500“ pri pokuse o prístup k databáze.

V mojom prípade po nastavení Prismy s CockroachDB ako zdrojom údajov som počas nasadenia narazil na stenu: pri pokuse o interakciu s databázou sa objavilo pretrvávajúce chybové hlásenie „Požiadavka zlyhala so stavovým kódom 500“. Hoci rovnaký kód fungoval lokálne, proces nasadenia na Vercel odhalil skrytý problém.

V tomto článku sa ponoríme do toho, ako som diagnostikoval a riešil tento problém, pomocou príkladov zo skutočného sveta na ilustráciu krokov na riešenie problémov. Či už sa stretávate s podobnou chybou alebo ste len zvedaví na bežné úskalia nasadenia Prisma, čítajte ďalej a dozviete sa viac! ⚙️

Pochopenie integrácie Prisma a Next.js pre bezchybové nasadenia Vercelu

Prvý skript sa sústreďuje na spracovanie požiadaviek API Next.js pomocou Prisma. V tomto kóde definujeme koncový bod POST na zachytenie e-mailového vstupu a vytvorenie nového záznamu v databáze. Tu funkcia Next.js `POST` využíva metódu `wait req.json()` na analýzu užitočného obsahu JSON, čo nám umožňuje extrahovať pole e-mailu poskytnuté používateľom. Zabalením volania databázy do bloku `try`-`catch` toto nastavenie efektívne zachytáva potenciálne chyby databázy, ktoré sú nevyhnutné na monitorovanie hladkého nasadenia. Bez tohto spracovania chýb by problémy, ako sú duplicitné záznamy, mohli zostať nekontrolované, čo by viedlo k nejasným chybám servera. Takéto starostlivé zaobchádzanie so známymi chybami, ako sú jedinečné obmedzenia, pomáha pri zobrazovaní užívateľsky prívetivých správ – čo je nevyhnutné v aplikáciách, ktoré pravidelne spracúvajú používateľské údaje, ako sú registračné formuláre alebo zoznamy kontaktov. 📝

Kontrola `PrismaClientKnownRequestError` v rámci bloku catch nám umožňuje odhaliť bežné chyby, ako napríklad pokus o pridanie už existujúceho e-mailu. Toto spracovanie zlepšuje spoľahlivosť aplikácie na Vercel tým, že vracia špecifický stavový kód 520, keď sa vyskytne takáto známa chyba, čo uľahčuje určenie a spracovanie na frontende. Metóda `NextResponse.json()` odosiela odpovede vo formáte JSON, čo nám umožňuje prispôsobiť stavy HTTP na základe typu chyby. To umožňuje frontendovým aplikáciám konzistentne spracovávať chyby servera a zobrazovať relevantné správy používateľom bez odhalenia citlivých podrobností o chybách.

V druhom skripte kód definuje, ako sa Prisma pripája k databáze, či už vo vývoji alebo vo výrobe. Tu používame `globalThis`, aby sme sa vyhli vytváraniu viacerých inštancií `PrismaClient` vo vývoji, ktoré by inak mohli spôsobiť problémy s pamäťou pri častých pripojeniach k databáze. Podmienečným nastavením `globalThis.prisma = db` aplikácia udržiava jednu inštanciu Prisma na reláciu vo vývoji. Pre výroby prostrediach, kde by úniky pamäte z viacerých pripojení boli ešte problematickejšie, toto nastavenie zaisťuje stabilné a vysoko výkonné pripojenie k databáze. Takáto modulárna správa pripojení je nevyhnutná pri nasadzovaní na platformy ako Vercel, ktoré optimalizujú svoje prostredia pre škálovateľnosť. 🌐

Súbor schémy definuje, ako je databáza štruktúrovaná. Zadaním CockroachDB ako poskytovateľa môže Prisma generovať optimalizované dotazy pre tento špecifický databázový stroj. Model pre tabuľku `Kontakt` používa `e-mail` ako jedinečný identifikátor s atribútmi `@id` a `@unique`, čo umožňuje rýchle vyhľadávanie a zabezpečuje, že každý záznam kontaktu má odlišný e-mail. Táto štruktúra je efektívna pre aplikácie, ktoré potrebujú jedinečné užívateľské záznamy, ako napríklad systémy autentifikácie užívateľov. Okrem toho `@default(now())` automaticky priradí časovú pečiatku vytvorenia, ktorá môže byť užitočná na účely auditu alebo na zoradenie záznamov podľa dátumu vytvorenia. Konfigurácia schémy Prisma je optimalizovaná pre lokálne aj nasadené prostredia, vďaka čomu je vysoko prispôsobivá zmenám.

Nakoniec, jednotkové testy overia každú funkciu a skontrolujú, či interakcie s databázou fungujú podľa očakávania a či je spracovanie chýb efektívne. Napríklad pomocou Jestových funkcií `describe` a `expect` môžeme potvrdiť, že špecifické odpovede databázy, ako sú jedinečné chyby obmedzenia, vracajú správny stavový kód. V aplikáciách v reálnom svete pomáhajú testy včas zachytiť problémy, najmä pri manipulácii so vstupmi, ktoré by inak mohli narušiť produkčné nasadenie. Tieto testy jednotiek pokrývajú prípady, ako je vytváranie nových záznamov, správa duplicitných údajov a vrátenie príslušných stavov HTTP. Týmto spôsobom, aj keď sa pridajú nové funkcie alebo sa zmení backend, testy pomáhajú zabezpečiť, aby API zostalo spoľahlivé a bez chýb.

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

Optimalizácia nasadení Prisma a Vercel pre spoľahlivú výrobu

Nasadenie aplikácií s Prisma a Vercel prinášajú výkonnú a flexibilnú kombináciu pre prácu s databázami v produkčnom prostredí. Rozdiely medzi lokálnym vývojom a prostredím serverov však môžu viesť k problémom, ako je chyba status 500 pri prístupe k databáze. Táto chyba často pochádza z konfigurácií pripojenia k databáze, ktoré sa nezhodujú medzi prostrediami alebo chýbajúcimi premennými prostredia v nastaveniach Vercelu. Aby ste predišli takýmto problémom, je dôležité pochopiť, ako Prisma spracováva pripojenia v produkcii, najmä keď používate cloudovú databázu, ako je CockroachDB. Na rozdiel od lokálneho vývoja môžu mať produkčné databázy ďalšie obmedzenia zabezpečenia alebo pripojenia, ktoré môžu ovplyvniť správanie pripojenia Prisma.

Ďalším dôležitým aspektom je efektívne riadenie inštancie klienta Prisma. Vo vývoji je bežné znova inicializovať Prisma pri každej zmene súboru, čo však môže spôsobiť úniky pamäte v produkčnom prostredí. S platformami ako Vercel, ktoré často reštartujú inštancie, použitie `globalThis` v konfiguračnom súbore pomáha obmedziť inicializáciu klienta Prisma na jednu inštanciu. Nastavenie DATABASE_URL bezpečne cez premenné prostredia Vercel a ich používanie v rámci `schema.prisma` zaisťuje, že prihlasovacie údaje do vašej databázy sú prístupné pri zachovaní bezpečnosti. Toto je obzvlášť dôležité pre projekty s používateľskými údajmi, kde je bezpečnosť nevyhnutná. 🔒

Optimalizácia nastavení nasadenia a správa spracovania chýb pri známych problémoch, ako sú duplicitné záznamy, pomáha zaistiť hladký chod vašej aplikácie. Napríklad v produkcii možno budete chcieť zachytiť chyby Prisma pomocou `PrismaClientKnownRequestError`, aby ste do frontendu vrátili jasné a užívateľsky prívetivé správy. Jemným doladením konfigurácie Prisma a správnym spracovaním nastavení špecifických pre prostredie môžete zabrániť chybám 500 a zabezpečiť spoľahlivejšie pripojenie k databáze. Testovanie rôznych častí aplikácie, najmä interakcií s databázou, pridáva istotu stabilite nasadenia. 🛠️