From 0d6617835f84c127545abd267ba4e47f062fbcb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=BDan=20Horvat?= Date: Tue, 14 Nov 2023 13:12:06 +0100 Subject: [PATCH 1/6] fix: prettier --- .prettierrc.js | 2 +- package.json | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/.prettierrc.js b/.prettierrc.js index 6c29d5d..22dcae6 100644 --- a/.prettierrc.js +++ b/.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'], }; diff --git a/package.json b/package.json index 4cffb55..17ca564 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@sentry/nextjs": "7.76.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", @@ -29,9 +30,6 @@ "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", @@ -39,6 +37,9 @@ "@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", @@ -50,8 +51,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" } From 2a3dd50279766351a11a9df79343d01649896e64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=BDan=20Horvat?= Date: Tue, 14 Nov 2023 13:12:20 +0100 Subject: [PATCH 2/6] feat: add next-axiom --- next.config.js | 5 +++-- yarn.lock | 28 ++++++++++++++++++++-------- 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/next.config.js b/next.config.js index a44c604..733d478 100644 --- a/next.config.js +++ b/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, }, ), -); +)); diff --git a/yarn.lock b/yarn.lock index 717bfec..6da99d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5294,6 +5294,13 @@ natural-compare@^1.4.0: resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz" integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw== +next-axiom@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/next-axiom/-/next-axiom-1.1.0.tgz#fdf113f2286691bc0029c746d251eceb7d4ed36f" + integrity sha512-/Fh8MOM7gzeR58SA0HfF2ZyNp4WY3cv0hbH3XW3e0u3FG4IGPfFoRuNtpWx3qv4YCqm3jmoR3CVP/dc0VF6xMQ== + dependencies: + whatwg-fetch "^3.6.2" + next-international@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/next-international/-/next-international-1.1.3.tgz#4a5370aa28505ecc6aa08699dc8cea484b1f10f3" @@ -5749,15 +5756,15 @@ prelude-ls@^1.2.1: resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prettier-plugin-tailwindcss@^0.5.6: - version "0.5.6" - resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.6.tgz#8e511857a49bf127f078985f52b04a70e8e92285" - integrity sha512-2Xgb+GQlkPAUCFi3sV+NOYcSI5XgduvDBL2Zt/hwJudeKXkyvRS65c38SB0yb9UB40+1rL83I6m0RtlOQ8eHdg== +prettier-plugin-tailwindcss@^0.5.7: + version "0.5.7" + resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.7.tgz#d05dc42c6f2167e3bf2c20e9f71a1fff4232b5d9" + integrity sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ== -prettier@^3.0.3: - version "3.0.3" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643" - integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg== +prettier@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.0.tgz#c6d16474a5f764ea1a4a373c593b779697744d5e" + integrity sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw== pretty-format@^27.0.2: version "27.5.1" @@ -6969,6 +6976,11 @@ whatwg-encoding@^2.0.0: dependencies: iconv-lite "0.6.3" +whatwg-fetch@^3.6.2: + version "3.6.19" + resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.19.tgz#caefd92ae630b91c07345537e67f8354db470973" + integrity sha512-d67JP4dHSbm2TrpFj8AbO8DnL1JXL5J9u0Kq2xW6d0TFDbCA3Muhdt8orXC22utleTVj7Prqt82baN6RBvnEgw== + whatwg-mimetype@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz" From 518eac2e0dea2bde63e4de57c3fd43d6495f1141 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=BDan=20Horvat?= Date: Tue, 14 Nov 2023 14:15:25 +0100 Subject: [PATCH 3/6] feat: add custom axiom logger --- .eslintrc.json | 12 ++++++++++++ src/app/[locale]/page.tsx | 5 +++++ src/components/sample-form.tsx | 4 +++- src/lib/axiom/log-client.tsx | 11 +++++++++++ src/lib/axiom/log-server.tsx | 11 +++++++++++ 5 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 src/lib/axiom/log-client.tsx create mode 100644 src/lib/axiom/log-server.tsx diff --git a/.eslintrc.json b/.eslintrc.json index 05be565..8a07304 100644 --- a/.eslintrc.json +++ b/.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" + } + ] + } ] } } diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx index 65b645d..07f5fac 100644 --- a/src/app/[locale]/page.tsx +++ b/src/app/[locale]/page.tsx @@ -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 (
diff --git a/src/components/sample-form.tsx b/src/components/sample-form.tsx index 59f3412..000e950 100644 --- a/src/components/sample-form.tsx +++ b/src/components/sample-form.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; // 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); }; diff --git a/src/lib/axiom/log-client.tsx b/src/lib/axiom/log-client.tsx new file mode 100644 index 0000000..bf57816 --- /dev/null +++ b/src/lib/axiom/log-client.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; diff --git a/src/lib/axiom/log-server.tsx b/src/lib/axiom/log-server.tsx new file mode 100644 index 0000000..d2d305f --- /dev/null +++ b/src/lib/axiom/log-server.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; From 46718b910374f9a504bd399199aa2d7e2129377c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=BDan=20Horvat?= Date: Tue, 14 Nov 2023 15:31:43 +0100 Subject: [PATCH 4/6] refactor: server logger to .ts from .tsx --- src/lib/axiom/{log-server.tsx => log-server.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/lib/axiom/{log-server.tsx => log-server.ts} (100%) diff --git a/src/lib/axiom/log-server.tsx b/src/lib/axiom/log-server.ts similarity index 100% rename from src/lib/axiom/log-server.tsx rename to src/lib/axiom/log-server.ts From 34cd79eaea9fefc8646ccf2efbfee4f9971068a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=BDan=20Horvat?= Date: Tue, 14 Nov 2023 16:27:04 +0100 Subject: [PATCH 5/6] fix: matcher in middleware --- src/middleware.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/middleware.ts b/src/middleware.ts index 10c3ef2..e7494da 100644 --- a/src/middleware.ts +++ b/src/middleware.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).*)'], }; From 441eba908eff9c8edc2763b6419edae254c89b23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=BDiga=20Pata=C4=8Dko=20Koderman?= Date: Wed, 15 Nov 2023 13:49:35 +0100 Subject: [PATCH 6/6] fix: update pnpm-lock --- pnpm-lock.yaml | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 525ec1f..db13c15 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ dependencies: next: specifier: ^14.0.0 version: 14.0.2(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0) + next-axiom: + specifier: ^1.1.0 + version: 1.1.0(next@14.0.2)(react@18.2.0) next-international: specifier: ^1.1.3 version: 1.1.4 @@ -110,10 +113,10 @@ devDependencies: specifier: ^29.7.0 version: 29.7.0 prettier: - specifier: ^3.0.3 + specifier: ^3.1.0 version: 3.1.0 prettier-plugin-tailwindcss: - specifier: ^0.5.6 + specifier: ^0.5.7 version: 0.5.7(@ianvs/prettier-plugin-sort-imports@4.1.1)(prettier@3.1.0) ts-jest: specifier: ^29.1.1 @@ -5054,6 +5057,18 @@ packages: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true + /next-axiom@1.1.0(next@14.0.2)(react@18.2.0): + resolution: {integrity: sha512-/Fh8MOM7gzeR58SA0HfF2ZyNp4WY3cv0hbH3XW3e0u3FG4IGPfFoRuNtpWx3qv4YCqm3jmoR3CVP/dc0VF6xMQ==} + engines: {node: '>=18'} + peerDependencies: + next: '>=13.4' + react: '>=18.0.0' + dependencies: + next: 14.0.2(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + whatwg-fetch: 3.6.19 + dev: false + /next-international@1.1.4: resolution: {integrity: sha512-peIJXXEC5lM7zZONCgN1uUxCkIHpSW1pZuHoRTp9ND14K7CDdHajDMz9RTxVCmQUGWXSaqruM6XVAuq4d+Gpxg==} dependencies: @@ -6612,6 +6627,10 @@ packages: iconv-lite: 0.6.3 dev: true + /whatwg-fetch@3.6.19: + resolution: {integrity: sha512-d67JP4dHSbm2TrpFj8AbO8DnL1JXL5J9u0Kq2xW6d0TFDbCA3Muhdt8orXC22utleTVj7Prqt82baN6RBvnEgw==} + dev: false + /whatwg-mimetype@3.0.0: resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==} engines: {node: '>=12'}