Thomas Camlong
8f18b17207
The container-only harness was measuring the wrong thing. Real usage — several tabs, several boards, clicking into widgets — reaches ~880 MB server and a 650 MB *browser* heap, and the browser was never measured at all. Profiling build: `docker build --build-arg HOMARR_PROFILING=true . -t homarr:performance`. React's production bundle strips the hooks DevTools needs, hence "Profiling not supported". Note reactProductionProfiling in next.config is read only by the webpack path; under Turbopack it comes from `next build --profile`, and turbo strips any env var not declared in the task's `env`, so all three had to line up before the flag actually took effect — verified by markers present only in React's profiling bundle, and static chunks going 20 -> 84 MB with source maps. inspect-container.mts attaches to an already-running container (SIGUSR1 opens Node's inspector — no rebuild, no restart), reports cgroup/per-process/V8 memory and can pull a heap snapshot out over CDP. The inspected context has no require and no dynamic import, so it reads globals and uses CDP domains instead. analyze-heapsnapshot / analyze-react-fibers / analyze-heap-retainers summarise a snapshot too large for DevTools to open. Harness now opens STRESS_BOARDS across STRESS_TABS_PER_BOARD tabs, clicks into widgets, and records browser heap, DOM nodes and listener count via CDP. Performance.getMetrics silently returns nothing unless the domain is enabled, which is why the first run reported a 0 MiB client heap.
74 lines
2.5 KiB
JavaScript
74 lines
2.5 KiB
JavaScript
// Aggregates React Fiber nodes by their `type`/`elementType` target, giving a
|
|
// component/element histogram of the live tree — i.e. what is actually mounted.
|
|
import { readFileSync } from "node:fs";
|
|
|
|
const snap = JSON.parse(readFileSync(process.argv[2], "utf8"));
|
|
const meta = snap.snapshot.meta;
|
|
|
|
const nf = meta.node_fields;
|
|
const nStride = nf.length;
|
|
const nType = nf.indexOf("type");
|
|
const nName = nf.indexOf("name");
|
|
const nEdgeCount = nf.indexOf("edge_count");
|
|
const nodeTypes = meta.node_types[0];
|
|
|
|
const ef = meta.edge_fields;
|
|
const eStride = ef.length;
|
|
const eType = ef.indexOf("type");
|
|
const eName = ef.indexOf("name_or_index");
|
|
const eTo = ef.indexOf("to_node");
|
|
const edgeTypes = meta.edge_types[0];
|
|
|
|
const nodes = snap.nodes;
|
|
const edges = snap.edges;
|
|
const strings = snap.strings;
|
|
const N = snap.snapshot.node_count;
|
|
const E = snap.snapshot.edge_count;
|
|
|
|
const nodeName = (o) => strings[nodes[o * nStride + nName]] ?? "";
|
|
const nodeTypeName = (o) => nodeTypes[nodes[o * nStride + nType]] ?? "?";
|
|
|
|
const firstEdge = new Uint32Array(N + 1);
|
|
for (let o = 0, acc = 0; o < N; o++) {
|
|
firstEdge[o] = acc;
|
|
acc += nodes[o * nStride + nEdgeCount];
|
|
}
|
|
firstEdge[N] = E;
|
|
|
|
const fiberClass = process.argv[3] ?? "rb";
|
|
const hist = new Map();
|
|
let fibers = 0;
|
|
let withoutType = 0;
|
|
|
|
for (let o = 0; o < N; o++) {
|
|
if (nodeName(o) !== fiberClass || nodeTypeName(o) !== "object") continue;
|
|
fibers++;
|
|
let label = null;
|
|
for (let e = firstEdge[o]; e < firstEdge[o + 1]; e++) {
|
|
const et = edgeTypes[edges[e * eStride + eType]];
|
|
if (et === "element" || et === "hidden") continue;
|
|
const prop = strings[edges[e * eStride + eName]];
|
|
if (prop !== "type" && prop !== "elementType") continue;
|
|
const dst = edges[e * eStride + eTo] / nStride;
|
|
const dt = nodeTypeName(dst);
|
|
const dn = nodeName(dst);
|
|
// Host elements point at a string ("div"); components at a closure/object.
|
|
if (dt === "string" || dt === "concatenated string") label = `<${dn}>`;
|
|
else if (dn) label = `${dt}:${dn}`;
|
|
else label = `${dt}:(anonymous)`;
|
|
if (prop === "type") break;
|
|
}
|
|
if (!label) {
|
|
withoutType++;
|
|
continue;
|
|
}
|
|
hist.set(label, (hist.get(label) ?? 0) + 1);
|
|
}
|
|
|
|
console.log(`live fibers: ${fibers.toLocaleString()} (no type edge: ${withoutType.toLocaleString()})`);
|
|
console.log(`distinct types: ${hist.size}\n`);
|
|
console.log("count".padStart(9), " fiber type");
|
|
for (const [k, v] of [...hist.entries()].sort((a, b) => b[1] - a[1]).slice(0, 40)) {
|
|
console.log(String(v).padStart(9), ` ${k.slice(0, 90)}`);
|
|
}
|