Nuxt 3中使用useStorage连接Redis时如何处理连接错误？

1. 为Redis操作添加错误捕获与降级逻辑 #

在server/api/viewCount.get.ts中，用try-catch包裹所有Redis相关操作，捕获连接或操作失败的错误，同时降级到内存存储保证功能可用：

// server/api/viewCount.get.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  const pageId: string = query.pageId as string;
  const redisKey: string = `viewCount:${pageId}`;
  let viewCount = 1;

  try {
    const redis = useStorage("redis");
    const data = await redis.getItem(redisKey);
    if (data) viewCount = Number(data.toString()) + 1;
    await redis.setItem(redisKey, viewCount);
  } catch (error) {
    // Redis不可用时，切换到内存存储临时保存数据
    const memoryStorage = useStorage();
    const cachedData = await memoryStorage.getItem(redisKey);
    if (cachedData) viewCount = Number(cachedData.toString()) + 1;
    await memoryStorage.setItem(redisKey, viewCount);
    console.warn("Redis连接失败，已降级到内存存储:", error.message);
  }

  return viewCount;
});

2. 处理ioredis的未处理错误事件 #

创建服务器插件捕获ioredis的错误事件，避免控制台刷屏：

// server/plugins/redis-error-handler.ts
export default defineNitroPlugin(() => {
  const redisDriver = useStorage("redis").driver;
  if (redisDriver?.on) {
    redisDriver.on("error", (error) => {
      console.warn("Redis连接异常:", error.message);
    });
  }
});

3. 前端请求错误防护 #

在useViewCount函数中添加错误捕获，避免前端因API报错导致页面异常：

// api.ts
export async function useViewCount(pageId: string) {
  try {
    const { data: viewCount } = await useFetch(`/api/viewCount?pageId=${pageId}`);
    return viewCount;
  } catch (error) {
    console.warn("获取访问量失败:", error.message);
    return ref(0); // 返回默认值保证页面正常渲染
  }
}

4. 优化Redis重试配置（可选） #

在nuxt.config.ts中调整Redis的重试参数，减少无效重试消耗资源：

// nuxt.config.ts
export default defineNuxtConfig({
  storage: {
    redis: {
      driver: "redis",
      host: process.env.REDIS_HOST || "redis",
      port: process.env.REDIS_PORT || 6379,
      maxRetriesPerRequest: 3, // 降低重试次数
      retryDelayOnFailover: 100,
    },
  },
});

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