Error Parsing data load from Firebase

Hey team. I hooked my React Studio app to Firebase a couple of months back. When I preview, it’s clearly pulling in data from my Cloud Firestore, I’ve since added new values to the data in Firebase, and get this error when I try to reload the data. How do I re-connect Studio to Firebase?

It will still show you the data the was previously loaded when you open it back up from my experience. I’ll bet you have the standard firebase firestore rules in place and now it’s not allowing you to authenticate. Can you share or post a picture of your rules? I can help you put the right ones in place.

Thanks for offering to help! I think the rules we have set up ATM are overly-permissive, if anything. (Firebase sure thinks so). Should I change mine to reflect yours above?

That’s not the issue then. You should update those rules though. Is your collection name still the exact same as what you are calling it now? Did you move it around to another location in your firestore or rename it? If you are comfortable posting a screenshot of your firestore table structure so we can see it - that would help.

Here are my firebase firestore rules for reference -

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /user_account/{uid} {
      allow read,write: if request.auth.uid == uid;

      match /checkout_sessions/{id} {
        allow read, write: if request.auth.uid == uid;
      }
      match /subscriptions/{id} {
        allow read: if request.auth.uid == uid;
      }
    }

    match /products/{id} {
      allow read: if true;

      match /prices/{id} {
        allow read: if true;
      }

      match /tax_rates/{id} {
        allow read: if true;
      }
    }

    match /digital_iq_history/{name} {
      allow read: if true;
      allow write: if request.auth != null;
    }

    match /directory/{name} {
      allow read: if true;
      allow write: if request.auth != null;
    }

    match /growth_tools/{name} {
      allow read: if true;
      allow write: if request.auth != null;
    }

    match /history/{name} {
      allow read: if true;
      allow write: if request.auth != null;
    }

    match /industries/{name} {
      allow read: if true;
      allow write: if request.auth != null;
    }

    match /markets_current/{name} {
      allow read: if true;
      allow write: if request.auth != null;
    }
    
    match /markets_current/{name}/brands/{brand} {
      allow read: if true;
      allow write: if request.auth != null;
    }

    match /news/{name} {
      allow read: if true;
      allow write: if request.auth != null;
    }
    
    match /news/{name}/articles/{article_name} {
      allow read: if true;
      allow write: if request.auth != null;
    }
    
    function hasPremiumSubs() {
      return request.auth.token.stripeRole == "premium";
    }

    match /history/{name}/records/{record} {
      allow read: if hasPremiumSubs();
    }

    match /history/{name}/news/{record} {
      allow read: if hasPremiumSubs();
    }

    match /history/{name}/tips/{record} {
      allow read: if hasPremiumSubs();
    }

    match /history/{name}/app_store_reviews/{record} {
      allow read: if hasPremiumSubs();
    }
    
  }
}

You can be dynamic with them and make certain parts of your DB public while making other auth required.

Hi,

My first guess was that database rules have been changed but it seems that your rules are exactly the same. I would check that the collection name has not been changed.

You can also test to create a test collection with couple documents and check if that loads to studio.

Thanks folks. I haven’t changed the name of the collection involved, and the previews still seem to be drawing data from the Firebase just fine. Here’s what my collection looks like:

I think the preview you are seeing is the data that was loaded the last time it actually worked. Can you check your Firebase Data Plugin setup and make sure the right details are in place? Match it with the web sdk config settings in Firebase? Also shown here - https://youtu.be/35X4Zidhn_g

Team, this is getting weirder every day. When I navigate to the Authentication page, I don’t have a Web Setup button:

That would explain why it does allow React Studio to load data. You need to have Web configuration set in Firestore and in the plugin settings.

That’s very odd. As I mentioned below, I’ve already hooked the two systems together, and they’re already sharing data. How, then, do I set up web configuration?

For reference, I’m using this tutorial: https://firebase.google.com/docs/web/setup

You need to create a web app from the project settings. See here -

Yup. Already had that setup. Like I’ve been saying, I’ve already set all this up. The two systems are connected and are sharing data. I’ve got an extra-weird behavior I’m going to share here in a minute as well. Here’s a screenshot, though, showing that we already have the apps on that screen:

Okay. This is really weird. Get your tinfoil hats ready.

Last night I was working with an Engineer buddy to try to fix this. We created a new sheet and tried hooking it up to the Firebase like the original. It failed, just as we’d expected.

We then started going through entries in the Firebase, deleting each one and testing the Reload to see whether that was the entry that’s breaking the process. At some point, I dropped by the new data sheet, expecting it to be empty. It wasn’t.

Not only did all of the columns on the original data sheet pull over, but the new values that had been missing pulled in as well. However, none of those values showed up as Carried Property. Further, that new sheet still couldn’t reload.

Hey, one other thing while I’m here, and sorry to veer off a second: What determines the order the columns load into a data sheet? This is definitely not the order they show up on Firebase (alphabetical), and when I rearrange them on the data sheet, back when I could reload data, it seemed to snap back to the original, scrambled configuration. What’s extra-weird here is that I’m pretty sure the order they populated on the test sheet (above) was different than the original.

I’m going to go back to deleting entries until I find the one that’s breaking the reload, and will report back what I find.

Thanks again.

1 Like

Update: I went through the documents on the Firebase Collection from which I’m drawing data, deleting one after another, attempting to reload data in Studio after each one. After deleting one, it let me reload once, then returned to giving me the parse error. The same thing happened with a second entry, further down the list. When I removed a third, it let me reload as hoped. I then loaded that document’s values into another test collection in Firebase, tried to load it into Studio and it also worked. Adding the other two suspicious entries, and it still worked. Reloading the original data collection, I then found and removed the third entry that, removing, allowed the data to be reloaded. Reloading gave the stated parse error. Removing the other two suspicious documents and reloading gave the parse error. I’m kind of out of ideas here. Please advise.

Can you send us the project file for us to test it out? If yes then send it to hello@neonto.com