Package Exports

next-axiom
next-axiom/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-axiom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

next-axiom

Send Web-Vitals and logs from Next.js to Axiom.

Get started

Make sure you have the Axiom Vercel integration installed or export NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT
In your Next.js project, run npm install --save next-axiom
Wrap your Next.js config in withAxiom like this in next.config.js:

const { withAxiom } = require('next-axiom');

module.exports = withAxiom({
  // ... your existing config
})

This will proxy the Axiom ingest call from the frontend to improve deliverability.

Reporting WebVitals

Go to pages/_app.js or pages/_app.ts and add the following line:

export { reportWebVitals } from 'next-axiom';

Sending Logs

Import Axiom's logger

import { log } from 'next-axiom';

Use the logger to send logs to Axiom, you can attach other metadata to your logs by passing them as parameters:

log.info('hello, world!')
log.debug('debugging information', { foo: 'bar', x: 'y' })
log.warn('be careful!')
log.error('oops!')

Deploy your site and watch data coming into your Axiom dashboard.

The log functions are asynchoronus functions, make sure to wait for them when its appropriate, like when running on serverless/edge functions:

await log.info('function will wait for the log to be sent')