Add support for cancelling pending Send requests

Author: pimterry

src/components/send/response-pane.tsx

@@ -27,6 +27,7 @@ export class ResponsePane extends React.Component<{
 
     requestInput: RequestInput,
     exchange: HttpExchange | undefined,
+    abortRequest: (() => void) | undefined,
     editorNode: portals.HtmlPortalNode<typeof ContainerSizedEditor>
 }> {
 
@@ -101,12 +102,19 @@ export class ResponsePane extends React.Component<{
     }
 
     renderInProgressResponse() {
-        const { uiStore, editorNode, requestInput, exchange } = this.props;
+        const {
+            uiStore,
+            editorNode,
+            requestInput,
+            exchange,
+            abortRequest
+        } = this.props;
 
         return <>
             <PendingResponseStatusSection
                 theme={uiStore!.theme}
                 timingEvents={exchange?.timingEvents}
+                abortRequest={abortRequest}
             />
             <PendingResponseHeaderSection
                 {...this.cardProps.responseHeaders}

src/components/send/send-page.tsx

@@ -68,7 +68,6 @@ export class SendPage extends React.Component<{
             selectRequest,
             moveSelection,
             deleteRequest,
-            sendRequest,
             selectedRequest,
             addRequestInput
         } = this.props.sendStore!;
@@ -102,13 +101,16 @@ export class SendPage extends React.Component<{
                         requestInput={selectedRequest.request}
                         sendRequest={this.sendRequest}
                         isSending={
-                            selectedRequest.pendingSendPromise?.state === 'pending'
+                            selectedRequest.pendingSend?.promise.state === 'pending'
                         }
                         editorNode={this.requestEditorNode}
                     />
                     <ResponsePane
                         requestInput={selectedRequest.request}
                         exchange={selectedRequest.sentExchange}
+                        abortRequest={
+                            selectedRequest.pendingSend?.abort
+                        }
                         editorNode={this.responseEditorNode}
                     />
                 </SplitPane>

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

@@ -31,7 +31,8 @@ export const SentResponseError = (props: {
 
     if (
         !wasNotForwarded(errorType) &&
-        !wasServerIssue(errorType)
+        !wasServerIssue(errorType) &&
+        errorType !== 'client-abort'
     ) {
         logError(`Unexpected Send error type: ${errorType}`);
     }
@@ -51,6 +52,8 @@ export const SentResponseError = (props: {
                     ? 'This request was not sent successfully'
                 : wasServerIssue(errorType)
                     ? 'This response was not received successfully'
+                : errorType === 'client-abort'
+                    ? 'This request was cancelled'
                 : `The request failed because of an unexpected error: ${errorType}`
             } <WarningIcon />
         </FailureBlock>
@@ -89,14 +92,24 @@ export const SentResponseError = (props: {
                         : unreachableCheck(errorType)
                     }.
                 </ExplanationBlock>
+            : errorType === 'client-abort'
+                ? <>
+                    <ExplanationBlock>
+                        This request was cancelled after sending, before a response was completed.
+                    </ExplanationBlock>
+                    <ExplanationBlock>
+                        The server may have received and could still be processing this request, but
+                        the connection has been closed so HTTP Toolkit will not receive any response.
+                    </ExplanationBlock>
+                </>
             : <ExplanationBlock>
                 It's not clear what's gone wrong here, but for some reason HTTP Toolkit
                 couldn't successfully and/or securely complete this request. This might be an
                 intermittent issue, and may be resolved by retrying the request.
             </ExplanationBlock>
         }
         { !!errorMessage &&
-            <ContentMonoValue>{ errorMessage }</ContentMonoValue>
+            <ContentMonoValue>Error: { errorMessage }</ContentMonoValue>
         }
     </SendCardSection>
 }

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

@@ -12,8 +12,9 @@ import { CompletedExchange, SuccessfulExchange } from '../../model/http/exchange
 import { ErrorType } from '../../model/http/error-types';
 
 import { SendCardSection } from './send-card-section';
-import { Pill } from '../common/pill';
+import { Pill, PillButton } from '../common/pill';
 import { DurationPill } from '../common/duration-pill';
+import { Icon } from '../../icons';
 
 const ResponseStatusSectionCard = styled(SendCardSection)`
     padding-top: 7px;
@@ -56,9 +57,17 @@ export const ResponseStatusSection = (props: {
     </ResponseStatusSectionCard>;
 }
 
+const AbortButton = styled(PillButton)`
+    margin-left: auto;
+    svg {
+        margin-right: 5px;
+    }
+`;
+
 export const PendingResponseStatusSection = observer((props: {
     theme: Theme,
-    timingEvents?: Partial<TimingEvents>
+    timingEvents?: Partial<TimingEvents>,
+    abortRequest?: () => void
 }) => {
     return <ResponseStatusSectionCard
         className='ignores-expanded' // This always shows, even if something is expanded
@@ -73,6 +82,15 @@ export const PendingResponseStatusSection = observer((props: {
                 &nbsp;...&nbsp;
             </Pill>
             <DurationPill timingEvents={props.timingEvents ?? {}} />
+            { props.abortRequest &&
+                <AbortButton
+                    color={props.theme.popColor}
+                    onClick={props.abortRequest}
+                >
+                    <Icon icon={['fas', 'times']} />
+                    Cancel request
+                </AbortButton>
+            }
         </header>
     </ResponseStatusSectionCard>;
 });

src/model/send/send-request-model.ts

@@ -76,7 +76,10 @@ export interface SendRequest {
     id: string;
     request: RequestInput;
     sentExchange: HttpExchange | undefined;
-    pendingSendPromise?: ObservablePromise<void>;
+    pendingSend?: {
+        promise: ObservablePromise<void>,
+        abort: () => void
+    }
 }
 
 const requestInputSchema = serializr.createModelSchema(RequestInput, {
@@ -102,7 +105,7 @@ export const sendRequestSchema = serializr.createSimpleSchema({
     id: serializr.primitive(),
     request: serializr.object(requestInputSchema),
     sentExchange: false, // Never persisted here (exportable as HAR etc though)
-    pendingSendPromise: false // Never persisted at all
+    pendingSend: false // Never persisted at all
 });
 
 export async function buildRequestInputFromExchange(exchange: HttpExchange): Promise<RequestInput> {

src/model/send/send-store.ts

@@ -132,13 +132,18 @@ export class SendStore {
 
         const requestInput = sendRequest.request;
         const pendingRequestDeferred = getObservableDeferred();
+        const abortController = new AbortController();
         runInAction(() => {
             sendRequest.sentExchange = undefined;
 
-            sendRequest.pendingSendPromise = pendingRequestDeferred.promise;
-            sendRequest.pendingSendPromise.then(() => { sendRequest.pendingSendPromise = undefined; });
-        });
+            sendRequest.pendingSend = {
+                promise: pendingRequestDeferred.promise,
+                abort: () => abortController.abort()
+            };
 
+            const clearPending = action(() => { sendRequest.pendingSend = undefined; });
+            sendRequest.pendingSend.promise.then(clearPending, clearPending);
+        });
 
         const exchangeId = uuid();
 
@@ -163,12 +168,16 @@ export class SendStore {
 
         const encodedBody = await requestInput.rawBody.encodingBestEffortPromise;
 
-        const responseStream = await ServerApi.sendRequest({
-            url: requestInput.url,
-            method: requestInput.method,
-            headers: requestInput.headers,
-            rawBody: encodedBody
-        }, requestOptions);
+        const responseStream = await ServerApi.sendRequest(
+            {
+                url: requestInput.url,
+                method: requestInput.method,
+                headers: requestInput.headers,
+                rawBody: encodedBody
+            },
+            requestOptions,
+            abortController.signal
+        );
 
         const exchange = this.eventStore.recordSentRequest({
             id: exchangeId,
@@ -190,23 +199,43 @@ export class SendStore {
         // Keep the exchange up to date as response data arrives:
         trackResponseEvents(responseStream, exchange)
         .catch(action((error: ErrorLike & { timingEvents?: TimingEvents }) => {
-            exchange.markAborted({
-                id: exchange.id,
-                error: error,
-                timingEvents: {
-                    ...exchange.timingEvents as TimingEvents,
-                    ...error.timingEvents
-                },
-                tags: error.code ? [`passthrough-error:${error.code}`] : []
-            });
+            if (error.name === 'AbortError' && abortController.signal.aborted) {
+                const startTime = exchange.timingEvents.startTime!; // Always set in Send case (just above)
+                // Make a guess at an aborted timestamp, since this error won't give us one automatically:
+                const durationBeforeAbort = Date.now() - startTime;
+                const startTimestamp = exchange.timingEvents.startTimestamp ?? startTime;
+                const abortedTimestamp = startTimestamp + durationBeforeAbort;
+
+                exchange.markAborted({
+                    id: exchange.id,
+                    error: {
+                        message: 'Request cancelled'
+                    },
+                    timingEvents: {
+                        startTimestamp,
+                        abortedTimestamp,
+                        ...exchange.timingEvents,
+                        ...error.timingEvents
+                    } as TimingEvents,
+                    tags: ['client-error:ECONNABORTED']
+                });
+            } else {
+                exchange.markAborted({
+                    id: exchange.id,
+                    error: error,
+                    timingEvents: {
+                        ...exchange.timingEvents as TimingEvents,
+                        ...error.timingEvents
+                    },
+                    tags: error.code ? [`passthrough-error:${error.code}`] : []
+                });
+            }
         }))
         .then(() => pendingRequestDeferred.resolve());
 
         runInAction(() => {
             sendRequest.sentExchange = exchange;
         });
-
-        return sendRequest.pendingSendPromise;
     }
 
 }

src/services/server-api.ts

@@ -113,14 +113,15 @@ export async function activateInterceptor(id: string, proxyPort: number, options
 
 export async function sendRequest(
     requestDefinition: RequestDefinition,
-    requestOptions: RequestOptions
+    requestOptions: RequestOptions,
+    abortSignal: AbortSignal
 ) {
     const client = (await apiClient);
     if (!(client instanceof RestApiClient)) {
         throw new Error("Requests cannot be sent via the GraphQL API client");
     }
 
-    return client.sendRequest(requestDefinition, requestOptions);
+    return client.sendRequest(requestDefinition, requestOptions, { abortSignal });
 }
 
 export async function triggerServerUpdate() {

src/services/server-rest-api.ts

@@ -22,6 +22,10 @@ import {
     ResponseStreamEvent
 } from '../model/send/send-response-model';
 
+interface RestRequestOptions {
+    abortSignal?: AbortSignal
+}
+
 export class RestApiClient {
 
     constructor(
@@ -32,7 +36,8 @@ export class RestApiClient {
         method: string,
         path: string,
         query: Record<string, number | string> = {},
-        body?: object
+        body?: object,
+        options?: RestRequestOptions
     ) {
         const operationName = `${method} ${path}`;
 
@@ -50,7 +55,8 @@ export class RestApiClient {
             },
             body: body
                 ? JSON.stringify(body)
-                : undefined
+                : undefined,
+            signal: options?.abortSignal
         }).catch((e) => {
             throw new ApiError(`fetch failed with '${e.message ?? e}'`, operationName);
         });
@@ -96,9 +102,10 @@ export class RestApiClient {
         method: string,
         path: string,
         query: Record<string, number | string> = {},
-        body?: object
+        body?: object,
+        options?: RestRequestOptions
     ): Promise<ReadableStream<T>> {
-        const response = await this.apiRequest(method, path, query, body);
+        const response = await this.apiRequest(method, path, query, body, options);
 
         if (!response.body) return emptyStream();
 
@@ -156,7 +163,8 @@ export class RestApiClient {
 
     async sendRequest(
         requestDefinition: RequestDefinition,
-        requestOptions: RequestOptions
+        requestOptions: RequestOptions,
+        options?: RestRequestOptions
     ) {
         const requestDefinitionData = {
             ...requestDefinition,
@@ -174,10 +182,12 @@ export class RestApiClient {
         }
 
         const responseDataStream = await this.apiNdJsonRequest<ResponseStreamEventData>(
-            'POST', '/client/send', {}, {
+            'POST', '/client/send', {},
+            {
                 request: requestDefinitionData,
                 options: requestOptionsData
-            }
+            },
+            options
         );
 
         const dataStreamReader = responseDataStream.getReader();