Additional 30% memory reduction by simplifying API data observability

With this change, we no longer use a lazy observable promise for this,
and we no longer instantiate the promise at all before it's required,
and we fix an issue where the list itself triggered API lookup for all
visible rows.

This drops the per-exchange memory overhead by about 3.7KB in some test
examples.

Author: pimterry

src/components/view/http/http-details-pane.tsx

@@ -101,7 +101,7 @@ export class HttpDetailsPane extends React.Component<{
         // The full API details - for paid APIs, and non-paid users, we don't show
         // the detailed API data in any of the cards, we just show the name (below)
         // in a collapsed API card.
-        const apiExchange = (isPaidUser || exchange.api?.isBuiltInApi)
+        const apiExchange = (isPaidUser || exchange.apiSpec?.isBuiltInApi)
             ? exchange.api
             : undefined;
 

src/components/view/view-event-list.tsx

@@ -348,7 +348,7 @@ const EventRow = observer((props: EventRowProps) => {
             tlsEvent={event}
         />;
     } else if (event.isHttp()) {
-        if (event.api?.isBuiltInApi && event.api.matchedOperation()) {
+        if (event.apiSpec?.isBuiltInApi && event.api?.matchedOperation()) {
             return <BuiltInApiRow
                 index={index}
                 isSelected={isSelected}

src/model/api/api-interfaces.ts

@@ -21,13 +21,6 @@ export type ApiSpec =
 
 export interface ApiExchange {
 
-    /**
-     * Built-in API specs are special: they're shown for free users too, and they're
-     * shown differently in the list (highlighting the operation, not the normal
-     * lower-level HTTP details).
-     */
-    readonly isBuiltInApi: boolean;
-
     readonly service: ApiService;
     readonly operation: ApiOperation;
     readonly request: ApiRequest;

src/model/api/build-api-metadata.ts

@@ -13,6 +13,7 @@ import { OpenRpcDocument, OpenRpcMetadata } from './jsonrpc';
 export interface OpenApiMetadata {
     type: 'openapi';
     spec: OpenAPIObject;
+    isBuiltInApi: boolean;
     serverMatcher: RegExp;
     requestMatchers: Map<OpenApiRequestMatcher, Path>;
 }
@@ -167,6 +168,7 @@ export async function buildOpenApiMetadata(
     return {
         type: 'openapi',
         spec,
+        isBuiltInApi: spec.info['x-httptoolkit-builtin-api'] === true,
         serverMatcher,
         requestMatchers
     };
@@ -201,6 +203,7 @@ export function buildOpenRpcMetadata(spec: OpenRpcDocument, baseUrlOverrides?: s
     return {
         type: 'openrpc',
         spec,
+        isBuiltInApi: spec.info['x-httptoolkit-builtin-api'] === true,
         serverMatcher,
         requestMatchers: _.keyBy(spec.methods, 'name') as _.Dictionary<MethodObject> // Dereferenced
     };

src/model/api/jsonrpc.ts

@@ -10,7 +10,7 @@ import {
     OpenrpcDocument
 } from "@open-rpc/meta-schema";
 import { SchemaObject } from "openapi-directory";
-import { HtkResponse, Html, HttpExchange } from "../../types";
+import { HtkResponse, Html, ViewableHttpExchange } from "../../types";
 import { ErrorLike, isErrorLike } from "../../util/error";
 import { fromMarkdown } from "../ui/markdown";
 import {
@@ -27,13 +27,14 @@ export type OpenRpcDocument = OpenrpcDocument;
 export interface OpenRpcMetadata {
     type: 'openrpc';
     spec: OpenRpcDocument;
+    isBuiltInApi: boolean;
     serverMatcher: RegExp;
     requestMatchers: { [methodName: string] : MethodObject }; // JSON-RPC method name to method
 }
 
 export async function parseRpcApiExchange(
     api: OpenRpcMetadata,
-    exchange: HttpExchange
+    exchange: ViewableHttpExchange
 ): Promise<JsonRpcApiExchange> {
     try {
         const body = await exchange.request.body.waitForDecoding();
@@ -77,11 +78,9 @@ export class JsonRpcApiExchange implements ApiExchange {
 
     constructor(
         _api: OpenRpcMetadata,
-        _exchange: HttpExchange,
+        _exchange: ViewableHttpExchange,
         private _rpcMethod: MatchedOperation | ErrorLike
     ) {
-        this.isBuiltInApi = _api.spec.info['x-httptoolkit-builtin-api'] === true;
-
         this.service = new JsonRpcApiService(_api);
 
         if (isErrorLike(_rpcMethod)) {
@@ -95,12 +94,10 @@ export class JsonRpcApiExchange implements ApiExchange {
                 _rpcMethod,
                 _api.spec.externalDocs?.['x-method-base-url'] // Custom extension
             );
-            this.request = new JsonRpcApiRequest(_rpcMethod, _exchange);
+            this.request = new JsonRpcApiRequest(_rpcMethod);
         }
     }
 
-    readonly isBuiltInApi: boolean;
-
     readonly service: ApiService;
     readonly operation: ApiOperation;
     readonly request: ApiRequest;
@@ -180,7 +177,7 @@ const capitalizeFirst = (input: string | undefined) =>
 
 export class JsonRpcApiRequest implements ApiRequest {
 
-    constructor(rpcMethod: MatchedOperation, exchange: HttpExchange) {
+    constructor(rpcMethod: MatchedOperation) {
         const { methodSpec, parsedBody } = rpcMethod;
 
         this.parameters = (methodSpec.params as ContentDescriptorObject[])

src/model/api/openapi.ts

@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import { get } from 'typesafe-get';
+import { action, observable } from 'mobx';
 
 import type {
     OpenAPIObject,
@@ -14,7 +15,7 @@ import Ajv from 'ajv';
 import addFormats from 'ajv-formats';
 
 import {
-    HttpExchange,
+    ViewableHttpExchange,
     ExchangeMessage,
     HtkRequest,
     HtkResponse,
@@ -286,9 +287,7 @@ function stripTags(input: string | undefined): string | undefined {
 }
 
 export class OpenApiExchange implements ApiExchange {
-    constructor(api: OpenApiMetadata, exchange: HttpExchange) {
-        this.isBuiltInApi = api.spec.info['x-httptoolkit-builtin-api'] === true;
-
+    constructor(api: OpenApiMetadata, exchange: ViewableHttpExchange) {
         const { request } = exchange;
         this.service = new OpenApiService(api.spec);
 
@@ -306,14 +305,14 @@ export class OpenApiExchange implements ApiExchange {
     private _spec: OpenAPIObject;
     private _opSpec: MatchedOperation;
 
-    public readonly isBuiltInApi: boolean;
-
     public readonly service: ApiService;
     public readonly operation: ApiOperation;
     public readonly request: ApiRequest;
 
+    @observable.ref
     public response: ApiResponse | undefined;
 
+    @action
     updateWithResponse(response: HtkResponse | 'aborted' | undefined): void {
         if (response === 'aborted' || response === undefined) return;
         this.response = new OpenApiResponse(this._spec, this._opSpec, response);

src/model/http/api-detector.ts

@@ -0,0 +1,85 @@
+import { action, observable, runInAction, when } from 'mobx';
+
+import { logError } from '../../errors';
+import { UnreachableCheck } from '../../util/error';
+
+import { ViewableHttpExchange } from '../../types';
+
+import { OpenApiExchange } from '../api/openapi';
+import { parseRpcApiExchange } from '../api/jsonrpc';
+import { ApiExchange, ApiMetadata } from '../api/api-interfaces';
+import { ApiStore } from '../api/api-store';
+
+export class ApiDetector {
+
+    constructor(
+        private exchange: ViewableHttpExchange,
+        apiStore: ApiStore
+    ) {
+        apiStore.getApi(exchange.request)
+        .then(action((apiMetadata: ApiMetadata | undefined) => {
+            this.apiMetadata = apiMetadata;
+        })).catch(console.warn);
+    }
+
+    @observable.ref
+    apiMetadata: ApiMetadata | undefined = undefined;
+
+    _parsedApiPromise: Promise<ApiExchange | undefined> | undefined = undefined;
+
+    @observable.ref
+    _parsedApi: ApiExchange | undefined = undefined;
+
+    /**
+     * Reading this starts API parsing, if the API data is available. If this is observed when the API metadata
+     * becomes available, it will trigger parsing as a side-effect.
+     */
+    get parsedApi(): ApiExchange | undefined {
+        if (!this.apiMetadata) return;
+
+        if (!this._parsedApi && !this._parsedApiPromise) {
+            this._parsedApiPromise = (async () => {
+                // We load the spec, but we don't try to parse API requests until we've received
+                // the whole thing (because e.g. JSON-RPC requests aren't parseable without the body)
+                await when(() => this.exchange.isCompletedRequest());
+
+                // API metadata must be set - we check beforehand, and it's never cleared after setting
+                const apiMetadata = this.apiMetadata!;
+                const request = this.exchange.request;
+
+                try {
+                    let apiExchange: ApiExchange | undefined;
+                    if (apiMetadata.type === 'openapi') {
+                        apiExchange = new OpenApiExchange(apiMetadata, this.exchange);
+                    } else if (apiMetadata.type === 'openrpc') {
+                        apiExchange = await parseRpcApiExchange(apiMetadata, this.exchange);
+                    } else {
+                        console.log('Unknown API metadata type for host', request.parsedUrl.hostname);
+                        console.log(apiMetadata);
+                        throw new UnreachableCheck(apiMetadata, m => m.type);
+                    }
+
+                    runInAction(() => {
+                        this._parsedApi = apiExchange;
+                    });
+
+                    if (!this.exchange.isCompletedExchange()) {
+                        when(() => this.exchange.isCompletedExchange()).then(async () => {
+                            if (this.exchange.response) {
+                                apiExchange!.updateWithResponse(this.exchange.response);
+                            }
+                        });
+                    }
+
+                    return apiExchange;
+                } catch (e) {
+                    logError(e);
+                    throw e;
+                }
+            })();
+        }
+
+        return this._parsedApi;
+    }
+
+}

src/model/http/exchange.ts

@@ -14,12 +14,9 @@ import {
     MockttpBreakpointResponseResult,
     InputRuleEventDataMap
 } from "../../types";
-import { UnreachableCheck } from '../../util/error';
-import { lazyObservablePromise } from "../../util/observable";
 import { getHeaderValue } from '../../util/headers';
 import { ParsedUrl } from '../../util/url';
 
-import { logError } from '../../errors';
 
 import { MANUALLY_SENT_SOURCE, parseSource } from './sources';
 import { getContentType } from '../events/content-types';
@@ -29,9 +26,7 @@ import { HandlerClassKey, HtkRule, getRulePartKey } from '../rules/rules';
 
 import { ApiStore } from '../api/api-store';
 import { ApiExchange } from '../api/api-interfaces';
-import { OpenApiExchange } from '../api/openapi';
-import { parseRpcApiExchange } from '../api/jsonrpc';
-import { ApiMetadata } from '../api/api-interfaces';
+import { ApiDetector } from './api-detector';
 
 import { HttpBody } from './http-body';
 import {
@@ -189,7 +184,7 @@ export class HttpExchange extends HTKEventBase implements ViewableHttpExchange {
         .toLowerCase();
 
         // Start loading the relevant Open API specs for this request, if any.
-        this._apiMetadataPromise = apiStore.getApi(this.request);
+        this._apiDetector = new ApiDetector(this, apiStore);
     }
 
     public readonly id: string;
@@ -326,15 +321,6 @@ export class HttpExchange extends HTKEventBase implements ViewableHttpExchange {
             ..._.map(response.headers, (value, key) => `${key}: ${value}`),
             ..._.map(response.trailers, (value, key) => `${key}: ${value}`)
         ].join('\n').toLowerCase();
-
-        // Wrap the API promise to also add this response data (but lazily)
-        const requestApiPromise = this._apiPromise;
-        this._apiPromise = lazyObservablePromise(() =>
-            requestApiPromise.then((api) => {
-                if (api) api.updateWithResponse(this.response!);
-                return api;
-            })
-        );
     }
 
     // Must only be called when the exchange will no longer be used. Ensures that large data is
@@ -356,43 +342,13 @@ export class HttpExchange extends HTKEventBase implements ViewableHttpExchange {
 
     // API metadata:
 
-    // A convenient reference to the service-wide spec for this API - starts loading immediately
-    private _apiMetadataPromise: Promise<ApiMetadata | undefined>;
-
-    // Parsed API info for this specific request, loaded & parsed lazily, only if it's used
-    @observable.ref
-    private _apiPromise = lazyObservablePromise(async (): Promise<ApiExchange | undefined> => {
-        const apiMetadata = await this._apiMetadataPromise;
-
-        if (apiMetadata) {
-            // We load the spec, but we don't try to parse API requests until we've received
-            // the whole thing (because e.g. JSON-RPC requests aren't parseable without the body)
-            await when(() => this.isCompletedRequest());
-
-            try {
-                if (apiMetadata.type === 'openapi') {
-                    return new OpenApiExchange(apiMetadata, this);
-                } else if (apiMetadata.type === 'openrpc') {
-                    return await parseRpcApiExchange(apiMetadata, this);
-                } else {
-                    console.log('Unknown API metadata type for host', this.request.parsedUrl.hostname);
-                    console.log(apiMetadata);
-                    throw new UnreachableCheck(apiMetadata, m => m.type);
-                }
-            } catch (e) {
-                logError(e);
-                throw e;
-            }
-        } else {
-            return undefined;
-        }
-    });
-
-    // Fixed value for the parsed API data - returns the data or undefined, observably.
+    private _apiDetector: ApiDetector;
     get api() {
-        if (this._apiPromise.state === 'fulfilled') {
-            return this._apiPromise.value as ApiExchange | undefined;
-        }
+        return this._apiDetector.parsedApi;
+    }
+
+    get apiSpec() {
+        return this._apiDetector.apiMetadata;
     }
 
     // Breakpoint data: