React is a popular open-source JavaScript library developed by Meta for building user interfaces. Known for its component-based architecture and efficient rendering with a virtual DOM, React is widely used by companies of all sizes to create fast, scalable, and dynamic web applications.

This page explains how to use the @axiomhq/react library to send data from your client-side React apps to Axiom.

The @axiomhq/react library is part of the Axiom JavaScript SDK, an open-source project and welcomes your contributions. For more information, see the GitHub repository.

The @axiomhq/react library is currently in public preview. For more information, see Feature states.

​
Prerequisites

  • A new or existing React app.

​
Install @axiomhq/react library

  1. In your terminal, go to the root folder of your React app and run the following command:

    npm install --save @axiomhq/logging @axiomhq/react

  2. Create a Logger instance and export the utils. The example below uses the useLogger and WebVitals components.

    'use client';

import { Logger, AxiomJSTransport } from '@axiomhq/logging';
import { Axiom } from '@axiomhq/js';
import { createUseLogger, createWebVitalsComponent } from '@axiomhq/react';

const axiomClient = new Axiom({
  token: process.env.AXIOM_TOKEN!,
});

export const logger = new Logger({
  transports: [
    new AxiomJSTransport({
      axiom: axiomClient,
      dataset: process.env.AXIOM_DATASET!,
    }),
  ],
});

const useLogger = createUseLogger(logger);
const WebVitals = createWebVitalsComponent(logger);

export { useLogger, WebVitals };

​
Send logs from components

To send logs from components, use the useLogger hook that returns your logger instance.

import { useLogger } from "@/lib/axiom/client";
import { useEffect } from "react";

export default function ClientComponent() {
  const log = useLogger();
  const handleClick = () => log.info("User logged out");

  useEffect(() => {
    log.info("User logged in", { userId: 42 });
  }, []);

  return (
    <div>
      <h1>Logged in</h1>
      <button onClick={handleClick}>Log out</button>
    </div>
  );
}

​
Send Web Vitals

To send Web Vitals, mount the WebVitals component in the root of your React app.

import { WebVitals } from "@/lib/axiom/client";

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <main>
      <WebVitals />
      {children}
    </main>
  );
}