Weekly Vue News #157 - Analyze Memory Leaks in Your Nuxt App

Weekly Vue News #157 Analyze Memory Leaks in Your Nuxt App View online Hi 👋 While I don't have any personal news to share this time, I'm excited to bring you an interesting Nuxt tip on how to analyze memory leaks. Dive in and enjoy this issue! Have a lovely week ☀️ Vue 📕 Tightly Coupled Components Vue Components with Provide/Inject 👉🏻 Using provide and inject in Vue.js allows you to create tightly coupled components that can share state and behavior. 👉🏻 This pattern is particularly useful for creating reusable UI components. 📕 Vue 3 Auto Routing By File Structure 👉🏻 This article, introduces "Unplugin Vue Router", a typed, file-based routing for Vue 3. 📹 Effortless Vue Forms 👉🏻 Learn how to write your own composable that can handle forms in Vue 3. 👉🏻 The video also shows how to add submit hooks to the composable. 🛠️ Vue Grid Plan 👉🏻 A Vue 3 component to create blueprints for rooms, datacenters, racks and more. 🛠️ Vue Masonry 👉🏻 Responsive masonry layout with SSR support and zero dependencies for Vue 3. 💚 Want More Exclusive Vue Tips Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Nuxt 📗 Nuxt Tips Collection 👉🏻 Learn Nuxt in just 5 minutes a day. From Michael Thiessen. 👉🏻 117 concise, insightful tips. 👉🏻 190+ page book 👉🏻 7 code repos 👉🏻 58 days of emails 📕 Migration to Nuxt: where are we Today? 👉🏻 Malt migrated 80%+ of their applications to Nuxt since Q4 2022 - over 800k LOC. 👉🏻 Their journey has been full of learnings and challenges which they share in this article. 📹 Caching in Nitro 👉🏻 Alexander Lichter talks about Caching in Nitro - from route rules over to defineCachedHandler, cache invalidation and more. 👉🏻 Everything he explains, also applies to Nuxt. 🛠️ Nuxt Auth Utils v0.3 is out 👉🏻 For performance reasons, it now supports tree-shaking for the OAuth providers. 🔥 Analyze Memory Leaks in Your Nuxt App In one of my client projects, we recently had to analyze and fix a memory leak in our Nuxt 3+ application. Let me share my experience and our steps to identify and fix the memory leak. What is a Memory Leak? A memory leak occurs when a program allocates memory but doesn't release it when it's no longer needed. Over time, this can lead to the exhaustion of system resources and the application crashing. In our case, the memory leak caused our Kubernetes pods to restart frequently, forcing us to increase the resources allocated to the pods. However, this was only a temporary solution, and we had to find and fix the root cause of the memory leak. Finding the Memory Leak The first step in fixing a memory leak is identifying the root cause. Here are the steps we took to find the memory leak in our Nuxt application. First, it's important to note that we use Hybrid Rendering in our application, which means that the server-side rendering (SSR) and client-side rendering (CSR) are combined. Technically, a Node.js server is deployed, so we had to monitor the memory usage of the Node.js process. Step 1: Monitor Memory Usage The first step is to monitor your application's memory usage. In our case, this only happened in production, so we had to monitor the memory usage of our application's production build. To debug a production build of your Nuxt app in Visual Studio Code, you have to define a launch configuration in your .vscode/launch.json.vscode/launch.json file. Here is an example configuration: 1{ 2 "version": "0.2.0", 3 "configurations": [ 4 { 5 "type": "node", 6 "request": "launch", 7 "name": "Debug Prod Build", 8 "cwd": "${workspaceFolder}", 9 "outputCapture": "std", 10 "runtimeExecutable": "pnpm", 11 "runtimeArgs": ["build:preview"] 12 }, 13 ] 14} After configuring the launch configuration, you can start the debugger in Visual Studio Code and monitor the memory usage of the Node.js process. I recommend using the Flame Chart Visualizer for JavaScript Profiles extension, which enables you to profile the heap and CPU usage of your Node.js process in real-time. The following picture shows the Flame Chart Visualizer in action: To simulate traffic, we used oha, a tiny program that sends some load to a web application. An exemplary command to simulate traffic with ohaoha is: 1oha -c 2 -n 250 --disable-keepalive http://localhost:3000/route-that-should-be-tested Step 2: Analyze the Memory Usage In our scenario, we saw that the memory usage of the Node.js process increased over time and with each request, which indicated that there was a memory leak. Step 3: Find the Root Cause One approach to finding the root cause of a memory leak is to use git bisect to identify the commit that introduced the memory leak. This approach can be time-consuming, but it can help you narrow down the code that caused the memory leak. In our project, we identified that we defined some watchers after an awaitawait in a Nuxt page component which caused the memory leak. Because we only needed those watchers on the client, we wrapped them in the onMountedonMounted lifecycle hook which fixed the memory leak. 📅 Events PrageVue 2024 (17 September 2024, Prag, Czech Republic) vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 How to Choose the Best Rendering Strategy for Your App 👉🏻 The differences between Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), and Partial Prerendering (PPR). 📕 Node adds experimental support for TypeScript 👉🏻 Node.js has added an experimental flag called --experimental-strip-types that transpiles TypeScript source code into JavaScript source code. 🛠️ puter 👉🏻 A computer in your browser. 👉🏻 Free and open-source. 🛠️ Uptime Kuma 👉🏻 An easy-to-use self-hosted monitoring tool. 😂 Fun Comments? Join the discussion about this issue in our Discord community. Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🧵 Repost the latest X thread 📨 Reply to this email: feedback is welcome Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany