Support for nextjs

[jooj123]

I am having trouble figuring out how to get elastic apm working with a hybrid express + nextjs app in an effective way.

It seems to pick up requests fine (to specific URLs) and it also picks up error codes and they show up in the elastic UI "transactions" tab.
But I cant seem to get errors to show up in the "errors" tab.

If i throw an error in a next page - eg: ~/page/test.js
Say I have:

function Test() {
  throw new Error('Blah');
  return (
    <p>
      Hello World
    </p>
  )
}

export default Test

It does not show up in the elastic UI.

Describe the solution you'd like
I need exceptions that occur in nextjs to show up in the "error" tab in the elastic apm UI.

A hybrid express + nextjs app would look like this as an example:
https://github.com/jooj123/test-nextjs

Describe alternatives you've considered

I have tired to send errors manually in the next page, via captureError:
https://www.elastic.co/guide/en/apm/agent/nodejs/3.x/agent-api.html#apm-capture-error

But then i get a compile error like:

./node_modules/elastic-apm-node/lib/instrumentation/async-hooks.js
Module not found: Can't resolve 'async_hooks' in '/Users/martin.jujou/Documents/projects/fe-server-auction-results/node_modules/elastic-apm-node/lib/instrumentation'

> Build error occurred
Error: > Build failed because of webpack errors

This I believe is because nextjs pages are built for client and server and because elastic apm is a node client it blows up with the async_hooks error, much like:
vercel/next.js#4348

Not sure if you have any suggestions ...

For any exceptions at the express side of things i'm ok, but if an exception occurs in nextjs context im blind at the moment which is far from ideal

[jooj123]

I ended up working around this by doing these steps:

In next.config.js:

webpack: (config, { isServer, webpack }) => {
      if (!isServer) {
        config.node = {
          dgram: 'empty',
          fs: 'empty',
          net: 'empty',
          tls: 'empty',
          child_process: 'empty',
        };

        // ignore apm (might use in nextjs code but dont want it in client bundles)
        config.plugins.push(
          new webpack.IgnorePlugin(/^(elastic-apm-node)$/),
        );
      }

      return config;
} 

Then in _error.js render func you can call captureError manually:

function Error({ statusCode, message, err }) {

const serverSide = typeof window === 'undefined';

  // only run this on server side as APM only works on server
  if (serverSide) {
    // my apm instance (imports elastic-apm-node and returns  captureError)
    const { captureError } = require('../src/apm'); 

    if (err) {
      captureError(err);
    } else {
      captureError(`Message: ${message}, Status Code: ${statusCode}`);
    }
  }

}

Not very elegant - if there is any other suggestions that would be helpful - thanks.

[trentm]

I've spent a little time learning Next.js finally. We'd have to add the basic instrumentation of the next module and docs around this as a first step to trace the next server-side actions. I think that should be relatively straightforward.

As stretch work, or for later/separate work, it might be interesting to see if we can use our newish Lambda support to support tracing of Next.js apps deployed to Vercel.

[trentm]

I know this has been a while in coming. I'm getting close on my PR for this and came back here to sanity check that this case is covered. My PR has an example Next.js app setup with APM (https://github.com/elastic/apm-agent-nodejs/tree/trentm/feat-nextjs/examples/nextjs/).

1. I added "pages/test.js" as above:

% cat pages/test.js
function Test() {
  throw new Error('Blah');
  return (
    <p>
      Hello World
    </p>
  )
}

export default Test

2. I configured APM with my APM server URL (in "elastic-apm-node.js"). I ran the dev server, npm run dev, and then visited http://localhost:3000/test:

The error is captured, and here is what I see in the Kibana APM app:

And here is the error group page: