Rozwiązywanie błędu Prisma 500 podczas wdrażania Vercel dla projektów ReactJS

Rozwiązywanie problemów z bazą danych Prisma podczas wdrażania Vercel

Wdrożenie projektu z lokalnego środowiska programistycznego na platformę taką jak Vercel może być ekscytującym krokiem, sygnalizującym, że Twoja aplikacja jest prawie gotowa na świat. 🌍 Jednak nierzadko po drodze napotyka się nieoczekiwane problemy. Na przykład kompilacja, która działa doskonale na komputerze lokalnym, może nagle napotkać błędy po wdrożeniu na serwerze.

To wyzwanie jest szczególnie znane podczas pracy z narzędziami takimi jak Prisma do zarządzania bazami danych. Mimo że Prisma ułatwia lokalną interakcję z bazą danych, wdrażając ją na platformie takiej jak Vercel może czasami powodować tajemnicze problemy, takie jak przerażający „Błąd 500” podczas próby dostępu do bazy danych.

W moim przypadku, po skonfigurowaniu Prisma z CockroachDB jako źródłem danych, podczas wdrażania napotkałem barierę: podczas próby interakcji z bazą danych pojawił się ciągły komunikat o błędzie „Żądanie nie powiodło się z kodem stanu 500”. Chociaż ten sam kod działał lokalnie, proces wdrażania w Vercel ujawnił ukryty problem.

W tym artykule omówimy, jak zdiagnozowałem i rozwiązałem ten problem, korzystając z rzeczywistych przykładów ilustrujących kroki rozwiązywania problemów. Niezależnie od tego, czy napotkasz podobny błąd, czy po prostu ciekawią Cię typowe pułapki związane z wdrażaniem Prisma, czytaj dalej, aby dowiedzieć się więcej! ⚙️

Zrozumienie integracji Prisma i Next.js w celu zapewnienia bezbłędnych wdrożeń Vercel

Pierwszy skrypt koncentruje się na obsłudze żądań API w Następny.js za pomocą Prismy. W tym kodzie definiujemy punkt końcowy POST w celu przechwytywania danych wejściowych e-mail i tworzenia nowego rekordu w bazie danych. W tym przypadku funkcja „POST” Next.js wykorzystuje metodę „await req.json()” do analizowania ładunku JSON, co pozwala nam wyodrębnić pole e-mail podane przez użytkownika. Zawijając wywołanie bazy danych w blok `try`-`catch`, ta konfiguracja skutecznie wychwytuje potencjalne błędy bazy danych, które są niezbędne do monitorowania w celu zapewnienia płynnego wdrożenia. Bez tej obsługi błędów problemy takie jak zduplikowane wpisy mogłyby pozostać niezaznaczone, co prowadziłoby do niejasnych błędów serwera. Takie ostrożne obchodzenie się ze znanymi błędami, takimi jak unikalne ograniczenia, pomaga w wyświetlaniu przyjaznych dla użytkownika komunikatów – niezbędnych w aplikacjach regularnie obsługujących dane użytkowników, takich jak formularze rejestracyjne czy listy kontaktów. 📝

Sprawdzenie „PrismaClientKnownRequestError” w bloku catch pozwala nam wykryć typowe błędy, takie jak próba dodania już istniejącego adresu e-mail. Ta obsługa zwiększa niezawodność aplikacji w Vercel poprzez zwrócenie określonego kodu stanu 520, gdy wystąpi taki znany błąd, co ułatwia zlokalizowanie i obsługę w interfejsie użytkownika. Metoda `NextResponse.json()` wysyła odpowiedzi w formacie JSON, co pozwala nam dostosować statusy HTTP na podstawie typu błędu. Dzięki temu aplikacje frontendowe mogą w sposób spójny obsługiwać błędy serwera, wyświetlając użytkownikom odpowiednie komunikaty bez ujawniania wrażliwych szczegółów błędów.

W drugim skrypcie kod definiuje sposób, w jaki Prisma łączy się z bazą danych, zarówno w fazie rozwoju, jak i produkcji. W tym przypadku używamy `globalThis`, aby uniknąć tworzenia wielu instancji `PrismaClient` w fazie rozwoju, co w przeciwnym razie mogłoby powodować problemy z pamięcią przy częstych połączeniach z bazami danych. Ustawiając warunkowo `globalThis.prisma = db`, aplikacja utrzymuje jedną instancję Prisma na sesję w fazie programowania. Dla produkcja środowiskach, w których wycieki pamięci z wielu połączeń byłyby jeszcze bardziej problematyczne, taka konfiguracja zapewnia stabilne i wydajne połączenie z bazą danych. Takie modułowe zarządzanie połączeniami jest niezbędne podczas wdrażania na platformach takich jak Vercel, które optymalizują swoje środowiska pod kątem skalowalności. 🌐

Plik schematu definiuje strukturę bazy danych. Określając CockroachDB jako dostawcę, Prisma może generować zoptymalizowane zapytania dla tego konkretnego silnika bazy danych. Model tabeli „Kontakt” wykorzystuje „e-mail” jako unikalny identyfikator z atrybutami „@id” i „@unique”, umożliwiając szybkie wyszukiwanie i zapewniając, że każdy rekord kontaktu ma odrębny adres e-mail. Ta struktura jest wydajna w przypadku aplikacji wymagających unikalnych rekordów użytkowników, takich jak systemy uwierzytelniania użytkowników. Dodatkowo `@default(now())` automatycznie przypisuje znacznik czasu utworzenia, co może być przydatne do celów audytu lub porządkowania rekordów według daty utworzenia. Konfiguracja schematu Prisma jest zoptymalizowana zarówno pod kątem środowisk lokalnych, jak i wdrożonych, dzięki czemu można ją łatwo dostosować do zmian.

Na koniec testy jednostkowe weryfikują każdą funkcję, sprawdzając, czy interakcje z bazą danych działają zgodnie z oczekiwaniami, a obsługa błędów jest skuteczna. Na przykład, używając funkcji "opisz" i "oczekiwaj" programu Jest, możemy potwierdzić, że określone odpowiedzi bazy danych, takie jak błędy ograniczeń unikalnych, zwracają poprawny kod stanu. W rzeczywistych aplikacjach testy pomagają wcześnie wykryć problemy, szczególnie podczas obsługi danych wejściowych, które w przeciwnym razie mogłyby przerwać wdrożenie produkcyjne. Te testy jednostkowe obejmują przypadki takie jak tworzenie nowych rekordów, zarządzanie zduplikowanymi danymi i zwracanie odpowiednich statusów HTTP. W ten sposób, nawet jeśli zostaną dodane nowe funkcje lub zmiany w backendie, testy pomogą zapewnić, że API pozostanie niezawodne i wolne od błędów.

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

Optymalizacja wdrożeń Prisma i Vercel w celu zapewnienia niezawodnej produkcji

Wdrażanie aplikacji za pomocą Prisma i Vercel zapewniają potężną, elastyczną kombinację do obsługi baz danych w środowiskach produkcyjnych. Jednak różnice między lokalnym środowiskiem programistycznym a środowiskiem serwerowym mogą prowadzić do problemów, takich jak błąd statusu 500 podczas uzyskiwania dostępu do bazy danych. Ten błąd często wynika z konfiguracji połączenia z bazą danych, która nie jest zgodna między środowiskami lub z brakujących zmiennych środowiskowych w ustawieniach Vercel. Aby zapobiec takim problemom, niezwykle ważne jest zrozumienie, w jaki sposób Prisma obsługuje połączenia w środowisku produkcyjnym, szczególnie podczas korzystania z bazy danych w chmurze, takiej jak CockroachDB. W przeciwieństwie do rozwiązań lokalnych, produkcyjne bazy danych mogą mieć dodatkowe zabezpieczenia lub ograniczenia połączeń, które mogą mieć wpływ na zachowanie połączenia Prisma.

Kolejnym istotnym aspektem jest efektywne zarządzanie instancją klienta Prisma. W fazie rozwoju często zdarza się, że Prisma jest ponownie inicjowana za każdym razem, gdy zmienia się plik, ale może to powodować wycieki pamięci w środowisku produkcyjnym. W przypadku platform takich jak Vercel, które często restartują instancje, użycie `globalThis` w pliku konfiguracyjnym pomaga ograniczyć inicjalizację klienta Prisma do pojedynczej instancji. Ustawienie BAZA DANYCH_URL bezpiecznie za pomocą zmiennych środowiskowych Vercel i użycie ich w pliku `schema.prisma` zapewnia dostępność danych uwierzytelniających bazy danych przy jednoczesnym zachowaniu bezpieczeństwa. Jest to szczególnie istotne w przypadku projektów z danymi użytkowników, gdzie bezpieczeństwo jest istotne. 🔒

Optymalizacja ustawień wdrażania i zarządzanie obsługą błędów w przypadku znanych problemów, takich jak zduplikowane rekordy, pomaga zapewnić płynne działanie aplikacji. Na przykład w środowisku produkcyjnym możesz chcieć wyłapać błędy Prisma za pomocą `PrismaClientKnownRequestError`, aby zwrócić do interfejsu użytkownika jasne, przyjazne dla użytkownika komunikaty. Dostosowując konfigurację Prisma i poprawnie obsługując ustawienia specyficzne dla środowiska, możesz zapobiec błędom 500 i zapewnić bardziej niezawodne połączenie z bazą danych. Testowanie różnych części aplikacji, szczególnie interakcji z bazą danych, zwiększa pewność stabilności wdrożenia. 🛠️