@civitai/next-axiom

Axiom unlocks observability at any scale.

• Ingest with ease, store without limits: Axiom’s next-generation datastore enables ingesting petabytes of data with ultimate efficiency. Ship logs from Kubernetes, AWS, Azure, Google Cloud, DigitalOcean, Nomad, and others.
• Query everything, all the time: Whether DevOps, SecOps, or EverythingOps, query all your data no matter its age. No provisioning, no moving data from cold/archive to “hot”, and no worrying about slow queries. All your data, all. the. time.
• Powerful dashboards, for continuous observability: Build dashboards to collect related queries and present information that’s quick and easy to digest for you and your team. Dashboards can be kept private or shared with others, and are the perfect way to bring together data from different sources.

For more information, check out the official documentation.

Installation

Using Vercel Integration

Make sure you have the Axiom Vercel integration installed. Once it is done, perform the steps below:

• In your Next.js project, run install next-axiom as follows:

npm install --save next-axiom

• In the next.config.js file, wrap your Next.js config in withAxiom as follows:

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

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

Using Any Other Platform

Create an API token in Axiom settings and export it as AXIOM_TOKEN, as well as the Axiom dataset name as AXIOM_DATASET. Once it is done, perform the steps below:

• In your Next.js project, run install next-axiom as follows:

npm install --save next-axiom

• In the next.config.js file, wrap your Next.js config in withAxiom as follows:

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

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

:warning: next-axiom is still experimental for non-Vercel platforms and is subject to change.

Usage

Web Vitals

:warning: Web-Vitals are not yet supported in Next.js 13 and above. Please use Next.js 12 or below.

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

export { reportWebVitals } from 'next-axiom';

Note: WebVitals are only sent from production deployments.

Wrapping your handlers in withAxiom will make req.log available and log exceptions:

:warning: Nextjs 13.x server side components are not yet supported.

import { withAxiom, AxiomAPIRequest } from 'next-axiom';

async function handler(req: AxiomAPIRequest, res: NextApiResponse) {
  req.log.info('Login function called');

  // You can create intermediate loggers
  const log = req.log.with({ scope: 'user' });
  log.info('User logged in', { userId: 42 });

  res.status(200).text('hi');
}

export default withAxiom(handler);

Import and use log in the frontend like this:

import { log } from `next-axiom`;

// pages/index.js
function home() {
    ...
    log.debug('User logged in', { userId: 42 })
    ...
}

Log Levels

The log level defines the lowest level of logs sent to Axiom. The default is debug, resulting in all logs being sent. Available levels are (from lowest to highest): debug, info, warn, error

For example, if you don't want debug logs to be sent to Axiom:

export AXIOM_LOG_LEVEL=info

You can also disable logging completely by setting the log level to off:

export AXIOM_LOG_LEVEL=off

getServerSideProps

To be able to use next-axiom with getServerSideProps you need to wrap your function with withAxiomGetServerSideProps, becasue there is no way at the moment to automatically detected if getServerSideProps is used.

import { withAxiomGetServerSideProps } from 'next-axiom'
export const getServerSideProps = withAxiomGetServerSideProps(async ({ req, log })  => {
  log.info('Hello, world!');
  return {
    props: {
    },
  }
});


### License

Distributed under the [MIT License](LICENSE).