The statistics for Firebase usage appear to be exaggerated, leaving me curious about the reasons behind the significant increase in reads, sometimes reaching over 70

Considering the recent decision by Google to implement charges for nearly every aspect of Firebase Firestore and Firebase Cloud function usage, it is essential to optimize our code to ensure efficient execution of queries to Firestore.

I am currently conducting isolated tests to validate Firebase's usage statistics accuracy. Upon initial examination, there seems to be some discrepancy.

An interesting observation is the instantiation of an observable within the constructor of my authentication service in an Angular application during app launch, resulting in over 70 read requests. How can this be justified?

No modifications were made to the data before or after creating this observable instance.

After allowing the usage to stabilize, we launched one instance of our application following an hour of zero activity. The aforementioned observable was initiated:

this.auth$ = this.firebaseAuth.authState.pipe(
switchMap((user) => {
if (user) {
console.log("[auth service] user update:", user);
return this.firestore.doc(`users/${user.uid}`).valueChanges();
} else {
console.log("[auth service] user not signed in");
return of(null);
}
})
);

The application was closed immediately after loading.

About five minutes later, we checked the usage stats on the Firebase console only to find 70+ additional read requests against our quota. Why did this happen?

Update 1

Responding to comments below and as previously suspected, keeping the Firebase console open in a browser might contribute to extra hits on our quota. However, this explanation does not fully account for the 70+ read requests from our initial test. Could the console potentially generate reads even without navigating around? For instance, could it load unselected data such as an entire collection?

Answer №1

It is a common occurrence for individuals to question the source of reads, assuming they are originating from external sources when in reality they are coming directly from the Firebase console. The console provides real-time data updates as modifications occur within the database, with each update being counted as a read, similar to interactions from any other client application.

During testing procedures, it is advised to refrain from keeping the Firestore database viewer open. Other sections of the console may remain accessible, but the feature that reflects live changes in the database should be avoided.

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

Unit tests are failing after upgrading from Angular 14 to Angular 15

I'm currently in the process of upgrading my Angular application from version 14 to version 15. Following the steps outlined in the Angular Upgrade guide, I have successfully built the application and can run it using ng serve. However, I am facing pe ...

What is the best way to create a TypeScript function similar to a 'map' in React?

I recently started learning TS and am having trouble typing this arrow function: const mapLikeGet = (obj, key) => { if (Object.prototype.hasOwnProperty.call(obj, key)) return obj[key] } ...

It appears that Yarn is having trouble properly retrieving all the necessary files for a package

Recently, I encountered a strange issue in our project involving 3 microservices, all using the exceljs library. Two of the microservices successfully download all necessary files for this package through yarn. However, the third microservice is missing ...

The art of TypeScript data type conversion

Seeking assistance with transitioning a C# function to TypeScript/Angular JS 2: public static MyModel GetDetails(IDictionary<string, object> Obj) { MyModel dlModel = new MyModel(); if (Obj.ContainsKey("action")) dlModel.action = ((IEnumera ...

An in-depth guide on leveraging the react-router useSubmit hook in combination with input onChange and button onClick events

I'm currently working on creating a search bar with a clear button using the useSubmit hook from react-router. The goal is to submit the search query both on input change and button click. SearchBar.tsx import { Form, useSubmit } from 'react-rou ...

Maintain user authentication in Firebase as long as the localStorage object remains active

I am currently working on an app using Ionic, Angular2, and Firebase. My approach involves saving the auth.currentUser information in the localStorage when a user logs in or registers. However, I recently discovered that having the user variable set in th ...

The disappearance of ngx-charts lines is observed when the chart is rendered within a PrimeNG dialog that gets closed and reopened

In my TypeScript Angular application, I am currently incorporating PrimeNG. Specifically, I am utilizing the dialog component from PrimeNG to display charts using ngx-charts, specifically the ngx-charts-line-chart module. Initially, when I open the dialo ...

Divide a string using multiple delimiters just one time

Having trouble splitting a string with various delimiters just once? It can be tricky! For instance: test/date-2020-02-10Xinfo My goal is to create an array like this: [test,Date,2020-02-10,info] I've experimented with different approaches, such ...

Utilizing the 'as' prop for polymorphism in styled-components with TypeScript

Attempting to create a Typography react component. Using the variant input prop as an index in the VariantsMap object to retrieve the corresponding HTML tag name. Utilizing the styled-components 'as' polymorphic prop to display it as the select ...

Getter and Setter Implementation in Typescript without Using Classes

Check out these various SO questions discussing Typescript getters/setters: from 2015, Jan 2018, Sept 2018, and more. Now, the question arises - what is the best approach to define Typescript types for getters/setters in a plain JavaScript object without ...

The page does not appear to be updating after the onClick event when using the useState hook

Having difficulty re-rendering the page after updating state using the useState hook. Although the state value changes, the page does not refresh. export function changeLanguage(props: Props) { const [languageChange, setLanguageChange] = React.useState( ...

Angular input form is throwing an error because it is unable to retrieve the property 'name' of an undefined value

I've been working on creating a simple Angular component following a tutorial I found. The component fetches data from an angular-in-memory-web-api using a service called UserService. I have also added an input form for creating new users. The issue ...

Issue with TypeScript: Rxjs uses different syntax for setTimeout compared to what is defined in @types/node

System Information: Node version: v11.7.0 RxJS version: 6.3.3 @types/node version: 8.10.45 tsc version: 3.2.4 During the execution of tsc, it appears that there is an issue within Rxjs where the setTimeout function is being called without specifying th ...

Encountering Maximum Call Stack Size Error When Integrating PrimeNg Table Module into Component

I recently encountered an issue with my Angular component npm package when I tried to incorporate a p-table into my HTML. The problem seems to be originating from the components module file. Adding the primeNg tableModule to my app.module file works fine, ...

We regret to inform you that the Serverless Function in NextJs has surpassed the maximum size limit of 50mb

Recently, I've started working with NextJs and encountered an issue while attempting to deploy my project on Vercel. The error message that popped up looked like this: Error! The Serverless Function "api/auth" exceeds the maximum size limit of 50mb, ...

Enabling Event bus suggestions for Typescript: A step-by-step guide

Hello, I've encountered an issue while attempting to add types for the TinyEmitter library. Specifically, I need to define two methods. First: addEventListener(e: string, (...args: any[]) => void): void; Second: emit(e: string, ...args: any[]): vo ...

What are the steps to add code into the Monaco Editor using Playwright?

As I explore the world of Playwright, I am faced with a challenge regarding testing a feature that involves a monaco editor. Unfortunately, my search in Playwright documentation and forums did not yield any relevant information. Here is the test scenario ...

Angular 6's subscribe method is causing the UI to not update

I'm currently facing an issue where my component does not refresh the UI after I input data. I always have to manually refresh the page to see the changes. I suspect there might be a problem with the .subscribe method in Angular 6. Previously, when I ...

When selecting the "Open Link in New Tab" option in Chrome, the Angular app's routing will automatically redirect to the login page

I am facing a peculiar issue in my Angular 2 application that I need help troubleshooting. Currently, the routing within my app functions as intended when I click on links to navigate between different components. Here is an example of how the routing path ...

How can I ensure that all the text is always in lowercase in my Angular project?

Is there a way to ensure that when a user enters text into an input field to search for a chip, the text is always converted to lowercase before being processed? Currently, it seems possible for a user to create multiple chips with variations in capitaliza ...