What could be causing the increasing memory usage in my web application every time a server request is made?

Question

What could be causing the increasing memory usage in my web application every time a server request is made?

My real-time app constantly calls a function to retrieve the latest data:

getInformation() {
    this.dateService.getDates().subscribe((data: Appointment[]) => {
      this.totalDates = data;
    });
    this.presentationService.getPresentations().subscribe((data: Presentation[]) => {
      this.totalPresentations = data;
    });
    this.roomService.getBookings().subscribe((data: Booking[]) => {
      this.totalBookings = data;
    })
  }

However, with each call, the RAM usage in the task manager increases by 0-1 MB. While this has not been an issue on my Windows PC, I am concerned about running this web-app on a Raspberry Pi kiosk system. The specific model I'm using only has 926 MB of RAM, and after approximately 20 minutes, it maxes out causing the system to freeze.

I attempted reducing the frequency of calling the function (e.g., every 3 seconds), but this only resulted in a more rapid decrease in available RAM.

angular typescript

Answer 1

Answer №1

each passing second prompts a call to this function

This situation presents a problem. It appears that each call initiates an HTTP request (presumably to the same domain). Most browsers have a limit on the maximum number of simultaneous connections to a domain (such as Chrome with a limit of 6). One possible solution is to utilize RxJS, specifically using forkJoin and unsubscribe from previous requests to cancel any pending requests before making another one. Consider implementing the following:

import { forkJoin } from 'rxjs';

class SomeComponent implements OnInit, OnDestroy {
  infoSubscription: any;

  getInformation() {
    if (this.infoSubscription) {
      this.infoSubscription.unsubscribe();
    }

    this.infoSubscription = forkJoin({
        dates: this.dateService.getDates(),
        presentations: this.presentationService.getPresentations(),
        bookings: this.roomService.getBookings()
      }
    )
    .subscribe(
      response => {
        this.totalDates = response.dates;
        this.totalPresentations = response.presentations;
        this.totalBookings = response.bookings;
      }
    );
  }

  ngOnDestroy() {
    if (this.infoSubscription) {
      this.infoSubscription.unsubscribe();
    }
  }
}

While this approach still involves manual triggering of a request every second, there is a risk of losing information if the backend takes longer than a second to respond. A better solution in this scenario would be to implement Server-Sent Events.

Answer 2

each passing second prompts a call to this function

This situation presents a problem. It appears that each call initiates an HTTP request (presumably to the same domain). Most browsers have a limit on the maximum number of simultaneous connections to a domain (such as Chrome with a limit of 6). One possible solution is to utilize RxJS, specifically using forkJoin and unsubscribe from previous requests to cancel any pending requests before making another one. Consider implementing the following:

import { forkJoin } from 'rxjs';

class SomeComponent implements OnInit, OnDestroy {
  infoSubscription: any;

  getInformation() {
    if (this.infoSubscription) {
      this.infoSubscription.unsubscribe();
    }

    this.infoSubscription = forkJoin({
        dates: this.dateService.getDates(),
        presentations: this.presentationService.getPresentations(),
        bookings: this.roomService.getBookings()
      }
    )
    .subscribe(
      response => {
        this.totalDates = response.dates;
        this.totalPresentations = response.presentations;
        this.totalBookings = response.bookings;
      }
    );
  }

  ngOnDestroy() {
    if (this.infoSubscription) {
      this.infoSubscription.unsubscribe();
    }
  }
}

While this approach still involves manual triggering of a request every second, there is a risk of losing information if the backend takes longer than a second to respond. A better solution in this scenario would be to implement Server-Sent Events.

Answer 3

Answer №2

The reason could be the frequent subscription call triggers!

Answer 4

The reason could be the frequent subscription call triggers!

Answer 5

Answer №3

It seems like you are utilizing the setInterval method, which may lead to a buildup of stack frames on the heap. The multiple subscriptions you have should not impact memory significantly, as long as the Observable completes properly. To optimize your code in a more rxjs fashion, consider the following approach:

By restructuring your call as shown below, you only need to invoke getInformation() once:

getInformation() {
  interval(1000, animationFrameScheduler).pipe(
    switchMap(() => forkJoin({
      dates: this.dateService.getDates(),
      presentations: this.presentationService.getPresentations(),
      bookings: this.roomService.getBookings()
    }))
  ).subscribe(({ dates, presentations, bookings }) => {
    this.totalDates = dates;
    this.totalPresentations = presentations;
    this.totalBookings = bookings;
  });
}

You can experiment with different schedulers such as the animationFrameScheduler instead of the default asyncScheduler, which may reduce the number of stack frames generated.

Answer 6

It seems like you are utilizing the setInterval method, which may lead to a buildup of stack frames on the heap. The multiple subscriptions you have should not impact memory significantly, as long as the Observable completes properly. To optimize your code in a more rxjs fashion, consider the following approach:

By restructuring your call as shown below, you only need to invoke getInformation() once:

getInformation() {
  interval(1000, animationFrameScheduler).pipe(
    switchMap(() => forkJoin({
      dates: this.dateService.getDates(),
      presentations: this.presentationService.getPresentations(),
      bookings: this.roomService.getBookings()
    }))
  ).subscribe(({ dates, presentations, bookings }) => {
    this.totalDates = dates;
    this.totalPresentations = presentations;
    this.totalBookings = bookings;
  });
}

You can experiment with different schedulers such as the animationFrameScheduler instead of the default asyncScheduler, which may reduce the number of stack frames generated.

What could be causing the increasing memory usage in my web application every time a server request is made?

Answer №1

Answer №2

Answer №3

Similar questions

Unable to bind input data with interface in Ionic 4 – issues persist

Is it possible to use programming to invoke a function with the identical name from within another function in Javascript or Typescript?

I'm looking to convert this typescript function to return an array with strong typing instead of just a plain string[]

The configuration file for Typescript and Typeorm, specifically the .ts file, is encountering an error

How to retrieve query parameters using Angular 2's HTTP GET method

Guide for using two Async Pipe functions in Angular 7

Respond to unsuccessful changes within a simple presentational element

How do I access the main outlet route in Angular 8 while being in a different router outlet?

Display a second dialog to the left of the first dialog at the same level using Angular Material

Creating a custom function in TypeScript to redefine the functionality of the `in` operator

Service consumption across various components is failing to function as intended

Restoring scroll position in Next.js when the page is reloaded

When using NodeJS and TypeScript, the URL query function may encounter issues when multiple parameters are included

Angular: Implementing a dialog in a component with an established constructor

"Capture the selected option from a dropdown menu and display it on the console: A step-by-step

Angular version 4 JSONP request callback

Trouble with Angular not Displaying BootStrap 5.0 Styles

When importing a React Component with styling into the pages folder, it fails to function properly

Employing [style.something.px]="2" in Angular to specify the thickness of the border

Changing the value of an object in Angular can be achieved by utilizing the two