Merge pull request #25 from zerodays/feat/custom-axiom-logging

Feat/custom axiom logging

Author: zigapk

.eslintrc.json

@@ -21,6 +21,7 @@
     }
   },
   "rules": {
+    "no-console": "error",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-explicit-any": "error",
     "react/react-in-jsx-scope": "off",
@@ -31,6 +32,17 @@
         "./src/**/*.{js,ts}": "KEBAB_CASE"
       },
       { "ignoreMiddleExtensions": true }
+    ],
+    "@typescript-eslint/no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "next-axiom",
+            "message": "For client side logging import from log-client, for server actions and server components import from log-server"
+          }
+        ]
+      }
     ]
   }
 }

.prettierrc.js

@@ -31,5 +31,5 @@ module.exports = {
   ],
   importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
   importOrderTypeScriptVersion: '5.0.0',
-  plugins: [require('prettier-plugin-tailwindcss')],
+  plugins: ['prettier-plugin-tailwindcss'],
 };

next.config.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { withSentryConfig } = require('@sentry/nextjs');
+const {withAxiom} = require("next-axiom")
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
@@ -10,7 +11,7 @@ const nextConfig = {
 };
 
 module.exports = withBundleAnalyzer(
-  withSentryConfig(
+  withAxiom(withSentryConfig(
     nextConfig,
     {
       // For all available options, see:
@@ -42,4 +43,4 @@ module.exports = withBundleAnalyzer(
       disableLogger: true,
     },
   ),
-);
+));

package.json

@@ -20,6 +20,7 @@
     "@sentry/nextjs": "7.77.0",
     "autoprefixer": "10.4.14",
     "next": "^14.0.0",
+    "next-axiom": "^1.1.0",
     "next-international": "^1.1.3",
     "postcss": "8.4.31",
     "react": "^18.2.0",
@@ -30,16 +31,16 @@
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "@types/node": "^20.8.9",
-    "@types/react": "^18.2.33",
-    "@types/react-dom": "^18.2.14",
     "@commitlint/cli": "^18.2.0",
     "@commitlint/config-conventional": "^18.1.0",
     "@commitlint/prompt-cli": "^18.2.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.7",
+    "@types/node": "^20.8.9",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "eslint": "^8.52.0",
     "eslint-config-next": "^14.0.1",
@@ -51,8 +52,8 @@
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.6",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "ts-jest": "^29.1.1",
     "tsx": "^3.14.0"
   }

pnpm-lock.yaml

@@ -1,10 +1,15 @@
 import { Inter } from 'next/font/google';
 
 import SampleForm from '@/components/sample-form';
+import serverLogger from '@/lib/axiom/log-server';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export default function Page() {
+  const logger = serverLogger();
+
+  logger.info('Hello from server logger!');
+
   return (
     <main
       className={`flex h-screen flex-col items-center justify-center gap-8 text-center ${inter.className}`}>

src/app/[locale]/page.tsx

@@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form';
 import { useScopedI18n } from '@/i18n/client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
+import useClientLogger from '@/lib/axiom/log-client';
 
 // Always use zod to validate your form
 const SampleFormSchema = z
@@ -20,6 +21,7 @@ type SampleFormValues = z.infer<typeof SampleFormSchema>;
 // Example form using react-hook-form and zod
 const SampleForm = () => {
   const t = useScopedI18n('form');
+  const logger = useClientLogger();
 
   const [submitting, setSubmitting] = useState(false);
 
@@ -34,7 +36,7 @@ const SampleForm = () => {
 
   const onSubmit = (values: SampleFormValues) => {
     // Handle form submission
-    console.log(values);
+    logger.info('Form values:', values);
     setSubmitting(true);
   };
 

src/components/sample-form.tsx

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { useLogger } from 'next-axiom';
+
+// Used by client components to log events
+const useClientLogger = () => {
+  // TODO: add custom data to logs
+  const logConfig = { todo: 'TODO' };
+  return useLogger().with(logConfig);
+};
+
+export default useClientLogger;

src/lib/axiom/log-client.tsx

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { Logger } from 'next-axiom';
+
+// Used by server actions + server components to log events
+const serverLogger = () => {
+  // TODO: add custom data to logs
+  const logConfig = { todo: 'TODO' };
+  return new Logger().with(logConfig);
+};
+
+export default serverLogger;

src/lib/axiom/log-server.ts

@@ -14,5 +14,5 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)'],
+  matcher: ['/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt|_axiom).*)'],
 };