Abrupt surge in Firestore read operations detected in Next.js application following a period of no modifications - refer to the accompanying visual

https://i.sstatic.net/vim7m.png

During the initial 10 days of working on the project, I noticed a consistent range of reads between 100 - 300 per day while regularly refreshing documents from firestore. Days 11-15 were spent away from the project visiting family. On day 16, I briefly launched the project for fifteen minutes without making any changes (not realizing a spike in activity since it wasn't over quota and I wasn't actively developing or monitoring). However, today while focusing on the project, I suddenly hit my free quota limit due to a spike that occurred within two hours of starting work.

I suspect that the increased reads are originating from the clientList component in my Next.js app:

let unsubscribe;
const Clients = () => {
  const classes = useStyles();
  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      const db = firebase.firestore();
      unsubscribe = db.collection("users")
        .doc(user.uid)
        .collection("clients")
        .onSnapshot((snap) => {
          const clients = snap.docs.map((doc) => ({
            id: doc.id,
            ...doc.data(),
          }));
          unsubscribe();
          setClients(clients);
        });
    } else {
      [];
    }
  });

 

  const [clients, setClients] = useState([]);

  return (


    <Fragment>
      {clients.map((client, i) => (
        <Paper className={classes.paper} key={client.id}>
          <Typography
            className={client.name}
            color="textSecondary"
            gutterBottom
          >
            {client.name}
          </Typography>
  
        </Paper>
      ))}
    </Fragment>

  );
};

export default Clients;

Feeling panicked, I reverted my security details from:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth.uid != null;
    }
    match /users/{userId}/clients/{document=**} {
      allow read: if request.auth.uid == userId;
    }
  }
}

back to this:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    // This rule allows anyone with your database reference to view, edit,
    // and delete all data in your Firestore database. It is useful for getting
    // started, but it is configured to expire after 30 days because it
    // leaves your app open to attackers. At that time, all client
    // requests to your Firestore database will be denied.
    //
    // Make sure to write security rules for your app before that time, or else
    // all client requests to your Firestore database will be denied until you Update
    // your rules
    match /{document=**} {
      allow read, write: if request.time < timestamp.date(2019, 9, 10);
    }
  }
}

I made this change until I can verify that my original security rules were sufficient. My last commit to clientList.js was on day 10. Today, while working on the project, I was focused on implementing a feature unrelated to clientList.js or Firestore - specifically showing and hiding a form using a button.

I do not use the firebase CLI currently, and typically have one firestore dashboard chrome window open and one localhost window open during development (similar to the previous ten days when no issues arose regarding quota). There were no unauthorized authenticated users and anonymous authentication is not enabled.

If anyone has suggestions on troubleshooting this issue, I would greatly appreciate it.

Answer №1

To investigate high read usage in GCP cloud console, you can utilize the stackdriver filter with the following criteria: resource.type="datastore_database"

Common causes of unexpected usage may include:

  • Managed imports and exports.
  • Read operations triggered by active listeners during document change events.

If needed, reaching out to GCP support can provide some insight into the origin of the reads, though it might offer limited details such as the number of operations per channel (export, batch get document, watch changes, list collection IDs, list docs, query, etc)

According to this StackOverflow post, determining the exact source of the reads without implementing additional tracking logic can be challenging.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: File or directory not found, unable to locate BUILD_ID

What is the next step? Error: ENOENT: The file or directory 'C:\Janani\ticket-app.next\BUILD_ID' does not exist { errno: -4058, code: 'ENOENT', syscall: 'open', path: 'C:\Janani\ticket-app\. ...

Add buttons to images to provide further explanations

While browsing the Excel Learn website, I came across a picture that displayed buttons explaining various functions in Excel. By clicking on the picture, a menu would open up to further explain the corresponding button. If you want to see this in action, ...

What are the steps to achieve complete test coverage for my Angular login form? Encountering an issue with reading property 'subscribe' of undefined

Recently, I made adjustments to my login component to align more closely with Angular standards. However, upon testing, I encountered errors of this kind: Cannot read property 'subscribe' of undefined After using console.log for debugging pur ...

I seem to be facing a challenge with retrieving results in my app when using mongoose - what could be causing this issue

mongoose.connect('mongodb://localhost:27017/codealong'); When I attempt to connect to MongoDB and post data, the process is successful but I do not receive any results in my browser. Instead, all I see is an empty square bracket [ ]. These are ...

Utilize a while loop in JavaScript to trigger a message when a variable dips below zero

Forgive me if I seem clueless. I am a beginner in the world of Javascript and am currently experimenting with loops. At the moment, I am toying around with this particular piece of code: <!DOCTYPE html> <html> <body> <button oncl ...

Check for length validation including spaces in JavaScript

My code includes a functionality that calculates the length of characters in a text area using both JSP and JavaScript: <textarea class="textAreaLarge" id="citation" rows="20" cols="180" name="citation" ...

I created a custom discord.js-commando command to announce all the channels that my bot is currently active in, however, encountered an unexpected error

const Commando = require('discord.js-commando'); module.exports = class AnnounceCommand extends Commando.Command { constructor(client) { super(client, { name: 'announce', aliases: ['an'], ...

What strategies can I use to streamline this array update function code?

Looking to simplify my updated array function. The update function involves updating and comparing values in an array. The comparison will be done within the fruit_temp. For example, data in fruit_temp's fruit_db_id corresponds to an existing id in th ...

What is the best way to connect my markdown content to dynamic URLs in Next.js?

My preference is to set up the URL structure like this: URL Role / contains markdown content from /index.md file /about contains markdown content from /about.md file /cookies contains markdown content from /cookies.md file /privacy-policy con ...

The Benefits of Semantic Class Names compared to Microdata

As I strive to use semantic class names, my exploration of microdata and SEO raises a question: Is it necessary to use both? Compare these two HTML snippets representing an event: Using CSS classes: <div class="event" itemscope itemtype="http://schema ...

Prevent image upload until text is clicked on

When the user clicks on the mask image, a file upload dialog box is displayed. Once the user uploads an image, the text "Remove Image" is shown. Issue: Currently, users can upload another image before clicking on "Remove image". However, after clicking o ...

What could be causing Vercel to struggle with building my Next.js tsx app?

Whenever I run npm run build and npm start on my local machine, it deploys perfectly to localhost. However, when I attempt to deploy the exact same code to Vercel, I encounter the following error: 08:28:16 Failed to compile. 08:28:16 ./pages/index.ts ...

Having trouble displaying the collection data from firebase using React

I am having an issue retrieving a collection from firebase and then using a map function to loop through the documents and render some UI elements. The data is correctly logged in the console at line 20, however, the map function doesn't seem to be wo ...

Exploring ways to create additional file upload fields with distinct names through JavaScript

My latest project involved creating a button that allows users to add a file upload field, a separate button to remove a file upload field, and a counter to keep track of the total number of file upload fields. However, it appears that the fields are not b ...

How can I incorporate a counter into my ng-repeat loop in Angular?

Do you know where I can find documentation on adding a numbered count to each item returned by an ng-repeat in Angular? This is not like assigning an Id, but more like, if 4 items are returned, each JSON object could include a number before the data. Her ...

Display each new array element on a separate line

let team = [['Sara', 'John', 'Kate']] let newTeam = team.map(function(r) { return r; }) outputs [ [ 'Sara', 'John', 'Kate' ] ] Is there a way to modify it so that each value is r ...

It appears that the jQuery $.get and $.post methods are not functioning as expected

Hey everyone, I'm facing an issue with two PHP session variables that I need to clear on click. I've attempted using both $.get and $.post AJAX methods to trigger an external PHP script that should reset the values of these session variables. How ...

Issues encountered with Nextjs and Jest when trying to utilize transformIgnorePatterns with esm modules

After extensive research, I have come across several solutions for my issue. However, I am struggling to make the transform and transformIgnorePatterns work as expected. At this point, my only workaround is manually adding mock modules inside the __mocks__ ...

Discover a new approach to implementing dynamic routes without relying on getstaticpaths

My project involves using next.js and I am aiming to create a dynamic route named [id].tsx. The goal is to have a default HTML structure, with the rest of the content being generated based on the dynamic route parameters in the client-side. However, an e ...

Exploring the world of reactive programming in JavaScript by transforming traditional AJAX calls into Bacon.js streams while incorporating

How can I develop a method to convert calls to the server API to a Bacon.js / RxJs stream while supporting pagination? With pagination, I aim to keep track of the last requested item index and retrieve the next set of items based on the page size to popul ...