Send data from client-side React apps to Axiom

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.

Prerequisites

• Create an Axiom account.
• Create a dataset in Axiom where you send your data.
• Create an API token in Axiom with permissions to ingest data to the dataset you have created.

• 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:

   shell

   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.

   TSX

   '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>
  );
}