Reduce memory overhead of observable caches

These caches are using for formatting & encoding-test results, but the
overhead of each cache was significant once you were holding a few tens
of thousands of them. Now they're simpler (object much smaller than map)
and only instantiated when actually used.

Author: pimterry

src/components/editor/content-viewer.tsx

@@ -14,6 +14,7 @@ import { getHeaderValue } from '../../util/headers';
 
 import { ViewableContentType } from '../../model/events/content-types';
 import { Formatters, isEditorFormatter } from '../../model/events/body-formatting';
+import { ObservableCache } from '../../model/observable-cache';
 
 import { ContainerSizedEditor, SelfSizedEditor } from './base-editor';
 import { LoadingCardContent } from '../common/loading-card';
@@ -27,7 +28,7 @@ interface ContentViewerProps {
     headers?: Headers;
     contentType: ViewableContentType;
     editorNode: portals.HtmlPortalNode<typeof SelfSizedEditor | typeof ContainerSizedEditor>;
-    cache: Map<Symbol, unknown>;
+    cache: ObservableCache;
 
     // See BaseEditor.props.contentid
     contentId: string | null;

src/model/events/bodies.ts

@@ -2,12 +2,13 @@ import { IObservableValue, observable, action } from 'mobx';
 
 import { testEncodingsAsync } from '../../services/ui-worker-api';
 import { ExchangeMessage } from '../../types';
+import { ObservableCache } from '../observable-cache';
 
 const EncodedSizesCacheKey = Symbol('encoded-body-test');
 type EncodedBodySizes = { [encoding: string]: number };
-type EncodedSizesCache = Map<typeof EncodedSizesCacheKey,
-    IObservableValue<EncodedBodySizes | undefined> | undefined
->;
+type EncodedSizesCache = ObservableCache<{
+    [EncodedSizesCacheKey]: IObservableValue<EncodedBodySizes | undefined> | undefined
+}>;
 
 export function testEncodings(message: ExchangeMessage): EncodedBodySizes | undefined {
     if (!message.body.isDecoded()) return;

src/model/events/body-formatting.ts

@@ -12,7 +12,7 @@ import { ImageViewer } from '../../components/editor/image-viewer';
 
 export interface EditorFormatter {
     language: string;
-    cacheKey: Symbol;
+    cacheKey: symbol;
     isEditApplicable: boolean; // Can you apply this manually during editing to format an input?
     render(content: Buffer, headers?: Headers): string | ObservablePromise<string>;
 }

src/model/events/event-base.ts

@@ -42,9 +42,4 @@ export abstract class HTKEventBase {
     public get pinned(): boolean { return this._pinned; }
     public set pinned(value: boolean) { this._pinned = value; }
 
-    // Logic elsewhere can put values into these caches to cache calculations
-    // about this event weakly, so they GC with the event.
-    // Keyed by symbols only, so we know we never have conflicts.
-    public cache = observable.map(new Map<symbol, unknown>(), { deep: false });
-
 }

src/model/events/stream-message.ts

@@ -2,13 +2,14 @@ import { computed, observable } from 'mobx';
 
 import { InputStreamMessage } from "../../types";
 import { asBuffer } from '../../util/buffer';
+import { ObservableCache } from '../observable-cache';
 
 export class StreamMessage {
 
     @observable
     private inputMessage: InputStreamMessage;
 
-    public readonly cache = observable.map(new Map<symbol, unknown>(), { deep: false });
+    public readonly cache = new ObservableCache();
 
     constructor(
         inputMessage: InputStreamMessage,

src/model/http/exchange.ts

@@ -42,6 +42,7 @@ import {
     getDummyResponseBreakpoint
 } from './exchange-breakpoint';
 import { UpstreamHttpExchange } from './upstream-exchange';
+import { ObservableCache } from '../observable-cache';
 
 const HTTP_VERSIONS = [0.9, 1.0, 1.1, 2.0, 3.0] as const;
 export type HttpVersion = typeof HTTP_VERSIONS[number];
@@ -93,7 +94,7 @@ function addRequestMetadata(request: InputRequest): HtkRequest {
                 : parseSource(request.headers['user-agent']),
             body: new HttpBody(request, request.headers),
             contentType: getContentType(getHeaderValue(request.headers, 'content-type')) || 'text',
-            cache: observable.map(new Map<symbol, unknown>(), { deep: false })
+            cache: new ObservableCache()
         }) as HtkRequest;
     } catch (e) {
         console.log(`Failed to parse request for ${request.url} (${request.protocol}://${request.hostname})`);
@@ -105,7 +106,7 @@ function addResponseMetadata(response: InputResponse): HtkResponse {
     return Object.assign(response, {
         body: new HttpBody(response, response.headers),
         contentType: getContentType(getHeaderValue(response.headers, 'content-type')) || 'text',
-        cache: observable.map(new Map<symbol, unknown>(), { deep: false })
+        cache: new ObservableCache()
     }) as HtkResponse;
 }
 
@@ -340,8 +341,6 @@ export class HttpExchange extends HTKEventBase implements ViewableHttpExchange {
     // definitively unlinked, since some browser issues can result in exchanges not GCing immediately.
     // Important: for safety, this leaves the exchange in a *VALID* but reset state - not a totally blank one.
     cleanup() {
-        this.cache.clear();
-
         this.request.cache.clear();
         this.request.body.cleanup();
 

src/model/http/upstream-exchange.ts

@@ -24,6 +24,7 @@ import {
 } from './exchange';
 import { parseSource } from './sources';
 import { HTKEventBase } from '../events/event-base';
+import { ObservableCache } from '../observable-cache';
 
 const upstreamRequestToUrl = (request: InputRuleEventDataMap['passthrough-request-head']): ParsedUrl => {
     const portString = request.port ? `:${request.port}` : '';
@@ -135,7 +136,7 @@ export class UpstreamHttpExchange extends HTKEventBase implements ViewableHttpEx
             timingEvents: this.timingEvents,
             tags: downstreamReq.tags,
 
-            cache: observable.map(new Map<symbol, unknown>(), { deep: false }),
+            cache: new ObservableCache(),
 
             parsedUrl: url || downstreamReq.parsedUrl,
             url: url?.toString() || downstreamReq.url,
@@ -177,7 +178,7 @@ export class UpstreamHttpExchange extends HTKEventBase implements ViewableHttpEx
             timingEvents: this.timingEvents,
             tags: this.tags,
 
-            cache: observable.map(new Map<symbol, unknown>(), { deep: false }),
+            cache: new ObservableCache(),
             contentType: getContentType(getHeaderValue(rawHeaders, 'content-type')) || 'text',
 
             statusCode,
@@ -319,8 +320,6 @@ export class UpstreamHttpExchange extends HTKEventBase implements ViewableHttpEx
     }
 
     cleanup() {
-        this.cache.clear();
-
         this.request.cache.clear();
         this.request.body.cleanup();
 

src/model/observable-cache.ts

@@ -0,0 +1,41 @@
+import { observable } from 'mobx';
+
+/**
+ * An observable symbol-only cache, for storing calculated data
+ * that is expensive to compute, and linking it to individual
+ * messages (meaning messages can also actively clean it up).
+ */
+export class ObservableCache<T extends {
+    [key: symbol]: unknown
+} = {
+    [key: symbol]: unknown
+}> {
+
+    // Due to the per-message per-exchange overhead of this, we avoid actually
+    // instantiating each cache until somebody tries to use it.
+    #lazyInstData: T | undefined = undefined;
+
+    get #data(): T {
+        if (this.#lazyInstData === undefined) {
+            this.#lazyInstData = observable.object<{
+                [key: symbol]: any
+            }>({}, {}, { deep: false }) as any as T;
+        }
+        return this.#lazyInstData;
+    }
+
+    get<K extends keyof T>(key: K): T[K] | undefined {
+        return this.#data[key] as T[K] | undefined;
+    }
+
+    set<K extends keyof T>(key: K, value: T[K]): void {
+        this.#data[key] = value;
+    }
+
+    clear(): void {
+        for (let key of Object.getOwnPropertySymbols(this.#data)) {
+            delete this.#data[key];
+        }
+    }
+
+}

src/model/webrtc/rtc-connection.ts

@@ -5,6 +5,7 @@
 
 import { action, observable, computed } from "mobx";
 import { SelectedRTCCandidate } from "mockrtc";
+
 import {
     InputRTCPeerConnected,
     InputRTCExternalPeerAttached,
@@ -13,6 +14,7 @@ import {
 } from "../../types";
 import { HTKEventBase } from "../events/event-base";
 import { parseSource } from "../http/sources";
+import { ObservableCache } from "../observable-cache";
 
 const candidateToUrl = (candidate: SelectedRTCCandidate) =>
     `${candidate.protocol}://${candidate.address}:${candidate.port}`;
@@ -146,4 +148,6 @@ export class RTCConnection extends HTKEventBase {
         return this.closeData;
     }
 
+    readonly cache = new ObservableCache();
+
 }

src/types.d.ts

@@ -48,6 +48,7 @@ import type { RTCMediaTrack } from './model/webrtc/rtc-media-track';
 import type { TrafficSource } from './model/http/sources';
 import type { EditableBody } from './model/http/editable-body';
 import type { ViewableContentType } from './model/events/content-types';
+import type { ObservableCache } from './model/observable-cache';
 
 // These are the HAR types as returned from parseHar(), not the raw types as defined in the HAR itself
 export type HarBody = { encodedLength: number, decoded: Buffer };
@@ -181,15 +182,15 @@ export type HtkRequest = Omit<InputRequest, 'body' | 'path'> & {
     parsedUrl: ParsedUrl,
     source: TrafficSource,
     contentType: ViewableContentType,
-    cache: Map<symbol, unknown>,
+    cache: ObservableCache,
     body: MessageBody,
     trailers?: Trailers,
     rawTrailers?: RawTrailers
 };
 
 export type HtkResponse = Omit<InputResponse, 'body'> & {
     contentType: ViewableContentType,
-    cache: Map<symbol, unknown>,
+    cache: ObservableCache,
     body: MessageBody
 };