...
);
}
```
Web Vitals are only sent from production deployments.
## Logs
Send logs to Axiom from different parts of your app. Each log function call takes a message and an optional `fields` object.
```ts
log.debug('Login attempt', { user: 'j_doe', status: 'success' }); // Results in {"message": "Login attempt", "fields": {"user": "j_doe", "status": "success"}}
log.info('Payment completed', { userID: '123', amount: '25USD' });
log.warn('API rate limit exceeded', { endpoint: '/users/1', rateLimitRemaining: 0 });
log.error('System Error', { code: '500', message: 'Internal server error' });
```
### Route handlers
Wrap your route handlers in `withAxiom` to add a logger to your request and log exceptions automatically:
```ts
import { withAxiom, AxiomRequest } from 'next-axiom';
export const GET = withAxiom((req: AxiomRequest) => {
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 });
return NextResponse.json({ hello: 'world' });
});
```
### Client components
To send logs from client components, add `useLogger` from next-axiom to your component:
```ts
'use client';
import { useLogger } from 'next-axiom';
export default function ClientComponent() {
const log = useLogger();
log.debug('User logged in', { userId: 42 });
return
Ops! An Error has occurred:{" "}
`{error.message}`
);
}
```
## Extend logger
To extend the logger, use `log.with` to create an intermediate logger. For example:
```typescript
const logger = userLogger().with({ userId: 42 });
logger.info('Hi'); // will ingest { ..., "message": "Hi", "fields" { "userId": 42 }}
```
# Send OpenTelemetry data to Axiom
Learn how OpenTelemetry-compatible events flow into Axiom and explore Axiom comprehensive observability through browsing, querying, dashboards, and alerting of OpenTelemetry data.
OpenTelemetry (OTel) is a set of APIs, libraries, and agents to capture distributed traces and metrics from your app. It’s a Cloud Native Computing Foundation (CNCF) project that was started to create a unified solution for service and app performance monitoring.
The OpenTelemetry project has published strong specifications for the three main pillars of observability: logs, traces, and metrics. These schemas are supported by all tools and services that support interacting with OpenTelemetry. Axiom supports OpenTelemetry natively on an API level, allowing you to connect any existing OpenTelemetry shipper, library, or tool to Axiom for sending data.
OpenTelemetry-compatible events flow into Axiom, where they’re organized into datasets for easy segmentation. Users can create a dataset to receive OpenTelemetry data and obtain an API token for ingestion. Axiom provides comprehensive observability through browsing, querying, dashboards, and alerting of OpenTelemetry data.
OTel traces and OTel logs support are already live. Axiom will soon support OpenTelemetry Metrics (OTel Metrics).
| OpenTelemetry component | Currently supported |
| ------------------------------------------------------------------ | ------------------- |
| [Traces](https://opentelemetry.io/docs/concepts/signals/traces/) | Yes |
| [Logs](https://opentelemetry.io/docs/concepts/signals/logs/) | Yes |
| [Metrics](https://opentelemetry.io/docs/concepts/signals/metrics/) | No (coming soon) |
## OpenTelemetry Collector
Configuring the OpenTelemetry collector is as simple as creating an HTTP exporter that sends data to the Axiom API together with headers to set the dataset and API token:
```yaml
exporters:
otlphttp:
compression: gzip
endpoint: https://api.axiom.co
headers:
authorization: Bearer