Update Mockttp for HTTP/2 & trailer improvements

Most of these are server side, but notably this makes it possible for us
to (eventually) listen for trailers and include those in the inspectable
UI data too. For now, we do enough to make the types work, but we don't
actually subscribe to these events or show trailer data yet.

Author: pimterry

package-lock.json

@@ -103,7 +103,7 @@
     "mobx-shallow-undo": "^1.0.0",
     "mobx-utils": "^5.1.0",
     "mockrtc": "^0.3.1",
-    "mockttp": "^3.10.1",
+    "mockttp": "^3.11.0",
     "monaco-editor": "^0.27.0",
     "node-forge": "^1.3.0",
     "openapi-directory": "^1.3.0",

package.json

@@ -6,6 +6,7 @@ import * as querystring from 'querystring';
 
 import {
     Headers,
+    Trailers,
     HtkRequest,
     HarRequest,
     HarResponse,
@@ -60,6 +61,11 @@ export interface ExtendedHarRequest extends HarFormat.Request {
         | 'discarded:not-representable'
         | 'discarded:not-decodable';
     _content?: RequestContentData;
+    _trailers?: HarFormat.Header[];
+}
+
+export interface ExtendedHarResponse extends HarFormat.Response {
+    _trailers?: HarFormat.Header[];
 }
 
 export interface HarEntry extends HarFormat.Entry {
@@ -120,7 +126,7 @@ export async function generateHar(
     };
 }
 
-function asHarHeaders(headers: Headers) {
+function asHarHeaders(headers: Headers | Trailers) {
     return _.map(headers, (headerValue, headerKey) => ({
         name: headerKey,
         value: _.isArray(headerValue)
@@ -167,6 +173,9 @@ export function generateHarRequest(
         httpVersion: `HTTP/${request.httpVersion || '1.1'}`,
         cookies: [],
         headers: asHarHeaders(request.headers),
+        ...(request.trailers ? {
+            _trailers: asHarHeaders(request.trailers)
+        } : {}),
         queryString: Array.from(request.parsedUrl.searchParams.entries()).map(
             ([paramKey, paramValue]) => ({
                 name: paramKey,
@@ -714,7 +723,9 @@ function parseHarRequest(
                 ? parseHarRequestContents(request._content)
                 : parseHarPostData(request.postData),
             encodedLength: request.bodySize
-        }
+        },
+        rawTrailers: request._trailers?.map(t => [t.name, t.value]) ?? [],
+        trailers: asHtkHeaders(request._trailers ?? []) as Trailers
     }
 }
 
@@ -768,7 +779,7 @@ function parseHarPostData(data: HarFormat.PostData | undefined): Buffer {
 
 function parseHarResponse(
     id: string,
-    response: HarFormat.Response,
+    response: ExtendedHarResponse,
     timingEvents: TimingEvents
 ): HarResponse {
     return {
@@ -787,6 +798,8 @@ function parseHarResponse(
             encodedLength: (!response.bodySize || response.bodySize === -1)
                 ? 0 // If bodySize is missing or inaccessible, just zero it
                 : response.bodySize
-        }
+        },
+        rawTrailers: response._trailers?.map(t => [t.name, t.value]) ?? [],
+        trailers: asHtkHeaders(response._trailers ?? []) as Trailers,
     }
 }

src/model/http/har.ts

@@ -1,9 +1,10 @@
-import { RawHeaders } from "../../types";
+import { RawHeaders, RawTrailers } from "../../types";
 
 export type ResponseStreamEvent =
     | RequestStartEvent
     | ResponseHeadEvent
     | ResponseBodyPartEvent
+    | ResponseTrailersEvent
     | ResponseEndEvent
     | ErrorEvent;
 
@@ -27,6 +28,12 @@ interface ResponseBodyPartEvent {
     timestamp: number;
 }
 
+interface ResponseTrailersEvent {
+    type: 'response-trailers';
+    trailers: RawTrailers;
+    timestamp: number;
+}
+
 interface ResponseEndEvent {
     type: 'response-end';
     timestamp: number;

src/model/send/send-response-model.ts

@@ -9,6 +9,8 @@ import {
     TimingEvents
 } from 'mockttp';
 
+import { RawTrailers } from '../../types';
+
 import { logError } from '../../errors';
 import { getObservableDeferred, lazyObservablePromise } from '../../util/observable';
 import { persist, hydrate } from '../../util/mobx-persist/persist';
@@ -250,6 +252,7 @@ const trackResponseEvents = flow(function * (
 
     let responseHead: ResponseHeadEvent | undefined;
     let responseBodyParts: Buffer[] = [];
+    let rawTrailers: RawTrailers = [];
 
     while (true) {
         const { done, value } = (
@@ -270,6 +273,9 @@ const trackResponseEvents = flow(function * (
             case 'response-body-part':
                 responseBodyParts.push(value.rawBody);
                 break;
+            case 'response-trailers':
+                rawTrailers.push(...value.trailers);
+                break;
             case 'response-end':
                 if (!responseHead) throw new Error(`Received response-end before response-head!`);
 
@@ -282,6 +288,8 @@ const trackResponseEvents = flow(function * (
                     headers: rawHeadersToHeaders(responseHead.headers),
                     rawHeaders: responseHead.headers,
                     body: { buffer: Buffer.concat(responseBodyParts) },
+                    trailers: rawHeadersToHeaders(rawTrailers),
+                    rawTrailers: rawTrailers,
                     tags: [],
                     timingEvents
                 });