npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@civitai/next-axiom

v0.17.0

Published

A fork of next-axiom 0.17

Downloads

41

Readme

next-axiom: The official Next.js library for Axiom next-axiom: The official Next.js library for Axiom

build Latest release License

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).