@composy/logger-vue

@composy/logger-vue

@composy/logger-vue 是 @composy/logger-core 的 Vue 3 适配层，提供：

• 原生 Vue Plugin 接入
• packages/engine plugin 接入
• useLogger / useErrorTracking / usePerformance 等 composables
• ErrorBoundary / LogViewer 组件

目录约定

src
├─ components       # Vue 组件
├─ composables      # 组合式 API
├─ plugin           # 原生 Vue 插件与统一安装器
├─ plugins          # engine 插件
└─ runtime          # Vue app 绑定、router 结构类型与运行时清理

设计说明

• 原生 Vue Plugin 与 engine plugin 共用同一份 logger runtime。
• app 安装逻辑统一收口在 install-logger-app.ts，避免重复维护 provide、globalProperties、错误处理器和路由接入。
• 如果 engine 比 Vue app 更早创建，插件会在后续 app:created 时自动完成注入。
• 如果 app 已经通过原生 Vue Plugin 安装了 logger，engine 插件会复用已有 binding，而不是再创建第二套实例。
• engine API 注册与 state 同步复用 @composy/logger-core/engine，Vue 层只补充 errorTracker、performanceMonitor 与 app 生命周期。
• Router 接入使用 LoggerRouterLike 结构类型，因此 vue-router 是可选 peer；传入真实 Vue Router 实例即可启用导航 breadcrumb 与路由错误追踪。

原生 Vue Plugin 用法

import { createConsoleTransport, createLoggerPlugin, LogLevel } from '@composy/logger-vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(
  createLoggerPlugin({
    name: 'demo-app',
    level: LogLevel.INFO,
    enableVueErrorHandler: true,
    enablePerformanceMonitoring: true,
    transports: [createConsoleTransport({ level: LogLevel.DEBUG })],
  })
)

app.mount('#app')

带路由追踪时直接传入真实 router：

app.use(
  createLoggerPlugin({
    router,
    enableRouterTracking: true,
  })
)

Engine Plugin 用法

import { createLoggerEnginePlugin } from '@composy/logger-vue'

engine.use(
  createLoggerEnginePlugin({
    name: 'logger',
    registerApi: true,
    enableRouterTracking: true,
  })
)

安装后可通过 engine state 获取：

• logger:instance
• logger:config
• logger:error-tracker
• logger:performance-monitor

Composables

import {
  useComponentLogger,
  useErrorTracking,
  useLogger,
  usePerformance,
} from '@composy/logger-vue'

const { info } = useLogger()
const componentLogger = useComponentLogger()
const { captureError } = useErrorTracking()
const { startTimer } = usePerformance()

info('page mounted')
componentLogger.warn('component warning')

const timer = startTimer('load-data')
await loadData()
timer.end()

captureError(new Error('manual capture'))

组件

<script setup lang="ts">
import { ErrorBoundary, LogViewer } from '@composy/logger-vue'
import { ref } from 'vue'

const logs = ref([])
</script>

<template>
  <ErrorBoundary>
    <SomeView />
  </ErrorBoundary>

  <LogViewer :logs="logs" height="320px" :show-export="true" />
</template>

开发命令

pnpm --filter @composy/logger-vue type-check
pnpm --filter @composy/logger-vue lint:check
pnpm --filter @composy/logger-vue build

构建产物

build 使用 @composy/builder，默认由 rolldown 打包。构建后的 postbuild 会校验并归一化 dist、es、esm、lib，其中 dist/index.min.js 是以 LDesignLoggerVue 为全局名生成的真实 UMD 压缩产物。

pnpm --filter @composy/logger-vue build
node --experimental-strip-types scripts/index.ts workspace:check-package-outputs --cwd packages/logger --target vue