Can not found leaks! (not as expected)

[quyatong]

I created a SPA. The code was written below.

import * as React from "react";
import { Routes, Route, Outlet, Link } from "react-router-dom";
window.cache = [];
export default function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    </div>
  );
}

function Layout() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <hr />
      <Outlet />
    </div>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  let cache = []
  for(let i = 0; i < 100000; i++) {
    cache.push({index: i});
  } 
  window.cache.push(cache);
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

scenario file:

function url() {
  return 'http://127.0.0.1:3000/';
}
async function action(page) {
  // puppeteer page API
  await page.click('a[href="/about"]');
}
async function back(page) {
  // puppeteer page API
  await page.click('a[href="/"]');
}
module.exports = {action, back, url};

I wonder how to define whether there are leaks, tks for your answer~

[JacksonGL]

@quyatong By default, {index: i} is not considered as memory leak by MemLab (it could be cache as your example app labeled). MemLab supports self-defined leak detector with the leakFilter callback.

You can start with marking all objects allocated as leak and then refine the leak detector based on your app:

leakFilter(node, snapshot, leakedNodeIds) {
  return true;
}

Note: the callback could also be defined in the scenario file.

[JacksonGL]

Also check out this doc:
https://facebook.github.io/memlab/docs/guides/guides-find-leaks

[quyatong]

Great, thank you very much, I understood more about the MemLab