React/NextJS使用Firebase Realtime Database出现Client is offline错误如何解决

该错误是Firebase 9.x SDK在客户端离线、且无对应缓存数据时发起get请求触发的未捕获运行时异常，可通过以下方案逐一排查修复：

• 补充get请求的异常捕获 #

  现有代码仅处理了请求成功的回调，未对异常做捕获，是导致未处理运行时错误的直接原因。补充catch逻辑后可避免页面崩溃，同时可自定义离线场景的降级策略：

  useEffect(() => {
    const database = getDatabase(fbApp)
    const ads = ref(database, 'ad_results')
  
    get(ads)
      .then((snap) => {
        const results = snap.val()
        // 原有数据处理逻辑
      })
      .catch((err) => {
        // 匹配离线错误做专属处理
        if (err.message.includes('Client is offline')) {
          // 可选逻辑：提示用户检查网络、加载本地缓存数据等
          console.log('网络状态不佳，无法加载最新数据')
        }
      })
  }, [])
  

• 开启Realtime Database本地持久化 #

  Firebase Web端SDK默认关闭本地数据持久化，开启后离线场景下get请求会优先返回本地缓存数据，大幅降低报错概率：
  在Firebase初始化逻辑中新增开启持久化的代码：

  import { initializeApp } from "firebase/app";
  import { getDatabase, enablePersistence } from "firebase/database";
  import CONFIG from '../CONFIG.json'
  
  const FIREBASE_CONFIG = {
    apiKey: CONFIG['FIREBASE_API_KEY'],
    authDomain: CONFIG['FIREBASE_AUTH_DOMAIN'],
    databaseURL: CONFIG['FIREBASE_DATABASE_URL'],
    storageBucket: CONFIG['FIREBASE_STORAGE_BUCKET']
  }
  const fbApp = initializeApp(FIREBASE_CONFIG)
  const database = getDatabase(fbApp)
  
  // 开启本地持久化
  enablePersistence(database)
    .catch((err) => {
      // 多标签页打开、浏览器不支持等异常无需额外处理，不影响正常功能
      if (err.code === 'failed-precondition' || err.code === 'unimplemented') return
    })
  

• 调整数据拉取的优先级规则 #

  若业务允许优先使用缓存数据，可指定get请求的数据源优先级，优先读本地缓存，缓存不存在再发起网络请求：

  // 优先读缓存，缓存失效再请求服务端
  get(ads, { source: 'cache' })
    .then((cacheSnap) => {
      if (cacheSnap.exists()) {
        // 直接使用缓存数据
        return cacheSnap.val()
      }
      // 缓存不存在时请求服务端
      return get(ads, { source: 'server' }).then(serverSnap => serverSnap.val())
    })
    .then(results => {
      // 统一处理数据
    })
    .catch(err => {
      // 统一捕获异常
    })
  

• 监听连接状态，离线时禁止主动拉取 #

  可通过Firebase内置的.info/connected节点监听当前客户端和服务端的连接状态，仅在线时发起数据请求，从根源避免离线请求报错：

  useEffect(() => {
    const database = getDatabase(fbApp)
    const connectedRef = ref(database, '.info/connected')
    let isOnline = false
  
    // 监听连接状态
    const unsubConnect = onValue(connectedRef, (snap) => {
      isOnline = snap.val() === true
      // 连接恢复后主动拉取数据
      if (isOnline) {
        const ads = ref(database, 'ad_results')
        get(ads).then(/* 原有逻辑 */).catch(/* 错误处理 */)
      }
    })
  
    return () => unsubConnect()
  }, [])
  

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