feat: Add axiom logger, nextjs and react libraries

.github/workflows/ci.yml

@@ -40,11 +40,42 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
           cache: 'pnpm'
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: ./node_modules/.cache/turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
       - run: pnpm install --frozen-lockfile
       - run: pnpm build && pnpm build:cjs
       - run: pnpm lint
       - run: pnpm test
-
+
+  preview-release:
+    name: Preview release
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'pnpm'
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: ./node_modules/.cache/turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run build --filter='./packages/*' && pnpm run build:cjs --filter='./packages/*'
+      - run: pnpx pkg-pr-new publish './packages/*'
+
   check-winston-example:
     name: Check Winston example
     runs-on: ubuntu-latest
@@ -87,6 +118,13 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
           cache: 'pnpm'
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: ./node_modules/.cache/turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
       - run: pnpm install --frozen-lockfile
       - run: pnpm build && pnpm build:cjs
       - env:
@@ -134,6 +172,13 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
           cache: 'pnpm'
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: ./node_modules/.cache/turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
       - run: pnpm install --frozen-lockfile
       - run: pnpm build && pnpm build:cjs # cjs build needed to run tests
       - env:

examples/js/package.json

@@ -14,6 +14,6 @@
     "winston": "^3.14.2"
   },
   "devDependencies": {
-    "@repo/eslint-config": "workspace:^"
+    "@repo/eslint-config": "workspace:*"
   }
 }

examples/nextjs/.env.example

@@ -0,0 +1,3 @@
+AXIOM_TOKEN=""
+AXIOM_DATASET=""
+NEXT_PUBLIC_AXIOM_PROXY_URL="/api/axiom"

examples/nextjs/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

examples/nextjs/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

examples/nextjs/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

examples/nextjs/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@axiomhq/logging": "workspace:*",
+    "@axiomhq/nextjs": "workspace:*",
+    "@axiomhq/react": "workspace:*",
+    "next": "15.1.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.4",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5",
+    "vite": "^5.2.14"
+  }
+}

examples/nextjs/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

examples/nextjs/src/app/[[...path]]/page.tsx

@@ -0,0 +1,23 @@
+import Button from '@/app/_components/button';
+import { logger } from '@/lib/axiom/server';
+import Link from 'next/link';
+import { after } from 'next/server';
+
+export default function Home() {
+  logger.info('Hello World!', { key: 'value' });
+
+  after(() => {
+    logger.flush();
+  });
+
+  return (
+    <div>
+      <Button />
+      <div className="flex gap-2">
+        <Link href="/about">About</Link>
+        <Link href="/blog">Blog</Link>
+        <Link href="/home">Home</Link>
+      </div>
+    </div>
+  );
+}

examples/nextjs/src/app/_components/button.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useLogger } from '@/lib/axiom/client';
+
+export default function Button() {
+  const logger = useLogger();
+
+  const handleClick = () => {
+    logger.info('Hello World from Client Side!', { key: 'value' });
+  };
+
+  return (
+    <div>
+      <button style={{ color: 'red' }} onClick={handleClick}>
+        Log
+      </button>
+    </div>
+  );
+}

examples/nextjs/src/app/api/axiom/route.ts

@@ -0,0 +1,4 @@
+import { logger } from '@/lib/axiom/server';
+import { createProxyRouteHandler } from '@axiomhq/nextjs';
+
+export const POST = createProxyRouteHandler(logger);

examples/nextjs/src/app/api/route.ts

@@ -0,0 +1,11 @@
+import { logger, withAxiom } from '@/lib/axiom/server';
+
+export const GET = withAxiom(async () => {
+  logger.info('Hello World!');
+  return new Response('Hello World!');
+});
+
+export const POST = withAxiom(async (req) => {
+  logger.info('Hello World!');
+  return new Response(JSON.stringify(req.body));
+});

examples/nextjs/src/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

examples/nextjs/src/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+
+import './globals.css';
+import { WebVitals } from '@/lib/axiom/client';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <WebVitals />
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+    </html>
+  );
+}

examples/nextjs/src/instrumentation.ts

@@ -0,0 +1,4 @@
+import { logger } from '@/lib/axiom/server';
+import { createOnRequestError } from '@axiomhq/nextjs';
+
+export const onRequestError = createOnRequestError(logger);

examples/nextjs/src/lib/axiom/client.ts

@@ -0,0 +1,16 @@
+'use client';
+
+import { Logger, ProxyTransport, ConsoleTransport } from '@axiomhq/logging';
+import { createUseLogger, createWebVitalsComponent } from '@axiomhq/react';
+
+export const logger = new Logger({
+  transports: [
+    new ProxyTransport({ url: process.env.NEXT_PUBLIC_AXIOM_PROXY_URL!, autoFlush: true }),
+    new ConsoleTransport(),
+  ],
+});
+
+const useLogger = createUseLogger(logger);
+const WebVitals = createWebVitalsComponent(logger);
+
+export { useLogger, WebVitals };

examples/nextjs/src/lib/axiom/server.ts

@@ -0,0 +1,15 @@
+import { Logger, AxiomFetchTransport, ConsoleTransport } from '@axiomhq/logging';
+import { createAxiomRouteHandler, serverContextFieldsFormatter } from '@axiomhq/nextjs';
+
+export const logger = new Logger({
+  transports: [
+    new AxiomFetchTransport({
+      dataset: process.env.AXIOM_DATASET!,
+      token: process.env.AXIOM_TOKEN!,
+    }),
+    new ConsoleTransport({ prettyPrint: true }),
+  ],
+  formatters: [serverContextFieldsFormatter],
+});
+
+export const withAxiom = createAxiomRouteHandler(logger);