← Back to Home

Framework Integrations

Official integrations for every major framework. Auto-instrument your app with zero configuration.

All Supported Frameworks

Express Node.js

Middleware for request logging, error handling, and request IDs.

Fastify Node.js

Plugin for auto-logging requests and responses with hooks.

Koa Node.js

Middleware for request/response logging with error handling.

Hono Edge

Middleware for edge runtimes with request tracking.

NestJS Node.js

Module, interceptor, exception filter, and injectable logger.

Next.js React

Plugin for API routes and server components instrumentation.

React Frontend

Hooks for component lifecycle and async operations.

Angular Frontend

Service, HTTP interceptor, and global error handler.

Vue Frontend

Plugin, composable, and Vue 2 compatible support.

Svelte Frontend

Function for component logging and async tracking.

SvelteKit Full-stack

Server hook and logger for routes and API endpoints.

Astro Static

Integration for build and dev server logging.

CLI Node.js

Command tracking, progress bars, and tables.

🟢 Express.js

const { betterLogger, betterErrorHandler } = require('@better-logger/express')

const app = express()
app.use(betterLogger({ logBody: false, redactFields: ['password'] }))
app.use(betterErrorHandler)

🟣 Fastify

const fastify = require('fastify')()
await fastify.register(require('@better-logger/fastify'))

🔴 Koa

const Koa = require('koa')
const { betterLogger, betterErrorHandler } = require('@better-logger/koa')

const app = new Koa()
app.use(betterLogger())
app.on('error', betterErrorHandler)

🔵 Hono

import { Hono } from 'hono'
import { betterLogger, betterErrorHandler } from '@better-logger/hono'

const app = new Hono()
app.use('*', betterLogger())
app.onError(betterErrorHandler)

🔴 NestJS

import { BetterLoggerModule, BetterLoggerInterceptor } from '@better-logger/nestjs'

@Module({
  imports: [BetterLoggerModule.forRoot({ redactFields: ['password'] })],
  providers: [{
    provide: APP_INTERCEPTOR,
    useClass: BetterLoggerInterceptor
  }]
})
export class AppModule {}

▲ Next.js

// next.config.js
const withBetter = require('@better-logger/nextjs')
module.exports = withBetter({ /* config */ })

// pages/api/users.js
import { withBetterLoggerAPI } from '@better-logger/nextjs'
export default withBetterLoggerAPI(async (req, res) => { ... })

⚛️ React

import { useComponentLogger, useAsyncLogger, BetterErrorBoundary } from '@better-logger/react'

function UserProfile({ userId }) {
  const logger = useComponentLogger('UserProfile')
  const fetchData = useAsyncLogger('fetch-user')

  useEffect(() => {
    logger.mount({ userId })
    return () => logger.unmount({ userId })
  }, [userId])
}

🅰️ Angular

import { BetterLoggerModule } from '@better-logger/angular'

@NgModule({
  imports: [BetterLoggerModule.forRoot({ redactFields: ['password'] })],
  providers: [{ provide: ErrorHandler, useClass: BetterLoggerErrorHandler }]
})
export class AppModule {}

// component.ts
constructor(private logger: BetterLoggerService) {}
this.logger.log('Component initialized')

💚 Vue

import { BetterLoggerPlugin } from '@better-logger/vue'

const app = createApp(App)
app.use(BetterLoggerPlugin, { redactFields: ['password'] })

// component.vue
import { useLogger } from '@better-logger/vue'
const logger = useLogger('MyComponent')
logger.log('Component mounted')

🟠 Svelte

<script>
import { useLogger, track } from '@better-logger/svelte'
const logger = useLogger('MyComponent')

const data = await track('fetch-data', () => fetch('/api/data'))
logger.log('Data loaded', { count: data.length })
</script>

🟡 SvelteKit

// hooks.server.js
import { betterLogger, serverLogger } from '@better-logger/sveltekit'
export const handle = betterLogger()

// +page.server.js
const logger = serverLogger('load')
export async function load() {
  logger.log('Page loaded')
}

🚀 Astro

// astro.config.mjs
import { defineConfig } from 'astro/config'
import betterLogger from '@better-logger/astro'

export default defineConfig({
  integrations: [betterLogger({ redactFields: ['password'] })]
})

💻 CLI Tools

const { command, step, progress, table } = require('@better-logger/cli')

await command('build', async () => {
  await step('compile', async () => { /* ... */ })
  progress(50, 100, 'bundling...')
})

Core vs Package: When to use what?

You can always use @better-logger/core directly in any framework. Framework packages are for zero-config auto-instrumentation.

Scenario	Use Core	Use Package
Simple app	Perfect. Just `better.log()` calls.	Not needed.
Auto-request logging	Write manual middleware.	✅ One line: `app.use(betterLogger())`.
Error handling	Manual `try/catch` blocks.	✅ Built-in error handler integration.
Component lifecycle	Manual `useEffect` calls.	✅ Hooks like `useComponentLogger()`.
HTTP Interception	Manual fetch/axios wrappers.	✅ Auto-interceptor (Angular/NestJS).
Server Components	Manual flow creation.	✅ Plugin handles Next.js/Astro routing.

Complete Package List

Package	Framework	Install
`@better-logger/express`	Express.js	`npm i @better-logger/express`
`@better-logger/fastify`	Fastify	`npm i @better-logger/fastify`
`@better-logger/koa`	Koa	`npm i @better-logger/koa`
`@better-logger/hono`	Hono	`npm i @better-logger/hono`
`@better-logger/nestjs`	NestJS	`npm i @better-logger/nestjs`
`@better-logger/nextjs`	Next.js	`npm i @better-logger/nextjs`
`@better-logger/react`	React	`npm i @better-logger/react`
`@better-logger/angular`	Angular	`npm i @better-logger/angular`
`@better-logger/vue`	Vue 2/3	`npm i @better-logger/vue`
`@better-logger/svelte`	Svelte	`npm i @better-logger/svelte`
`@better-logger/sveltekit`	SvelteKit	`npm i @better-logger/sveltekit`
`@better-logger/astro`	Astro	`npm i @better-logger/astro`
`@better-logger/cli`	CLI	`npm i @better-logger/cli`