Add experimental Web Vitals support for Next.js

[adamyeats]

Adds experimental support for Next.js v9.4 Web Vitals reporting. This works by providing an Express middleware which will mount a route to /__appsignal-web-vitals and POST the metrics to that, and we’ll add custom metrics for these metrics on the server.

This works by exporting a reportWebVitals function from pages/_app.js as described here.

export function reportWebVitals(metric) {
  const body = JSON.stringify(metric)
  const url = '/__appsignal-web-vitals'

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  ;(navigator.sendBeacon && navigator.sendBeacon(url, body)) ||
    fetch(url, { body, method: 'POST', keepalive: true })
}

On successful setup, two new magic dashboards will be created for the user - Next.js and Next.js Web Vitals.

[adamyeats]

See appsignal/public_config#18 for magic dashboard config.

[jeffkreeftmeijer]

lgtm!

[backlog-helper]

While performing the daily checks some issues were found with this Pull Request.

• This Pull Request needs more reviews. @thijsc - (More info)

---

New issue guide | Backlog management | Rules | Feedback