Debugging Memory Leaks in Angular

The situations where memory leaks are most likely to happen, and how you can deal with them using Chrome DevTools.

Photo by Fredy Jacob on Unsplash

Introduction to Memory Leaks

Building large applications entails writing lots of code, complex pages, long lists, and hundreds (if not more) of components. If you’ve worked at least once in a non-trivial web application, you may have found yourself battling a memory leak for hours and hours.

In this article, I want to introduce you to a number of situations where memory leaks are most likely to happen, and how you can deal with them thanks to the powerful Chrome DevTools.

Preface: Angular is a framework that does a really great job at memory management: in fact, you almost never have to do something specific to avoid memory leaks!

Nonetheless, I’ve found myself in a number of scenarios that led to mistakes resulting in memory leaks and, as a consequence, a crippled user-experience for my company’s clients.

Not good.

What’s a Memory Leak?

In layman’s terms, a memory leak occurs when an application fails to get rid of unused resources.

If the memory of an application is using more and more memory without being populated with new resources (images, text, objects, etc.), then the application is likely affected by this sort of performance degradation.

Tip: Use Bit (Github) to easily share and reuse Angular components across your projects, suggest updates, sync changes and build faster as a team.

Don’t waste time rewriting mediocre code — build awesome reusable Angular components, test them in isolation using Bit and share them on bit.dev.

Components with Bit: Easily share across projects as a team

Why Memory Leaks are tricky

The trickiest aspect of memory leaks is that they are pretty hard bugs to spot. Unlike CPU usage issues, where you can see the UI lagging, memory leaks (especially for smaller apps) are much a more subtle sort of problem.

If not also in charge of QA, the way most developers work is to focus on the context of their task, and very rarely they have to switch page dozens of times, create and re-create large lists, or in general perform long-lived actions that are naturally where memory leaks become apparent.

In fact, your applications may have dozens of memory leaks who have not yet been discovered!

Nowadays, users reload pages less and less often. As someone who works in the financial sector, I should know: traders hate reloading! The computers in offices are rarely restarted and so are browser pages.

This is why keeping performance optimal for long-lived sessions is essential: if an application is leaking memory, the user will at some point realize that it is slower, sluggish, and will likely pause very frequently.

And we don’t want our users to get frustrated. Right!?

Debugging Process

In this section, we will explore some real-world scenarios in Angular applications where it’s most likely to encounter potential mistakes that lead to memory leaks.

The irony about this article is that I planned on purposefully add mistakes in my code (using my guinea pig project Cryptofolio) to produce a memory leak.

Cryptofolio shows live crypto prices

As it turns out, it wasn’t needed! A leak was already there. All I did in order to reproduce it was to initialize the app with 101 pricers — back and forth a couple of times between pages, et voilá — the memory went nuts!

Notice: the application I am using is very small, and as a result, the mistakes won’t cause the app to crash, and more importantly, the objects retained in memory won’t be immediately easy to find in the Heap Snapshots.

Monitoring Memory with the Performance Monitor tool

The application I built allows me to display prices in two separates views: list and dashboard; these two are two different pages, so the components contained in each of them are supposed to be destroyed and collected when you navigate to another page.

The first thing to do is to open the Chrome Dev Tools, open the panel on the right and click on More Tools > Performance Monitor. The memory of our application is displayed in the blue graph.

As you can see in the image below, whenever I switch page, the memory jumps up almost 20mb!

Js heap size increasing when switching page

I keep switching back and forth, and this is the result below: