Send Web-Vitals and logs from Next.js to Axiom.
- 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 innext.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.
Go to pages/_app.js
or pages/_app.ts
and add the following line:
export { reportWebVitals } from 'next-axiom'
Note: WebVitals are only sent from production deployments.
- Import Axiom's logger
import { log } from 'next-axiom';
- If you want to log from a function, wrap it using
withAxiom
like this:
// serverless function
async function handler(req, res) {
log.info("hello from function")
res.status(200).text('hi')
}
export default withAxiom(handler)
// middleware function
import { NextResponse } from 'next/server'
async function handler(req, ev) {
log.info("hello from middleware")
return NextResponse.next()
}
export default withAxiom(handler)
This will log exceptions as well as making sure logs are flushed.
- 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!')
If you have fields you want to log with all messages, you can create an intermediate logger like this:
const logger = log.with({ scope: 'user' })
logger.info('User logged in', { userId: 42 })
// {
// "level": "info",
// "_time": "2022-07-04T09:49:42Z",
// "message": "User logged in",
// "fields": {
// "scope": "user",
// "userId": 42,
// }
// }
- Deploy your site and watch data coming into your Axiom dataset.
Note: Logs are only sent to Axiom from production deployments.
When env vars are not detected, Pretty printing to console is enabled by default, to disable it set the environment variable:
AXIOM_PRETTY_PRINT_ENABLED=false