setDoc fails to resolve after page refresh

[builtbyjavi]

Operating System

Windows 11

Environment (if applicable)

node: 22, next: 12.3.4

Firebase SDK Version

11.7.1

Firebase SDK Product(s)

Firestore

Project Tooling

React / Typescript

Detailed Problem Description

I am trying to set data in Firestore based on a unique identifier in the url. I have a React hook that listens to Next.js Router.events and calls an update callback function on routeChangeComplete. When I navigate through my app, the related data I need is correctly added to Firestore; however, when I refresh the page the setDoc function hangs (i.e. the following line is never executed). I currently have a hacky workaround by introducing a small timeout around setDoc and I am really not sure why this works? Emphasis on this only happening when I refresh the page.

Steps and code to reproduce issue

useEffect(() => {
    syncData(window.location.href);

    Router.events.on('routeChangeComplete', syncData);

    return () => {
      Router.events.off('routeChangeComplete', syncData);
    };
}, []);


//NOT-WORKING (but should)
const syncData = useCallback(
    async (data) => {
        if (!documentReference) {
          return;
        }

       const firebaseFirestoreModule = await import('firebase/firestore');

        const { setDoc } = firebaseFirestoreModule;

        // we make it to here with the correct data
        await setDoc(documentReference, data, { merge: true });
        
        console.log('This is never reached and firestore document is never written to.');
    },
    [documentReference],
 );

//WORKING (but ugly)
const syncData= useCallback(
   async (data) => {
      return new Promise<void>((resolve) => {
        if (!documentReference) {
          resolve();
          return;
        }

       const firebaseFirestoreModule = await import('firebase/firestore');

        const { setDoc } = firebaseFirestoreModule;

        setTimeout(async () => {
          await setDoc(documentReference, data, { merge: true });
          resolve();
        }, 25);
      });
    },
    [documentReference],
  );

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[cherylEnkidu]

Hi @builtbyjavi ,

Could you please provide the debug log when the setData hangs?

[google-oss-bot]

Hey @builtbyjavi. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[builtbyjavi]

@cherylEnkidu here are the logs as requested. The relevant logs in this case are those regarding SessionStorage this is the document that is being written to.

This is the log file without the workaround that fails to write data to the SessionStorage document. setDoc-debug.log

This is the log file with the workaround timeout that successfully writes data to the SessionStorage document. setDoc-debug-workaround.log

[builtbyjavi]

hi @cherylEnkidu just checking in, any updates on this?

[cherylEnkidu]

The team is taking a look at this ticket, we will update the ticket once we make any progress

[builtbyjavi]

@cherylEnkidu thanks! For a bit more context it seemed that auth.currentUser was not defined. I was calling setDoc "too soon" after refreshing the page? This would have been a lot easier to diagnose if an error was thrown instead of the current behavior where nothing happens.

[cherylEnkidu]

Hi @builtbyjavi ,

I tried to repo it without using the React framework but it went through. When I put your code into a React App, it failed with different error related to data format. Can you provide a minimum repo app for us to continue the investigation?

[cherylEnkidu]

It would also be helpful if you can provide a short video for refreshing the page.

[google-oss-bot]

Hey @builtbyjavi. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[google-oss-bot]

Since there haven't been any recent updates here, I am going to close this issue.

@builtbyjavi if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.