help detecting client disconnections in route handlers

[masterkain]

(very) simplified code follows:

import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest, { params }: { params: { key: string[] } }) {
  // Create a new AbortController for the S3 request
  const s3AbortController = new AbortController();
  request.signal.addEventListener('abort', () => {
    console.log('Client disconnected, aborting the operation.');
    s3AbortController.abort();
  });

  const getObjectCommand = new GetObjectCommand({ Bucket: BUCKET, Key: s3Path, Range: s3RangedHeaderString });
  const getObjectResponse = await s3Client.send(getObjectCommand, { abortSignal: s3AbortController.signal });
  const getObjectReadStream = getObjectResponse.Body!;
  const getObjectWebStream = getObjectReadStream.transformToWebStream();
  
      return new NextResponse(getObjectWebStream, { headers });

so this route handler has a big problem, if a client, say a video html5 player, attempts to stream through by making its GET request to this endpoint things works BUT if the client leaves (browser close, tab close, curl closes, everything) the pipe from s3 will still be ongoing.
this is especially brutal with multiple ranged requests, etc. you get the picture, piping needs to be stopped once client is not interested anymore.
imagine a client asking bytes=0- for a 7GB file and leave just after a couple of seconds. your node server will continue downloading, not sure where it does put the output at this point but it does.

I tried shaping the env with:

• signals
• proxy server
• http 1.1
• http 2

it did not matter, in this env abort will never be fired.

did some more in depth verifications and indeed:

  const abortSignal = AbortSignal.timeout(4000);

  const getObjectResponse = await s3Client.send(getObjectCommand, { abortSignal });

this correctly destroys everything so I think the problem lies in the: request.signal.addEventListener('abort', () => {
that is never going to be called. we only have the abort event so I'm not sure how to solve this. make some keepalive check somewhere?

[masterkain]

maybe we can add an onClose method to the NodeNextRequest class that takes a callback and attach it to the 'close' event of the underlying Node.js request object and hoist it to NextRequest?

onClose(callback: () => void) {
  this._req.on('close', callback);
}

then in my route handler:

if (request.onClose) {
  request.onClose(() => {
    console.log('Client disconnected, aborting the operation.');
    abortController.abort();
  });
}

would something like this work?

[masterkain]

maybe next should expose the original node request, nuxt 3 does this: event.node.req

[Drago96]

I have a similar use case, where I am streaming events to the client. When the user navigates away from the page, the event stream remains opened indefinitely on the server.

[lukemorton]

You can check for request.signal.abort, if that's set to true then you can exit out of your loop on the server.

[masterkain]

31d2b72

[trd-sys]

@masterkain, do you mind posting your solution to this issue? Now that you have marked this as closed, it would be helpful to understand how you have managed to detect client disconnection on the server side in NextJS. Thanks.

[lukemorton]

After a lot of head scratching, I figured this out: #48682 (reply in thread)

[masterkain]

sample api routes code

export async function GET(request: NextRequest, { params }: { params: { key: string[] } }) {
  const getObjectResponse = await s3Service.client.send(getObjectCommand, { abortSignal: request.signal });
  const transformedStream = getObjectWebStream.pipeThrough(decryptedStream, { signal: request.signal });

it takes a few seconds to kick in once the client is gone

[Firas88Alkhatib]

Why this is closed ?
There is still no way to fire events on abort requests in Route Handlers NextJS 14!.
For example I have a route at api/products method GET , and I am calling it using axios , and then I cancel axios request .

Lets take example this Route Handler:

export async function GET(req: NextRequest) {
  const abortController = new AbortController()
  // How to fire the abortController.abort() when this request is aborted by the caller
  // to prevent further useless data processing
  // This could be something like:  req.on("abort",()=>{abortController.abort()})
  try {
    const url = '...'
    const response = await axios.get(url, { signal: abortController.signal })
    // do some processing using the data from axios here....
    return NextResponse.json({ result: 'Some data...' }, { status: 200 })
  } catch (error) {
    if (axios.isCancel(error)) return NextResponse.json({ result: 'request canceled' }, { status: 499 })
    return NextResponse.json({ error: 'Server error' }, { status: 500 })
  }
}

[lukemorton]

Can you pass req.signal to the signal in axios? Otherwise have you tried request.signal.addEventListener('abort', () => {})?

[Firas88Alkhatib]

@lukemorton I am checking again if this is fixed.
request.signal.addEventListener('abort', () => {}) the event on abort doesn't get triggered when the request is cancelled from the browser.
tested in: next:14.2.3

[kofeinstyle]

I cannot understand why is it closed ? request.signal.addEventListener('abort' does not work