[FirebaseError] the client is offline. - firestore 데이터 불러오지 못하는 에러 해결

error 화면

Firebase와 React를 연동하는 과정에서, FirebaseError: Failed to get document because the client is offline 이라는 에러를 만났다.

외국 형님들의 StackOverflow를 참고하면 버전을 다운그레이드 하라는 해결법만 제시되는데, 필자 같은 경우에는 조금 더 근본적인 해결 법들이 먹혔다.

1. .env 파일의 위치 확인

firebaseConfig인 firebase의 설정값을 환경변수로 관리 해 주기 위해서 .env파일을 생성해서 process.env.REACT_APP_ 형식으로 코드를 작성 했었는데, 필지의 경우에는 파일이 src 디렉토리 안에 있었다. 이것이 문제였던 것으로 판단되는데, .env 파일은 항상 프로젝트 디렉토리의 루트 디렉토리에 위치 해 있어야 한다.

.env파일의 위치 확인

2. .env 파일의 형식 확인

.env파일의 경우 콤마(,) 와 따옴표("")등 특수 기호들은 아무것도 포함되면 안되며,

  REACT_APP_apiKey=apikey
  REACT_APP_authDomain=authDomain
  REACT_APP_projectId=projectId
  REACT_APP_storageBucket=storageBucket
  REACT_APP_messagingSenderId=messagingSenderId
  REACT_APP_appId=appId
  REACT_APP_measurementId=measurementId

위와 같은 형식으로만 작성 되어야 한다. 만약 콘솔 창에 Permission-denied와 같은 에러 메시지가 같이 나타난다면, .env 파일의 오타나 형식을 다시 점검 해 볼 것을 추천한다.

3. 웹 애플리케이션 서버의 재시작

React에서 다루는 환경변수의 경우, 빌드 혹은 배포와 동시에 애플리케이션의 환경변수로 적용되므로, 만약 파일의 변동 사항이 있거나 새롭게 환경 변수를 설정 해 주었을 때, 다시 빌드하거나 다시 npm start 해주는 것 또한 방법일 수도 있다. 만약 코드에 문제가 없다면 무조건 이 잘못 일 것.

4. firebase 규칙(Rules) 재설정

firebase에서 초기 Production 모드에서 규칙이 다음과 같이 설정 되어 있을텐데,

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

이는 읽기와 쓰기 모두 허용하지 않는다는 의미로, 웹 애플리케이션을 개발 중일 때는

다음과 같이 모두 허용한다면 에러가 해결 될 것이다.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

실제 product를 배포 할 때는

다음과 같이 Auth에서 허용된 사용자에게만 권한을 주는 것을 고려해 보는 것이 바람직 하다.

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

---

2023.05.27 - [Web] - [React.js + Firebase] 초간단 사진 게시판 만들기(1) - Firestore 데이터 가져오기

[React.js + Firebase] 초간단 사진 게시판 만들기(1) - Firestore 데이터 가져오기