Add support to monitoring performances

Feature request

Is your feature request related to a problem?

I’m migrating an application to Next.js and one requirement that we have is to be able to monitor the application (using Prometheus for example). Here are 2 examples of metrics that could make sense:

• rendering time: how long does the app takes to render (once data is ready). Useful to track the evolution of the complexity of the tree.
• data-fetching time: how long do we wait for the data. Useful to track how our dependencies behave. This would basically measure the time spent in the _app.js getInitialProps().

Describe the solution you’d like

I think this would require the developer to use the custom server approach: we could provide a few new options on the const app = next({ dev }) call.

Options proposal:

• onRenderStart or beforeRender
• onRenderEnd or afterRender
• onGetInitialPropsStart or beforeGetInitialProps
• onGetInitialPropsEnd or afterGetInitialProps

All the options above would be callbacks called at the right time. They could also be grouped inside a single timings option maybe.

One thing to consider as well is that a timer started in a start/before callback needs to be stopped in the end/after one. This means we need to have a context shared between those…

One other way that could enable this context could be to return the end function:

next({
  onRender: () => {
    const endTimer = timer.start()
    return () => endTimer()
  }
})

Describe alternatives you’ve considered

I don’t have other ideas in my mind so far as I’m still beginning with using Next.js, I’m probably lacking a wider vision.

[timneutkens]

The specific PR is client-only but there’s more coming.

[Janpot]

Yes, one could definitely imagine more powerful hooks. I’m just putting it on the table as a low config alternative, that uses already available standards.