部署在Vercel的Next.js应用初始请求出现500服务器错误

问题现象 #

在Vercel部署的Next.js应用中，首次请求/api/prompt端点时始终返回500内部服务器错误，后续刷新请求恢复正常；本地运行无异常。查看Vercel日志发现，“MongoDB connected”日志出现在500错误之后，推测是MongoDB连接延迟导致。

关键代码片段 #

/utils/database.tsx #

import mongoose from "mongoose";

let isConnected = false;

export const connectToDB = async () => {
    mongoose.set("strictQuery", true);

    if (isConnected) {
        console.log("MongoDB is already connected");
        return true;
    }

    try {
        await mongoose.connect(process.env.MONGODB_URI!, {
            dbName: "share_funfact"
        });

        isConnected = true;

        console.log("MongoDB connected")
        return true;
    } catch (error) {
        console.log(error);
    }
}

/app/api/prompt.tsx #

import { connectToDB } from "@utils/database";
import Prompt from "@models/prompt";

export const dynamic = "force-dynamic";

export const GET = async (request: any) => {
  try {
    await connectToDB();
    const prompts = await Prompt.find({}).populate("creator");

    return new Response(JSON.stringify(prompts), { status: 200 });
  } catch (error) {
    return new Response("Failed to fetch all prompts", { status: 500 });
  }
};

/app/components/feed.tsx #

"use client";

import { useState, useEffect } from "react";

const Feed = () => {

  // 省略其他代码

  useEffect(() => {
    const fetchPosts = async () => {
      const response = await fetch("/api/prompt");
      if (response) {
        const data = await response.json();
        setPosts(data);
      }
    };

    fetchPosts();
  }, []);


  return (
    <section className="feed">
      <form className="relative w-full flex-center">
        <input
          type="text"
          placeholder="Search for a tag or a username"
          value={searchText}
          onChange={handleSearchChange}
          required
          className="search_input peer"
        />
      </form>
      {searchText ? (
        <PromptCardList
          data={searchedResults}
          handleTagClick={handleTagClick}
        />
      ) : (
        <PromptCardList data={posts} handleTagClick={handleTagClick} />
      )}
    </section>
  );
};

export default Feed;

排查步骤 #

1. Vercel冷启动验证：Vercel的Serverless函数首次调用会触发冷启动，此时初始化MongoDB连接的耗时可能超过请求超时阈值，导致未完成连接就执行数据库查询。
2. 连接函数错误处理检查：当前connectToDB函数在catch块未返回任何值，可能导致await connectToDB()后，数据库未连接就继续执行Prompt.find()，引发错误。
3. 连接状态变量可靠性：自定义的isConnected变量在冷启动场景下可能存在竞态条件，无法准确反映实际连接状态。

解决方案 #

1. 修复数据库连接函数的错误处理与状态判断 #

使用Mongoose内置的连接状态替代自定义变量，确保连接失败时抛出错误，让上层API路由正确捕获：

import mongoose from "mongoose";

export const connectToDB = async () => {
  mongoose.set("strictQuery", true);

  // 利用Mongoose内置状态判断是否已连接
  if (mongoose.connection.readyState === 1) {
    console.log("MongoDB is already connected");
    return;
  }

  try {
    await mongoose.connect(process.env.MONGODB_URI!, {
      dbName: "share_funfact",
      // 添加连接超时与重试配置，适配Vercel冷启动环境
      serverSelectionTimeoutMS: 5000,
      socketTimeoutMS: 45000,
      retryWrites: true,
    });
    console.log("MongoDB connected");
  } catch (error) {
    console.error("MongoDB connection failed:", error);
    // 抛出错误，确保API路由能捕获并返回正确状态
    throw new Error("Failed to connect to database");
  }
};

2. 优化API路由的错误捕获 #

确保连接失败时能明确输出错误日志，便于调试：

import { connectToDB } from "@utils/database";
import Prompt from "@models/prompt";

export const dynamic = "force-dynamic";

export const GET = async (request: Request) => {
  try {
    await connectToDB();
    const prompts = await Prompt.find({}).populate("creator");
    return new Response(JSON.stringify(prompts), { status: 200 });
  } catch (error) {
    console.error("Fetch prompts failed:", error);
    return new Response("Failed to fetch all prompts", { status: 500 });
  }
};

3. 前端添加请求重试机制 #

针对首次请求失败的情况，添加自动重试逻辑，提升用户体验：

"use client";

import { useState, useEffect } from "react";

const Feed = () => {
  const [posts, setPosts] = useState([]);
  const [searchText, setSearchText] = useState("");
  const [searchedResults, setSearchedResults] = useState([]);

  // 省略其他代码...

  useEffect(() => {
    const fetchPosts = async (retries = 2) => {
      try {
        const response = await fetch("/api/prompt");
        if (!response.ok) {
          if (retries > 0) {
            // 失败后延迟1秒重试，最多重试1次
            setTimeout(() => fetchPosts(retries - 1), 1000);
            return;
          }
          throw new Error(`Request failed with status: ${response.status}`);
        }
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        console.error("Fetch posts error:", error);
      }
    };

    fetchPosts();
  }, []);

  // 省略其他代码...

  return (
    <section className="feed">
      <form className="relative w-full flex-center">
        <input
          type="text"
          placeholder="Search for a tag or a username"
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
          required
          className="search_input peer"
        />
      </form>
      {searchText ? (
        <PromptCardList
          data={searchedResults}
          handleTagClick={handleTagClick}
        />
      ) : (
        <PromptCardList data={posts} handleTagClick={handleTagClick} />
      )}
    </section>
  );
};

export default Feed;

4. 利用Vercel边缘函数预连接数据库（可选） #

如果冷启动问题持续，可以将数据库连接逻辑迁移到Vercel边缘函数，利用边缘计算的预热机制提前建立连接，减少首次请求延迟。

内容的提问来源于stack exchange，提问作者Mirel Korajac