...
\n \n );\n}\n```\n\nWeb Vitals are only sent from production deployments.\n\n## Logs\n\nSend logs to Axiom from different parts of your app. Each log function call takes a message and an optional `fields` object.\n\n```ts\nlog.debug('Login attempt', { user: 'j_doe', status: 'success' }); // Results in {\"message\": \"Login attempt\", \"fields\": {\"user\": \"j_doe\", \"status\": \"success\"}}\nlog.info('Payment completed', { userID: '123', amount: '25USD' });\nlog.warn('API rate limit exceeded', { endpoint: '/users/1', rateLimitRemaining: 0 });\nlog.error('System Error', { code: '500', message: 'Internal server error' });\n```\n\n### Route handlers\n\nWrap your route handlers in `withAxiom` to add a logger to your request and log exceptions automatically:\n\n```ts\nimport { withAxiom, AxiomRequest } from 'next-axiom';\n\nexport const GET = withAxiom((req: AxiomRequest) => {\n req.log.info('Login function called');\n\n // You can create intermediate loggers\n const log = req.log.with({ scope: 'user' });\n log.info('User logged in', { userId: 42 });\n\n return NextResponse.json({ hello: 'world' });\n});\n```\n\nRoute handlers accept a configuration object as the second argument. This object can contain the following properties:\n\n- `logRequestDetails`: Accepts a boolean or an array of keys. If you pass `true`, it will add all the request details to the log (method, URL, headers, etc.). If you pass an array of strings, it will only add the specified keys. See [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request/url) and [NextRequest](https://nextjs.org/docs/app/api-reference/functions/next-request) for documentation on the available keys.\n\n\n- `NotFoundLogLevel`: Override the log level for NOT_FOUND errors. Defaults to `warn`.\n\n- `RedirectLogLevel`: Override the log level for NEXT_REDIRECT errors. Defaults to `info`.\n\n\nConfig example: \n\n```ts\nexport const GET = withAxiom(\n async () => {\n return new Response(\"Hello World!\");\n },\n { \n logRequestDetails: ['body', 'nextUrl'], // { logRequestDetails: true } is also valid\n NotFoundLogLevel: 'error',\n RedirectLogLevel: 'debug',\n }\n);\n```\n\n### Client components\n\nTo send logs from client components, add `useLogger` from next-axiom to your component:\n\n```ts\n'use client';\nimport { useLogger } from 'next-axiom';\n\nexport default function ClientComponent() {\n const log = useLogger();\n log.debug('User logged in', { userId: 42 });\n return \n Ops! An Error has occurred:{\" \"}\n
`{error.message}`
\n
\n \n
\n
![\"Axiom.co](\"https://axiom.co/assets/github/axiom-github-banner-dark-horizontal.svg\")
\n