feat(logging): add request logging to board page (#1666)

* feat(logging): add pino logger

* feat(logging): add middleware and logging to board page

tavla/middleware.ts

@@ -0,0 +1,26 @@
+import { NextResponse, userAgent } from 'next/server'
+import type { NextRequest } from 'next/server'
+import { logger } from 'utils/logger'
+
+const log = logger.child({ module: 'middleware' })
+export function middleware(request: NextRequest) {
+    const response = NextResponse.next()
+    log.info({
+        request: {
+            browser: userAgent(request).browser,
+            device: userAgent(request).device,
+            url: request.url,
+            path: request.nextUrl.pathname,
+            method: request.method,
+        },
+        response: {
+            status: response.status,
+            body: response.body,
+        },
+    })
+    return response
+}
+
+export const config = {
+    matcher: ['/:id(\\w{20})'],
+}

tavla/next.config.js

@@ -3,10 +3,10 @@ const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: 'standalone',
-  transpilePackages: ['swr', "tailwindcss"],
+    transpilePackages: ['swr', 'tailwindcss'],
     i18n: {
-      locales: ["nb"],
-      defaultLocale: "nb"
+        locales: ['nb'],
+        defaultLocale: 'nb',
     },
     images: {
         remotePatterns: [
@@ -20,17 +20,20 @@ const nextConfig = {
             },
         ],
     },
+    experimental: {
+        serverComponentsExternalPackages: ['pino', 'pino-pretty'],
+    },
 }
 
 module.exports = async (phase, { defaultConfig }) => {
     if (phase === PHASE_DEVELOPMENT_SERVER) {
         nextConfig.images.remotePatterns.push({
             protocol: 'http',
-            hostname: 'localhost'
+            hostname: 'localhost',
         })
         nextConfig.images.remotePatterns.push({
             protocol: 'http',
-            hostname: '127.0.0.1'
+            hostname: '127.0.0.1',
         })
     }
 

tavla/package.json

@@ -51,6 +51,8 @@
         "lodash": "4.17.21",
         "nanoid": "4.0.2",
         "next": "14.2.4",
+        "pino": "9.4.0",
+        "pino-pretty": "11.2.2",
         "posthog-js": "1.155.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",

tavla/pages/[id].tsx

@@ -10,7 +10,9 @@ import { useRefresh } from 'hooks/useRefresh'
 import { getBackendUrl } from 'utils/index'
 import Head from 'next/head'
 import { useEffect } from 'react'
+import { logger } from 'utils/logger'
 
+const log = logger.child({ module: 'board' })
 export async function getServerSideProps({
     params,
 }: {
@@ -44,6 +46,10 @@ function BoardPage({
     backend_url: string
 }) {
     const updatedBoard = useRefresh(board, backend_url)
+    log.info({
+        boardID: board.id,
+        organization: organization?.name,
+    })
 
     const title = updatedBoard.meta?.title
         ? updatedBoard.meta.title + ' | Entur tavla'

tavla/src/Shared/utils/logger.ts

@@ -0,0 +1,38 @@
+import pino, { Logger } from 'pino'
+
+const PinoLevelToSeverityLookup: { [key: string]: string } = {
+    trace: 'DEBUG',
+    debug: 'DEBUG',
+    info: 'INFO',
+    warn: 'WARNING',
+    error: 'ERROR',
+    fatal: 'CRITICAL',
+}
+
+const defaultPinoConf = {
+    messageKey: 'message',
+    formatters: {
+        level(label: string, number: number) {
+            return {
+                severity:
+                    PinoLevelToSeverityLookup[label] ||
+                    PinoLevelToSeverityLookup['info'],
+                level: number,
+            }
+        },
+    },
+}
+
+export const logger: Logger =
+    process.env.COMMON_ENV === 'prd'
+        ? pino({ level: 'warn', ...defaultPinoConf })
+        : pino({
+              transport: {
+                  target: 'pino-pretty',
+                  options: {
+                      colorize: true,
+                  },
+              },
+              level: 'debug',
+              ...defaultPinoConf,
+          })