### Install and Run TanStack Start React Example

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/tanstack-start/README.md

Installs project dependencies and starts the development server for the TanStack Start React example. The application will be accessible at http://localhost:3000.

```bash
pnpm install
pnpm --filter tanstack-start-react dev
```

--------------------------------

### Install and Run TanStack Start Solid Example

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/tanstack-start-solid/README.md

Installs dependencies and starts the TanStack Start Solid development server.

```bash
pnpm install
pnpm --filter tanstack-start-solid dev
```

--------------------------------

### Install Axiom TanStack Start Packages

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Install the necessary Axiom packages for JavaScript, logging, and TanStack Start integration.

```bash
npm install @axiomhq/js @axiomhq/logging @axiomhq/tanstack-start
```

--------------------------------

### Set Axiom Token and Run TypeScript Example

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Before running TypeScript examples, set your Axiom token as an environment variable. Then, execute the example file using `ts-node`.

```shell
export AXIOM_TOKEN="..."
npx ts-node <example-file.ts>
```

--------------------------------

### Install Axiom SDK

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/js/README.md

Install the package via npm.

```bash
npm install @axiomhq/js
```

--------------------------------

### Manage Axiom Users

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example demonstrating how to retrieve information about the current user, list all users, and get details for a specific user by their ID.

```typescript
// examples/js/src/users.ts
// How to retrieve the current user, list users, and retrieve a user by ID.
```

--------------------------------

### Install Axiom Packages

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/react/README.md

Install the necessary Axiom packages for your project using npm.

```bash
npm install @axiomhq/js @axiomhq/logging @axiomhq/react
```

--------------------------------

### Install Axiom Packages

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/nextjs/README.md

Installs the required Axiom SDK packages via npm.

```bash
npm install @axiomhq/js @axiomhq/logging @axiomhq/nextjs @axiomhq/react
```

--------------------------------

### Install Axiom Packages

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/logging/README.md

Installs the required Axiom JavaScript and logging packages via npm.

```bash
npm install @axiomhq/js @axiomhq/logging
```

--------------------------------

### Install Development Dependencies

Source: https://github.com/axiomhq/axiom-js/blob/main/Contributing.md

Install the necessary development dependencies using pnpm. This command should be run after cloning the repository and navigating into the project directory.

```bash
pnpm install
```

--------------------------------

### Install @axiomhq/pino package

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/pino/README.md

Install the Axiom transport package for Pino logger using npm.

```bash
npm install @axiomhq/pino

```

--------------------------------

### Start the Next.js development server

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/nextjs/README.md

Use these commands to launch the local development environment using various package managers.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Manage Axiom Monitors

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example demonstrating the full lifecycle of managing monitors: creation, listing, retrieval, updating, and deletion.

```typescript
// examples/js/src/manage-monitors.ts
// How to create, list, get, update, and delete monitors.
```

--------------------------------

### Retrieve List of Axiom Datasets

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example showing how to fetch a list of all datasets within your Axiom organization.

```typescript
// examples/js/src/list-datasets.ts
// How to retrieve a list of datasets.
```

--------------------------------

### Import Core TanStack Start Observability Helpers

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Import framework-neutral core observability functions for TanStack Start applications.

```typescript
import {
  createAxiomFnMiddleware,
  createAxiomRequestMiddleware,
  tanStackStartServerFormatters,
} from '@axiomhq/tanstack-start';
```

--------------------------------

### Create an Axiom Annotation

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example demonstrating how to create a new annotation in Axiom.

```typescript
// examples/js/src/create-annotation.ts
// How to create an annotation.
```

--------------------------------

### List and Inspect Axiom Dashboards

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example demonstrating how to list all available dashboards and retrieve a specific dashboard by its UID.

```typescript
// examples/js/src/inspect-dashboards.ts
// How to list dashboards and retrieve one by UID.
```

--------------------------------

### Setup Axiom Client for React

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/react/README.md

Configure the Axiom client and logger for a React application. This setup includes transports for both Axiom and the console, and exposes custom hooks for logging and Web Vitals.

```typescript
'use client';

import axiomClient from '@/lib/axiom/axiom';
import { Logger, ConsoleTransport, AxiomJSTransport } from '@axiomhq/logging';
import { createUseLogger, createWebVitalsComponent } from '@axiomhq/react';

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

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

export { useLogger, WebVitals };
```

--------------------------------

### Query Axiom Dataset (Legacy)

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example demonstrating how to query data from an Axiom dataset using the legacy query interface.

```typescript
// examples/js/src/query-legacy.ts
// How to query a dataset.
```

--------------------------------

### Clone the axiom-js Repository

Source: https://github.com/axiomhq/axiom-js/blob/main/Contributing.md

Clone the axiom-js repository to your local machine. Navigate into the cloned directory to proceed with setup.

```bash
git clone https://github.com/axiomhq/axiom-js
cd axiom-js
```

--------------------------------

### Ingest File Contents into Axiom

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example demonstrating how to ingest the content of a file into an Axiom dataset.

```typescript
// examples/js/src/ingest-file.ts
// How to ingest the contents of a file into Axiom.
```

--------------------------------

### Server-Side Axiom Proxy Handler Setup

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Set up the Axiom client and a logger with AxiomJSTransport on the server to receive logs from the client-side proxy. Includes ConsoleTransport for server-side debugging.

```typescript
// src/lib/axiom/server.ts
import { Axiom } from '@axiomhq/js';
import { AxiomJSTransport, ConsoleTransport, Logger } from '@axiomhq/logging';
import { tanStackStartServerFormatters } from '@axiomhq/tanstack-start';

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

export const startLogger = new Logger({
  transports: [
    new AxiomJSTransport({
      axiom,
      dataset: process.env.AXIOM_DATASET!,
    }),
    new ConsoleTransport({ prettyPrint: true }),
  ],
  formatters: tanStackStartServerFormatters,
});

```

--------------------------------

### Ingest Events into Axiom Dataset

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example showing how to ingest multiple events into a specified Axiom dataset.

```typescript
// examples/js/src/ingest-events.ts
// How to ingest events into a dataset.
```

--------------------------------

### Retrieve Axiom Saved Queries

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example showing how to fetch a list of saved queries from your Axiom organization.

```typescript
// examples/js/src/saved-queries.ts
// How to retrieve saved queries.
```

--------------------------------

### Install Axiom Winston Transport

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/winston/README.md

Install the Axiom transport package for Winston logger using npm. This package enables sending logs to Axiom.

```bash
npm install @axiomhq/winston
```

--------------------------------

### Query Axiom Metrics using MPL

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example showing how to query metrics data using the Axiom Metrics Processing Language (MPL).

```typescript
// examples/js/src/query-metrics.ts
// How to query metrics using MPL.
```

--------------------------------

### Setup Routers and Server Loggers with Axiom

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Configure loggers for TanStack Router and the server using Axiom's logging capabilities and formatters.

```typescript
import { Logger, ConsoleTransport } from '@axiomhq/logging';
import { tanStackStartServerFormatters } from '@axiomhq/tanstack-start';
import { tanStackRouterFormatters } from '@axiomhq/tanstack-start/router';

export const routerLogger = new Logger({
  transports: [new ConsoleTransport()],
  formatters: tanStackRouterFormatters,
});

export const startLogger = new Logger({
  transports: [new ConsoleTransport()],
  formatters: tanStackStartServerFormatters,
});
```

--------------------------------

### Inspect Axiom Metrics Dataset Metadata

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example demonstrating how to retrieve metadata for a metrics dataset in Axiom.

```typescript
// examples/js/src/inspect-metrics-dataset.ts
// How to inspect metrics metadata for a metrics dataset.
```

--------------------------------

### Inspect Axiom Dataset Fields and Mapping

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example showing how to inspect a dataset's schema, including its fields and field mappings.

```typescript
// examples/js/src/inspect-dataset.ts
// How to inspect a dataset, fields, and map fields.
```

--------------------------------

### Ingest JSON String into Axiom Dataset

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example showing how to ingest a JSON formatted string into an Axiom dataset.

```typescript
// examples/js/src/ingest-string.ts
// How to ingest a JSON string into a dataset.
```

--------------------------------

### Query Axiom Summarized Results using APL

Source: https://github.com/axiomhq/axiom-js/blob/main/examples/js/README.md

Example demonstrating how to query and retrieve summarized results from Axiom datasets using the Axiom Processing Language (APL).

```typescript
// examples/js/src/query.ts
// How to query summarized results using the Axiom Processing Language (APL).
```

--------------------------------

### Setup Axiom Transport for Winston Logger

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/winston/README.md

Configure Winston logger to use the Axiom transport. Ensure you have the necessary dataset and token. Node.js 20 or higher is required.

```typescript
import { WinstonTransport as AxiomTransport } from '@axiomhq/winston';

const logger = winston.createLogger({
    level: 'info',
    format: winston.format.json(),
    defaultMeta: { service: 'user-service' },
    transports: [
        new AxiomTransport({
            dataset: 'my-dataset',
            token: 'my-token',
        }),
    ],
});

logger.log({
    level: 'info',
    message: 'Logger successfully setup',
});
```

--------------------------------

### Client-Side Proxy Ingestion Setup (React)

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Configure browser transports using ProxyTransport for client-side logs, directing them to a server API endpoint. Includes ConsoleTransport for local debugging.

```typescript
// src/lib/axiom/client.ts
import { ConsoleTransport, Logger, ProxyTransport } from '@axiomhq/logging';
import type { Transport } from '@axiomhq/logging';
import { tanStackStartClientFormatters } from '@axiomhq/tanstack-start';
import { tanStackRouterFormatters } from '@axiomhq/tanstack-start/router';

function createBrowserTransports(): [Transport, ...Transport[]] {
  return [
    new ProxyTransport({ url: '/api/axiom' }),
    new ConsoleTransport({ prettyPrint: true }),
  ];
}

export const routerLogger = new Logger({
  transports: createBrowserTransports(),
  formatters: tanStackRouterFormatters,
});

export const clientLogger = new Logger({
  transports: createBrowserTransports(),
  formatters: tanStackStartClientFormatters,
});

```

--------------------------------

### Run Build, Test, and Lint Commands

Source: https://github.com/axiomhq/axiom-js/blob/main/Contributing.md

Execute these commands to ensure your changes pass the project's build, testing, and linting checks. This is a required step before submitting modifications.

```bash
pnpm build
pnpm test
pnpm lint
```

--------------------------------

### Import TanStack Router Observability Helpers

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Import specific helpers for TanStack Router navigation and timing from the router subpath.

```typescript
import { observeTanStackRouter, tanStackRouterFormatters } from '@axiomhq/tanstack-start/router';
```

--------------------------------

### Create Request and Function Middleware

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Set up framework-neutral middleware for requests and functions using createAxiomFnMiddleware and createAxiomRequestMiddleware. Includes basic include/exclude patterns.

```typescript
import {
  createAxiomFnMiddleware,
  createAxiomRequestMiddleware,
} from '@axiomhq/tanstack-start';

export const requestMiddleware = [
  createAxiomRequestMiddleware(startLogger, {
    include: ['/api/*', '/_server/*'],
    exclude: ['/api/health'],
  }),
];

export const functionMiddleware = [
  createAxiomFnMiddleware(startLogger, {
    correlation: true,
  }),
];
```

--------------------------------

### Initialize Axiom Logger

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/logging/README.md

Configures a logger instance with Axiom and console transports. Ensure the AXIOM_DATASET environment variable is set.

```ts
// lib/axiom/logger.ts
import axiomClient from '@/lib/axiom/axiom';
import { Logger, ConsoleTransport, AxiomJSTransport } from '@axiomhq/logging';

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

logger.info('Hello World!');
```

--------------------------------

### Configure Axiom Logger for Next.js

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/nextjs/README.md

Initializes the Axiom logger with Axiom and console transports, using Next.js specific formatters.

```ts
// lib/axiom/server.ts
import axiomClient from '@/lib/axiom/axiom';
import { Logger, ConsoleTransport, AxiomJSTransport } from '@axiomhq/logging';
import { createAxiomRouteHandler, nextJsFormatters } from '@axiomhq/nextjs';

export const logger = new Logger({
  transports: [
    new AxiomJSTransport({ axiom: axiomClient, dataset: process.env.NEXT_PUBLIC_AXIOM_DATASET! }),
    new ConsoleTransport({ prettyPrint: true }),
  ],
  formatters: nextJsFormatters,
});

export const withAxiom = createAxiomRouteHandler(logger);
```

--------------------------------

### Ingest data with Axiom SDK

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/js/README.md

Initialize the Axiom client with an API token and ingest data into a specified dataset.

```ts
import { Axiom } from '@axiomhq/js';

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

axiom.ingest('DATASET_NAME', [{ foo: 'bar' }]);
await axiom.flush();
```

--------------------------------

### Import Solid Error Handling Adapter

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Import the Solid adapter to report errors from TanStack Router components or app-level boundaries.

```typescript
import { createAxiomSolidErrorHandler } from '@axiomhq/tanstack-start/solid';
```

--------------------------------

### Configure Pino logger with Axiom transport

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/pino/README.md

Use this snippet to configure Pino to send logs to Axiom. Ensure AXOM_DATASET and AXIOM_TOKEN environment variables are set.

```typescript
import pino from 'pino';

const logger = pino(
  { level: 'info' },
  pino.transport({
    target: '@axiomhq/pino',
    options: {
      dataset: process.env.AXIOM_DATASET,
      token: process.env.AXIOM_TOKEN,
    },
  }),
);

```

--------------------------------

### Solid Client Error Boundary with Axiom Logging

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Integrate Axiom's error handling into Solid's TanStack Router error boundaries. Logs client-side errors using createAxiomSolidErrorHandler.

```typescript
import { ErrorComponent, createRouter, type ErrorComponentProps } from '@tanstack/solid-router';
import { onMount } from 'solid-js';
import { createAxiomSolidErrorHandler } from '@axiomhq/tanstack-start/solid';

const handleClientError = createAxiomSolidErrorHandler(startLogger);

function RouterErrorBoundary(props: ErrorComponentProps) {
  onMount(() => handleClientError(props.error, props.reset));
  return <ErrorComponent error={props.error} />;
}

const router = createRouter({
  routeTree,
  defaultErrorComponent: RouterErrorBoundary,
});

```

--------------------------------

### Instrument Next.js Route Handler

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/nextjs/README.md

Wraps a standard Next.js route handler with the Axiom middleware to enable automated logging.

```ts
// api/route.ts
import { withAxiom } from '@/lib/axiom/server';

export const GET = withAxiom(async () => {
  logger.info('Hello World!');
  return new Response('Hello World!');
});
```

--------------------------------

### API Route for Axiom Proxy Handler

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Create an API route using TanStack Router's createFileRoute to handle POST requests and proxy them to the Axiom logger. This route serves as the endpoint for client-side proxy ingestion.

```typescript
// src/routes/api/axiom.ts
import { createFileRoute } from '@tanstack/react-router';
import { createAxiomProxyHandler } from '@axiomhq/tanstack-start';
import { startLogger } from '../../lib/axiom/server';

const proxyHandler = createAxiomProxyHandler(startLogger);

export const Route = createFileRoute('/api/axiom')({
  server: {
    handlers: {
      POST: ({ request }) => proxyHandler(request),
    },
  },
});

```

--------------------------------

### Observe TanStack Router

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Integrate router event observation using observeTanStackRouter for performance monitoring and navigation logging. Supports custom sources and performance metrics.

```typescript
import { observeTanStackRouter } from '@axiomhq/tanstack-start/router';

const observe = observeTanStackRouter(routerLogger, {
  source: 'tanstack-router-spa',
  performance: true,
});

const unsubscribe = observe(router);
```

--------------------------------

### Set Axiom Dataset Suffix

Source: https://github.com/axiomhq/axiom-js/blob/main/e2e/nextjs-app/README.md

Configure the dataset suffix for integration tests. Defaults to 'local', but can be set to a pipeline ID or commit hash.

```shell
export AXIOM_DATASET_SUFFIX="local"
```

--------------------------------

### Customize Function Middleware with Callbacks

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Customize function logging by providing onSuccess and onError callbacks to createAxiomFnMiddleware. This enables custom field enrichment and skipping default logging for server functions.

```typescript
import {
  createAxiomFnMiddleware,
  transformStartFunctionErrorResult,
  transformStartFunctionSuccessResult,
} from '@axiomhq/tanstack-start';

export const functionMiddleware = [
  createAxiomFnMiddleware(startLogger, {
    correlation: true,
    onSuccess: async (data) => {
      const [message, report] = transformStartFunctionSuccessResult(data);

      startLogger.info(message, {
        ...report,
        requestHeaders: {
          tenant: data.context.context?.request?.headers.get('x-tenant-id'),
          region: data.context.context?.request?.headers.get('x-region'),
        },
      });

      await startLogger.flush();
    },
    onError: async (data) => {
      const [message, report] = transformStartFunctionErrorResult(data);

      startLogger.error(message, {
        ...report,
        requestHeaders: {
          tenant: data.context.context?.request?.headers.get('x-tenant-id'),
          region: data.context.context?.request?.headers.get('x-region'),
        },
      });

      await startLogger.flush();
    },
  }),
];
```

--------------------------------

### Import React Error Handling Adapter

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Import the React adapter to report errors from TanStack Router components or app-level boundaries.

```typescript
import { createAxiomReactErrorHandler } from '@axiomhq/tanstack-start/react';
```

--------------------------------

### Customize Request Middleware with Callbacks

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Customize request logging by providing onSuccess and onError callbacks to createAxiomRequestMiddleware. This allows for custom field enrichment and skipping default logging.

```typescript
import {
  createAxiomRequestMiddleware,
  getLogLevelFromStatusCode,
  getStartErrorStatusCode,
  transformStartRequestErrorResult,
  transformStartRequestSuccessResult,
} from '@axiomhq/tanstack-start';

export const requestMiddleware = [
  createAxiomRequestMiddleware(startLogger, {
    onSuccess: async (data) => {
      const [message, report] = transformStartRequestSuccessResult(data);
      const logLevel = getLogLevelFromStatusCode(data.response.status);

      startLogger.log(logLevel, message, {
        ...report,
        tenant: data.request.headers.get('x-tenant-id'),
        region: data.request.headers.get('x-region'),
      });

      await startLogger.flush();
    },
    onError: async (data) => {
      const [message, report] = transformStartRequestErrorResult(data);
      const logLevel = getLogLevelFromStatusCode(getStartErrorStatusCode(data.error));

      startLogger.log(logLevel, message, {
        ...report,
        tenant: data.request.headers.get('x-tenant-id'),
        region: data.request.headers.get('x-region'),
      });

      await startLogger.flush();
    },
  }),
];
```

--------------------------------

### Simple Side Effect for Request Middleware

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Implement simple side effects for request middleware using onSuccess callbacks, such as tracking request completion with analytics.

```typescript
createAxiomRequestMiddleware(startLogger, {
  onSuccess: async (data) => {
    await analytics.track('request_complete', {
      path: new URL(data.request.url).pathname,
      statusCode: data.response.status,
    });
  },
});
```

--------------------------------

### React Client Error Boundary with Axiom Logging

Source: https://github.com/axiomhq/axiom-js/blob/main/packages/tanstack-start/README.md

Integrate Axiom's error handling into React's TanStack Router error boundaries. Logs client-side errors using createAxiomReactErrorHandler.

```typescript
import { ErrorComponent, createRouter, type ErrorComponentProps } from '@tanstack/react-router';
import { useEffect } from 'react';
import { createAxiomReactErrorHandler } from '@axiomhq/tanstack-start/react';

const handleClientError = createAxiomReactErrorHandler(startLogger);

function RouterErrorBoundary({ error, reset }: ErrorComponentProps) {
  useEffect(() => {
    handleClientError(error);
  }, [error]);

  return <ErrorComponent error={error} />;
}

const router = createRouter({
  routeTree,
  defaultErrorComponent: RouterErrorBoundary,
});

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.