search

firebase / firebase-tools

The Firebase Command Line Tools
MIT License
4.02k stars 938 forks source link

Firestore Emulator >= 13.3.1 returns 500 for all requests when using a simple react app. #6853

Closed Nicien closed 8 months ago

Nicien commented 8 months ago

Hello, The firestore emulator starts returning "internal error" (500, see below) for just one of my firebase project for no obvious reason: I didn't touch the code of the client.

The project is relatively simple, it's just a react app which use firebase/firestore/lite and firebase/auth, nothing fancy, no special configuration, no hacks and no problems with the deployed app.

So I suppose that the bug has been introduced in a recent version of firebase-tools.

Here the results after testing with different versions:

The last working version of firebase-tools in my situation is 13.3.0

Interresting fact: The firestore Emulator UI works fine ! (http://127.0.0.1:4000/firestore)

Environment info

firebase-tools version: 13.4.1 (using cloud-firestore-emulator-v1.19.2.jar)

Platform: macOS

Client: react using npm package firebase 10.8.1

Steps to reproduce

1) Create an new project

$ npm create vite@latest ✔ Project name: … firestore-bug-test ✔ Select a framework: › React ✔ Select a variant: › TypeScript + SWC

2) Init firebase

$ firebase init

with Firestore + Emulators

3) Add basic code

Replace `App.tsx` with this ``` import { useEffect, useState } from "react"; import "./App.css"; import { initializeApp } from "firebase/app"; import { getFirestore, connectFirestoreEmulator, } from "firebase/firestore/lite"; import { getDocs, collection, query, orderBy, limit, } from "firebase/firestore/lite"; const connectEmulators = true; const firebaseConfig = { projectId: "dummy-project-id", }; // Initialize Firebase const app = initializeApp(firebaseConfig); const firestore = getFirestore(app); // this.analytics = getAnalytics(this.app); if (connectEmulators) { // connectAuthEmulator(this.auth, "http://localhost:9099"); connectFirestoreEmulator(firestore, "localhost", 8080); } async function getPerfumes() { const perfumeRecipesCollection = collection(firestore, "perfume-recipes"); const perfumes = await getDocs( query(perfumeRecipesCollection, orderBy("created", "desc"), limit(100)) ); return perfumes.docs.map((doc) => doc.data()); } function App() { const [perfumes, setPerfumes] = useState | null>(null); const [fetchError, setFetchError] = useState(); useEffect(() => { const fetchPerfumes = async () => { try { setPerfumes(await getPerfumes()); } catch (e) { if (e instanceof Error) { setFetchError(e); } throw e; } }; fetchPerfumes(); }, [setPerfumes]); return ( <>

Test playground for issue #6853

{fetchError && 
{`${fetchError}`}
}
{perfumes !== null && ( <>{perfumes.length} perfumes successfully Fetched. )}
); } export default App; Add a code snippet to your website: [www.paste.org](https://www.paste.org/) ```

Run the emulator

$ firebase emulators:start
$ yarn run dev

And the error is there: {"error":{"code":500,"message":"Internal","status":"INTERNAL"}} :)

Expected behavior

Firestore emulator returns the content of the local database as usual.

Actual behavior

The request: POST http://localhost:8080/v1/projects/fragrance-b6af8/databases/(default)/documents:runQuery returns 500

Response:

{"error":{"code":500,"message":"Internal","status":"INTERNAL"}}

Content of firestore-debug.log:

Mar 08, 2024 12:20:27 AM io.gapi.emulators.netty.HttpHandler$1 onError
INFO: Exception when handling request: com/google/cloud/datastore/billing/QueryCostOrBuilder

zip of full firebase logs logs.zip

By the way, I like firebase: especially hosting, firebase/auth and firestore :) I hope google will invest on it.

exaby73 commented 8 months ago

Hello @Nicien. Could you provide some reproduction steps as well as a simple code sample so I may check this out?

Nicien commented 8 months ago

@exaby73 Good news ! I'm able to reproduce the error in a dedicated minimal project with a minimal amount of code :)

Here the steps:

1) Create an new project

$ npm create vite@latest ✔ Project name: … firestore-bug-test ✔ Select a framework: › React ✔ Select a variant: › TypeScript + SWC

2) Init firebase

$ firebase init

with Firestore + Emulators

3) Add basic code

Replace App.tsx with the content of this file

Run the emulator

$ firebase emulators:start
$ yarn run dev

And the error is there: {"error":{"code":500,"message":"Internal","status":"INTERNAL"}} :)

@exaby73 Tell me if there is a way to help you further.

exaby73 commented 8 months ago

@Nicien I am unable to access the file you linked. I'm getting blocked for some reason. Could you paste the file in a comment here instead? You can use a collapsable section for the code so it's not a huge comment

harshyyy21 commented 8 months ago

Hi @Nicien, we have found the root cause of this issue and it should be fixed in the next release. Please let me know if the issue is resolved. Will be looking out for an update!

Nicien commented 8 months ago

@exaby73 Done. Thx for teaching me how to use collapsable sections :)

@harshyyy21 Cool. thank you ! I'm looking forward to the next release to give you feedback. (I can't use the lastest firebase from git because an obscure typescript error is preventing me from doing sotsc --build tsconfig.publish.json).

Nicien commented 8 months ago

feedback as requested: the bug disappears with the version13.5.1 of firebase-tools :)

Thank you !

❤️