Reduce per-exchange memory use by ~15% with HttpBody improvements

Refactoring most notably to avoid indefinitely holdingh a
lazyObservablePromise on every instance (2x per exchange) everywhere.
These are expensive, and mostly not necessary. Refactored to cover the
two cases: reading the data & checking decoding state (both observably)
and waiting for the data as a promise (not observable).

Author: pimterry

src/components/send/sent-response-body.tsx

@@ -90,9 +90,7 @@ export class SentResponseBodyCard extends React.Component<ExpandableCardProps &
             ? this.selectedContentType!
             : (message?.contentType ?? 'text');
 
-        const decodedBody = message?.body.decoded;
-
-        if (decodedBody) {
+        if (message?.body.isDecoded()) {
             // We have successfully decoded the body content, show it:
             return <SendBodyCardSection
                 ariaLabel={ariaLabel}
@@ -102,7 +100,7 @@ export class SentResponseBodyCard extends React.Component<ExpandableCardProps &
             >
                 <header>
                     <ReadonlyBodyCardHeader
-                        body={decodedBody}
+                        body={message.body.decodedData}
                         mimeType={getHeaderValue(message.headers, 'content-type')}
                         downloadFilename={getBodyDownloadFilename(url, message.headers)}
 
@@ -127,16 +125,14 @@ export class SentResponseBodyCard extends React.Component<ExpandableCardProps &
                         expanded={!!expanded}
                         cache={message.cache}
                     >
-                        {decodedBody}
+                        { message.body.decodedData }
                     </ContentViewer>
                 </SendEditorCardContent>
             </SendBodyCardSection>;
-        } else if (!decodedBody && message?.body.decodingError) {
+        } else if (message?.body.isFailed()) {
             // We have failed to decode the body content! Show the error & raw encoded data instead:
-            const error = message.body.decodingError as ErrorLike;
-            const encodedBody = Buffer.isBuffer(message.body.encoded)
-                ? message.body.encoded
-                : undefined;
+            const error = message.body.decodingError;
+            const encodedBody = message.body.encodedData;
 
             const encodedDataContentType = _.includes(ENCODED_DATA_CONTENT_TYPES, this.selectedContentType)
                 ? this.selectedContentType!

src/components/send/sent-response-status.tsx

@@ -63,7 +63,7 @@ export const ResponseStatusSection = (props: {
             </Pill>
             <DurationPill timingEvents={props.exchange.timingEvents} />
             <Pill title="The size of the raw encoded response body">
-                { getReadableSize(response.body.encoded.byteLength) }
+                { getReadableSize(response.body.encodedByteLength) }
             </Pill>
             { props.showRequestOnViewPage &&
                 <ShowRequestButton onClick={props.showRequestOnViewPage} />

src/components/view/http/http-body-card.tsx

@@ -89,9 +89,7 @@ export class HttpBodyCard extends React.Component<ExpandableCardProps & {
             ? this.selectedContentType!
             : message.contentType;
 
-        const decodedBody = message.body.decoded;
-
-        if (decodedBody) {
+        if (message.body.isDecoded()) {
             // We have successfully decoded the body content, show it:
             return <CollapsibleCard
                 ariaLabel={ariaLabel}
@@ -102,7 +100,7 @@ export class HttpBodyCard extends React.Component<ExpandableCardProps & {
             >
                 <header>
                     <ReadonlyBodyCardHeader
-                        body={decodedBody}
+                        body={message.body.decodedData}
                         mimeType={getHeaderValue(message.headers, 'content-type')}
                         downloadFilename={getBodyDownloadFilename(url, message.headers)}
 
@@ -128,16 +126,14 @@ export class HttpBodyCard extends React.Component<ExpandableCardProps & {
                         expanded={!!expanded}
                         cache={message.cache}
                     >
-                        {decodedBody}
+                        { message.body.decodedData }
                     </ContentViewer>
                 </EditorCardContent>
             </CollapsibleCard>;
-        } else if (!decodedBody && message.body.decodingError) {
+        } else if (message.body.isFailed()) {
             // We have failed to decode the body content! Show the error & raw encoded data instead:
-            const error = message.body.decodingError as ErrorLike;
-            const encodedBody = Buffer.isBuffer(message.body.encoded)
-                ? message.body.encoded
-                : undefined;
+            const error = message.body.decodingError;
+            const encodedBody = message.body.encodedData;
 
             const encodedDataContentType = ENCODED_DATA_CONTENT_TYPES.includes(this.selectedContentType!)
                 ? this.selectedContentType!

src/components/view/http/http-performance-card.tsx

@@ -215,12 +215,11 @@ const CompressionPerformance = observer((p: { exchange: HttpExchange }) => {
         const message = p.exchange[messageType];
         const encodings = getEncodings(message);
 
-        if (typeof message !== 'object' || !message.body.encoded.byteLength) return null;
+        if (typeof message !== 'object' || !message.body.encodedByteLength) return null;
 
-        const encodedBody = message.body.encoded;
-        const decodedBody = message.body.decoded;
+        const encodedBodySize = message.body.encodedByteLength;
+        const decodedBody = message.body.decodedData;
         const decodedBodySize = decodedBody ? decodedBody.byteLength : 0;
-        const encodedBodySize = encodedBody.byteLength;
 
         const encodingTestResults = _.mapKeys(testEncodings(message),
             (_size, encoding) => getEncodingName(encoding)

src/model/api/jsonrpc.ts

@@ -36,7 +36,7 @@ export async function parseRpcApiExchange(
     exchange: HttpExchange
 ): Promise<JsonRpcApiExchange> {
     try {
-        const body = await exchange.request.body.decodedPromise;
+        const body = await exchange.request.body.waitForDecoding();
 
         if (!body?.length) throw new Error(`No JSON-RPC request body`);
 

src/model/events/bodies.ts

@@ -10,7 +10,7 @@ type EncodedSizesCache = Map<typeof EncodedSizesCacheKey,
 >;
 
 export function testEncodings(message: ExchangeMessage): EncodedBodySizes | undefined {
-    if (!message.body.decoded) return;
+    if (!message.body.isDecoded()) return;
 
     const encodedSizesCache = <EncodedSizesCache> message.cache;
     const existingObservable = encodedSizesCache.get(EncodedSizesCacheKey);
@@ -20,7 +20,7 @@ export function testEncodings(message: ExchangeMessage): EncodedBodySizes | unde
         const sizesObservable = observable.box<EncodedBodySizes | undefined>();
         encodedSizesCache.set(EncodedSizesCacheKey, sizesObservable);
 
-        testEncodingsAsync(message.body.decoded)
+        testEncodingsAsync(message.body.decodedData)
         .then(action((testResults: EncodedBodySizes) => {
             sizesObservable.set(testResults)
         }))

src/model/events/content-types.ts

@@ -183,7 +183,7 @@ export function getCompatibleTypes(
     let types = new Set([contentType]);
 
     if (body && !Buffer.isBuffer(body)) {
-        body = body.decoded;
+        body = body.decodedData;
     }
 
     // Examine the first char of the body, assuming it's ascii

src/model/filters/search-filters.ts

@@ -1160,8 +1160,8 @@ class BodySizeFilter extends Filter {
         const responseBody = event.isSuccessfulExchange()
             ? event.response.body
             : undefined;
-        const totalSize = requestBody.encoded.byteLength +
-            (responseBody?.encoded.byteLength || 0);
+        const totalSize = requestBody.encodedByteLength +
+            (responseBody?.encodedByteLength || 0);
 
         return event.isHttp() &&
             this.predicate(totalSize, this.expectedSize);
@@ -1223,10 +1223,10 @@ class BodyFilter extends Filter {
         if (!event.isHttp()) return false;
         if (!event.hasRequestBody() && !event.hasResponseBody()) return false; // No body, no match
 
-        // Accessing .decoded on both of these touches a lazy promise, starting decoding for all bodies:
-        const requestBody = event.request.body.decoded;
+        // Accessing .decodedData on both of these starts decoding for all bodies async:
+        const requestBody = event.request.body.decodedData;
         const responseBody = event.isSuccessfulExchange()
-            ? event.response.body.decoded
+            ? event.response.body.decodedData
             : undefined;
 
         const matchesRequestBody = !!requestBody && requestBody.byteLength > 0 &&
@@ -1286,8 +1286,8 @@ class ContainsFilter extends Filter {
                 ...Object.entries(
                     event.request.rawHeaders
                 ).map(([key, value]) => `${key}: ${value}`),
-                // Accessing .decoded touches a lazy promise, starting decoding:
-                event.request.body.decoded,
+                // Accessing .decodedData here starts decoding async:
+                event.request.body.decodedData,
 
                 ...(event.isSuccessfulExchange()
                     ? [
@@ -1296,8 +1296,8 @@ class ContainsFilter extends Filter {
                         ...Object.entries(
                             event.response.rawHeaders
                         ).map(([key, value]) => `${key}: ${value}`),
-                        // Accessing .decoded touches a lazy promise, starting decoding:
-                        event.response.body.decoded
+                        // Accessing .decodedData here starts decoding async:
+                        event.response.body.decodedData
                     ] : []
                 ),
 

src/model/http/caching.ts

@@ -167,7 +167,7 @@ export function explainCacheability(exchange: HttpExchange): (
     const revalidationSuggestion =
         !hasRevalidationOptions &&
         // Revalidation makes no sense without a body
-        response.body.encoded.byteLength &&
+        response.body.encodedByteLength &&
         !responseCCDirectives['immutable'] ?
         dedent`
             :suggestion: This response doesn't however include any validation headers. That

src/model/http/exchange.ts

@@ -230,12 +230,12 @@ export class HttpExchange extends HTKEventBase implements ViewableHttpExchange {
     }
 
     hasRequestBody(): this is CompletedRequest {
-        return this.isCompletedRequest() && this.request.body.encoded.byteLength > 0;
+        return this.isCompletedRequest() && this.request.body.encodedByteLength > 0;
     }
 
     hasResponseBody(): this is SuccessfulExchange {
         return this.isSuccessfulExchange() &&
-            (this.response as HtkResponse).body.encoded.byteLength > 0;
+            (this.response as HtkResponse).body.encodedByteLength > 0;
     }
 
     @observable

src/model/http/har.ts

@@ -20,7 +20,7 @@ import {
 
 import { stringToBuffer } from '../../util/buffer';
 import { getHeaderValues, getHeaderValue } from '../../util/headers';
-import { ObservablePromise } from '../../util/observable';
+import { ObservablePromise, observablePromise } from '../../util/observable';
 import { unreachableCheck } from '../../util/error';
 
 import { UI_VERSION } from '../../services/service-versions';
@@ -189,13 +189,10 @@ export function generateHarRequest(
     waitForDecoding: boolean,
     options: HarGenerationOptions
 ): ExtendedHarRequest | ObservablePromise<ExtendedHarRequest> {
-    if (waitForDecoding && (
-        !request.body.decodedPromise.state ||
-        request.body.decodedPromise.state === 'pending'
-    )) {
-        return request.body.decodedPromise.then(() =>
+    if (waitForDecoding && request.body.isPending()) {
+        return observablePromise(request.body.waitForDecoding().then(() =>
             generateHarRequest(request, false, options)
-        );
+        ));
     }
 
     const requestEntry: ExtendedHarRequest = {
@@ -214,27 +211,27 @@ export function generateHarRequest(
             })
         ),
         headersSize: -1,
-        bodySize: request.body.encoded.byteLength
+        bodySize: request.body.encodedByteLength
     };
 
-    if (request.body.decoded) {
-        if (request.body.decoded.byteLength > options.bodySizeLimit) {
+    if (request.body.isDecoded()) {
+        if (request.body.decodedData.byteLength > options.bodySizeLimit) {
             requestEntry._requestBodyStatus = 'discarded:too-large';
             requestEntry.comment = `Body discarded during HAR generation: longer than limit of ${
                 options.bodySizeLimit
             } bytes`;
         } else {
             try {
                 requestEntry.postData = generateHarPostBody(
-                    UTF8Decoder.decode(request.body.decoded),
+                    UTF8Decoder.decode(request.body.decodedData),
                     getHeaderValue(request.headers, 'content-type') || 'application/octet-stream'
                 );
             } catch (e) {
                 if (e instanceof TypeError) {
                     requestEntry._requestBodyStatus = 'discarded:not-representable';
                     requestEntry._content = {
-                        text: request.body.decoded.toString('base64'),
-                        size: request.body.decoded.byteLength,
+                        text: request.body.decodedData.toString('base64'),
+                        size: request.body.decodedData.byteLength,
                         encoding: 'base64',
                     }
                 } else {
@@ -331,7 +328,7 @@ async function generateHarResponse(
         };
     }
 
-    const decoded = await response.body.decodedPromise;
+    const decoded = await response.body.waitForDecoding();
 
     let responseContent: { text: string, encoding?: string } | { comment: string };
     try {
@@ -364,13 +361,13 @@ async function generateHarResponse(
             {
                 mimeType: getHeaderValue(response.headers, 'content-type') ||
                     'application/octet-stream',
-                size: response.body.decoded?.byteLength || 0
+                size: decoded?.byteLength || 0
             },
             responseContent
         ),
         redirectURL: "",
         headersSize: -1,
-        bodySize: response.body.encoded.byteLength || 0
+        bodySize: response.body.encodedByteLength || 0
     };
 }