Memory leak in Vue.js: the story of an insidious bug

If you develop an application in Vue.js, you constantly need to control memory leaks. This is especially true for SPA applications with dynamic component loading. By architectural design, users should not refresh the browser, so component cleanup and garbage collection should be performed by the application itself.

Today we are going to analyze a real case from e-commerce practice, where an innocuous checkbox “Show promotions” caused an avalanche-like load on the server.

One of my old friends approached me with a very interesting problem. He has a rather old online store made in Vue.js + Symfony and some users complained about incorrect work of the site. From time to time, the online store stopped showing prices and responding to user requests. The problem was complicated by the fact that it was impossible to reproduce this bug, as it did not appear for everyone and only periodically.

Nevertheless, in the process of analyzing the users' behavior and personally talking to them, I managed to get valuable information that helped me to identify the problematic component and fix the bug. In particular, one of the users stated that he went through the product cards, clicked on the discount tracking checkbox, then turned it off. That's when everything became clear to me.

Bottom line: zombie timers

Usage Scenario:

A product page user enables the “Track live discounts” option:

The frontend starts polling /api/live-discounts every 30 seconds
When unchecked, the component is hidden, but...
The timer keeps running!

Here is the component itself, PriceTracker.component.vue (parent component), where the error was found:

<template>
  <div class="product-page">
    <h2>{{ product.name }}</h2>
    <p>Base Price: {{ formatCurrency(product.basePrice) }}</p>
    
    <label class="real-time-toggle">
      <input type="checkbox" v-model="enableRealTimeUpdates" />
      Track real-time discounts
    </label>

    <RealTimeDiscounts 
      v-if="enableRealTimeUpdates" 
      :product-id="product.id"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import RealTimeDiscounts from './RealTimeDiscounts.vue';
import { useProductStore } from '@/stores/product';
import { formatCurrency } from '@/utils/currency';

const productStore = useProductStore();
const product = productStore.currentProduct;
const enableRealTimeUpdates = ref(false);
</script>

There is nothing unusual here. We have a checkbox which, when activated, loads a child component:

RealTimeDiscounts.component.vue:

<template>
  <div class="discount-widget">
    <div v-if="loading" class="loading">Updating prices...</div>
    <div v-else class="discounts">
      <p class="discount">Current Discount: {{ currentDiscount }}%</p>
      <p class="final-price">Final Price: {{ formatCurrency(finalPrice) }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useDiscountApi } from '@/api/discount';
import { formatCurrency } from '@/utils/currency';

const props = defineProps<{
  productId: string;
}>();

const { fetchLiveDiscount } = useDiscountApi();
const currentDiscount = ref(0);
const loading = ref(false);
let updateInterval: number | undefined;

const startPriceUpdates = () => {
  updateInterval = window.setInterval(async () => {
    loading.value = true;
    try {
      const discount = await fetchLiveDiscount(props.productId);
      
      currentDiscount.value = Math.max(
        currentDiscount.value,
        discount.value
      );
    } catch (error) {
      console.error('Discount update failed:', error);
    } finally {
      loading.value = false;
    }
  }, 30000); // Каждые 30 секунд
};

onMounted(startPriceUpdates);


const finalPrice = computed(() => {
  return product.basePrice * (1 - currentDiscount.value / 100);
});
</script>

In this example, we load a component that makes an API request and then use the show/hide button with the v-if directive to add and remove it from the virtual DOM. The problem in this example is that the v-if directive removes the parent element from the DOM, but we didn't clean up the additional DOM fragments created by the child component, resulting in a memory leak.

What we have as a result:

When the checkbox is toggled, new intervals are created and gradually accumulate in memory
Old intervals continue to send requests to `/api/live-discounts`.
Slow responses may arrive in the wrong order, creating a race condition
With constant checkbox switching - avalanche of requests to the backend.

How it all looked from the user's point of view:

User enables “Track real-time discounts”
Component starts interval #1
After 25 seconds the user turns off the checkbox.
Interval #1 continues to run
After 30 sec interval #1 makes a request
User turns the checkbox back on
Interval #2 starts
Now two parallel intervals are sending requests
Eventually, with constant requests to the server, the user periodically receives an error from the server, as a result of which, some components stop receiving the necessary information for display.
The site gradually begins to produce more and more errors until the user completely reloads the page.

The simplest variant of how you can fix such a bug:

// RealTimeDiscounts.component.vue
import { onUnmounted } from 'vue';

const abortController = new AbortController();

const startPriceUpdates = () => {
  updateInterval = window.setInterval(async () => {
    if (abortController.signal.aborted) return;

    try {
      const discount = await fetchLiveDiscount(
        props.productId, 
        { signal: abortController.signal }
      );
      
      currentDiscount.value = discount.value;
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Discount update failed:', error);
      }
    }
  }, 30000);
};

onUnmounted(() => {
  clearInterval(updateInterval);
  abortController.abort();
});

import { debounce } from 'lodash-es';

const updateDiscount = debounce((newValue: number) => {
  currentDiscount.value = newValue;
}, 1000);

Additionally, we will need to do some refactoring to not only fix the bug, but also to improve performance overall.

1. exponential bekoff on errors:

let retryCount = 0;
const baseDelay = 30000;

const startPriceUpdates = () => {
  updateInterval = window.setInterval(async () => {
    try {
      await fetchDiscount();
      retryCount = 0;
    } catch (error) {
      retryCount++;
      const delay = baseDelay * Math.pow(2, retryCount);
      setTimeout(startPriceUpdates, delay);
      return;
    }
  }, baseDelay);
};

2. Why not keep statistics of requests:

const metrics = {
  requests: 0,
  errors: 0,
  lastUpdate: null as Date | null
};

setInterval(() => {
  if (metrics.requests > 0) {
    sendMetricsToServer(metrics);
  }
}, 300000);

3. we will also need to refactor the server API: