Resolució de l'error Prisma 500 al desplegament de Vercel per a projectes ReactJS

Resolució de problemes de la base de dades Prisma al desplegament de Vercel

El desplegament d'un projecte des d'un entorn de desenvolupament local a una plataforma com Vercel pot ser un pas emocionant, ja que indica que la vostra aplicació està gairebé preparada per al món. 🌍 Tanmateix, no és estrany enfrontar-se a problemes inesperats al llarg del camí. Per exemple, una compilació que funciona perfectament a la vostra màquina local pot trobar errors de sobte quan es desplega en un servidor.

Aquest repte és especialment familiar quan es treballa amb eines com Prisma per a la gestió de bases de dades. Tot i que Prisma facilita la interacció amb la vostra base de dades localment, desplegant-la a una plataforma com Vercel de vegades pot provocar problemes misteriosos, com ara el temut "Error 500" quan s'intenta accedir a la base de dades.

En el meu cas, després de configurar Prisma amb CockroachDB com a font de dades, vaig colpejar un mur durant el desplegament: va aparèixer un missatge d'error persistent, "La sol·licitud ha fallat amb el codi d'estat 500", quan intentava interactuar amb la base de dades. Tot i que el mateix codi funcionava localment, el procés de desplegament a Vercel va revelar un problema ocult.

En aquest article, analitzarem com vaig diagnosticar i abordar aquest problema, utilitzant exemples del món real per il·lustrar els passos de resolució de problemes. Tant si us trobeu amb un error similar com si teniu curiositat sobre els inconvenients habituals del desplegament de Prisma, continueu llegint per obtenir més informació! ⚙️

Comprendre la integració de Prisma i Next.js per a desplegaments de Vercel sense errors

El primer script se centra en la gestió de sol·licituds d'API Next.js utilitzant Prisma. En aquest codi, definim un punt final POST per capturar una entrada de correu electrònic i crear un registre nou a la base de dades. Aquí, la funció Next.js `POST` utilitza el mètode `wait req.json()` per analitzar la càrrega útil JSON, cosa que ens permet extreure el camp de correu electrònic proporcionat per l'usuari. En embolicar la trucada a la base de dades en un bloc `try`-`catch`, aquesta configuració captura de manera efectiva els possibles errors de la base de dades, que són essencials per supervisar els desplegaments sense problemes. Sense aquesta gestió d'errors, problemes com ara les entrades duplicades podrien quedar desmarcats, provocant errors del servidor poc clars. Una gestió tan acurada dels errors coneguts, com ara les restriccions úniques, ajuda a mostrar missatges fàcils d'utilitzar, essencials en aplicacions que gestionen les dades dels usuaris amb regularitat, com ara formularis de registre o llistes de contactes. 📝

La comprovació `PrismaClientKnownRequestError` dins del bloc catch ens permet detectar errors habituals, com ara intentar afegir un correu electrònic ja existent. Aquest maneig millora la fiabilitat de l'aplicació a Vercel en retornar un codi d'estat 520 específic quan es produeix un error conegut, cosa que facilita la identificació i el maneig a la interfície. El mètode `NextResponse.json()` envia respostes en format JSON, la qual cosa ens permet personalitzar els estats HTTP en funció del tipus d'error. Això permet que les aplicacions d'interfície gestionen els errors del servidor de manera coherent, mostrant missatges rellevants als usuaris sense exposar detalls sensibles dels errors.

En el segon script, el codi defineix com Prisma es connecta a la base de dades, ja sigui en desenvolupament o producció. Aquí, utilitzem `globalThis` per evitar crear múltiples instàncies de `PrismaClient` en desenvolupament, que d'altra manera poden causar problemes de memòria amb connexions freqüents de base de dades. En establir `globalThis.prisma = db` de manera condicional, l'aplicació manté una única instància de Prisma per sessió en desenvolupament. Per producció entorns, on les fuites de memòria de múltiples connexions serien encara més problemàtiques, aquesta configuració garanteix una connexió estable i d'alt rendiment a la base de dades. Aquesta gestió de connexions modular és essencial quan es desplega a plataformes com Vercel, que optimitzen els seus entorns per a l'escalabilitat. 🌐

El fitxer d'esquema defineix com s'estructura la base de dades. En especificar CockroachDB com a proveïdor, Prisma pot generar consultes optimitzades per a aquest motor de base de dades específic. El model de la taula `Contacte` utilitza `email` com a identificador únic amb els atributs `@id` i `@unique`, permetent cerques ràpides i assegurant que cada registre de contacte tingui un correu electrònic diferent. Aquesta estructura és eficient per a aplicacions que necessiten registres d'usuari únics, com ara els sistemes d'autenticació d'usuaris. A més, `@default(now())` assigna automàticament una marca de temps de creació, que pot ser útil per a finalitats d'auditoria o ordenar registres per data de creació. La configuració de l'esquema de Prisma està optimitzada tant per a entorns locals com per a entorns desplegats, la qual cosa la fa altament adaptable als canvis.

Finalment, les proves unitàries validen cada funció, comprovant que les interaccions de la base de dades funcionen com s'esperava i que la gestió d'errors sigui eficaç. Per exemple, utilitzant les funcions "descriure" i "esperar" de Jest, podem confirmar que les respostes específiques de la base de dades, com ara errors de restricció únics, retornen el codi d'estat correcte. A les aplicacions del món real, les proves ajuden a detectar problemes des del principi, especialment quan es gestionen inputs que d'altra manera podrien trencar un desplegament de producció. Aquestes proves unitàries cobreixen casos com la creació de registres nous, la gestió de dades duplicades i la devolució dels estats HTTP adequats. D'aquesta manera, fins i tot si s'afegeixen noves funcions o canvia el backend, les proves ajuden a garantir que l'API segueixi sent fiable i sense errors.

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

Optimització dels desplegaments de Prisma i Vercel per a una producció fiable

Desplegant aplicacions amb Prisma i Vercel ofereix una combinació potent i flexible per gestionar bases de dades en entorns de producció. Tanmateix, les diferències entre els entorns de desenvolupament local i de servidor poden provocar problemes com ara un error d'estat 500 en accedir a la base de dades. Aquest error sovint prové de configuracions de connexió de base de dades que no s'alineen entre entorns o que falten variables d'entorn a la configuració de Vercel. Per evitar aquests problemes, és fonamental entendre com Prisma gestiona les connexions en producció, especialment quan s'utilitza una base de dades al núvol com CockroachDB. A diferència del desenvolupament local, les bases de dades de producció poden tenir limitacions addicionals de seguretat o connexió que poden afectar el comportament de connexió de Prisma.

Un altre aspecte crucial és la gestió eficient de la instància del client Prisma. En desenvolupament, és habitual reiniciar Prisma cada vegada que canvia un fitxer, però això pot provocar fuites de memòria en un entorn de producció. Amb plataformes com Vercel que reinicien les instàncies amb freqüència, l'ús de "globalThis" al fitxer de configuració ajuda a limitar la inicialització del client Prisma a una única instància. Configuració DATABASE_URL de manera segura a través de les variables d'entorn de Vercel i utilitzar-lo dins de `schema.prisma` garanteix que les credencials de la vostra base de dades siguin accessibles tot mantenint la seguretat. Això és especialment rellevant per a projectes amb dades d'usuari, on la seguretat és essencial. 🔒

L'optimització de la configuració de desplegament i la gestió d'errors per a problemes coneguts, com ara els registres duplicats, ajuden a garantir que la vostra aplicació funcioni correctament. Per exemple, en producció, és possible que vulgueu detectar errors de Prisma utilitzant `PrismaClientKnownRequestError` per retornar missatges clars i fàcils d'utilitzar a la interfície. Si ajusteu la configuració de Prisma i gestioneu correctament els paràmetres específics de l'entorn, podeu evitar els errors 500 i garantir una connexió de base de dades més fiable. Provar diferents parts de l'aplicació, especialment les interaccions de bases de dades, afegeix confiança a l'estabilitat del desplegament. 🛠️