Request/Response logging for dev server

[jdoig]

Is it possible to configure the dev server to log requests and responses?

[DNoel26]

I use below to log whatever I need to. Not sure if that helps

export function customDebugLogger(message: any, ...optionalParams: any[]) {
    if (process.env.NODE_ENV !== 'production') console.debug(message, ...optionalParams);
}

[jdoig]

@DNoel26 I'm new to Next but would this somehow get hooked into the server and log all request/response or is it just a helper function for writing logs?

[DNoel26]

@jdoig let me know if the explanation below helps for your use case

[DNoel26]

@jdoig If you want to log all then you can use middleware. I use next-connect npm package for a more express like middleware style, and you can use it like so if you wish:

https://www.npmjs.com/package/next-connect

Create your logging middleware

import nextConnect from 'next-connect';

const logger = nextConnect();

logger.use((req, res, next) => {
    customDebugLogger('Logging req', your_req_to_log);
    customDebugLogger('Logging res', your_res_to_log);
    next();
});

export default logger;

In another file, create a reusable next connect instance with your middleware that you wish to have on every route
IMPORTANT: I use a wrapper function so that it acts a factory and creates a new nextConnect instance each time it calls. Otherwise, the nextConnect instance is re-used and mutated and creates bugs

import nextConnect from 'next-connect';
import logger from './logger';

const commonNextConnect = () => {
    const nc = nextConnect({
        onError: your_error_handler_here,
        onNoMatch: your_method_not_allowed_handler_here,
        attachParams: true or false,
    });
    return nc.use(logger);
};

export default commonNextConnect;

In API route, use the commonNextConnect middleware as so

import commonNextConnect from 'middleware/common';

// If you don't want to use the middleware for some reason, import and create a new nc instance here
const handler = commonNextConnect();

handler.get((
  req,
  res
) => {
  res.status(200).json({ name: 'John Doe' })
}

export default handler;

---

Or you can do the traditional way with higher order functions on each route (I don't really like this way because it can get ugly fast)

const withLogger = (handler) => {
  return async (req, res) => {
    customDebugLogger('Logging req', your_req_to_log);
    customDebugLogger('Logging res', your_res_to_log);
    await handler(req, res)
  }
}

export default withLogger

In API each route, use withLogger as a higher order middleware function

const handler = (
  req,
  res
) => {
  res.status(200).json({ name: 'John Doe' })
}

export default withLogger(handler)

[tomups]

You will have to patch the next.js server to log all requests and responses:

https://www.tomups.com/posts/log-nextjs-request-response-as-json/