DebuggerNg - Angular 分層架構日誌庫

一個採用分層架構設計的 Angular 日誌庫，提供結構化的日誌記錄和自動批次發送功能。

🏗️ 架構設計

本庫採用分層架構 (Layered Architecture)，分為四個清晰的層次：

├── Dto 層          # 資料傳輸物件與類型定義
├── Access 層       # API 呼叫與例外處理
├── Service 層      # 核心業務邏輯
└── Controller 層   # UI 對接介面

📁 檔案結構

src/lib/
├── dto/
│   ├── debugger-log-level.enum.ts    # 日誌層級枚舉
│   ├── debugger-log.dto.ts           # 日誌資料結構
│   └── debugger-config.dto.ts        # 配置資料結構
├── access/
│   └── debugger-ng.api.ts            # API 呼叫服務
├── service/
│   └── debugger-ng.service.ts        # 核心日誌服務
└── controller/
    └── debugger-ng.controller.ts     # 控制器介面

🚀 安裝

npm install debugger-ng

💡 使用方式

1. 在 AppModule 中導入必要模組

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule],
  // ...
})
export class AppModule {}

2. 在元件中使用

import { Component, OnInit } from '@angular/core';
import { DebuggerNgController } from 'debugger-ng';

@Component({
  selector: 'app-root',
  template: '<h1>My App</h1>'
})
export class AppComponent implements OnInit {
  constructor(private debuggerController: DebuggerNgController) {}

  ngOnInit(): void {
    // 初始化設定
    this.debuggerController.init({
      apiEndpoint: 'https://your-api.com/logs',
      appName: 'MyApp',
      environment: 'production',
      enabled: true
    });

    // 記錄日誌
    this.debuggerController.logInfo('應用程式啟動', 'AppComponent');
    this.debuggerController.logWarning('低儲存空間', 'DiskService', { available: '1GB' });
    this.debuggerController.logError('未處理的例外', 'ErrorHandler', { code: 500 });
  }
}

🔧 API 參考

DebuggerNgController

主要的控制器介面，提供以下方法：

init(config: DebuggerConfigDto): void

初始化 debugger 設定

logInfo(message: string, context?: string, metadata?: Record<string, unknown>): void

記錄資訊層級日誌

logWarning(message: string, context?: string, metadata?: Record<string, unknown>): void

記錄警告層級日誌

logError(message: string, context?: string, metadata?: Record<string, unknown>): void

記錄錯誤層級日誌

flushLogs(): void

手動刷新日誌到伺服器

DebuggerConfigDto

interface DebuggerConfigDto {
  apiEndpoint: string;    // API 端點 URL
  appName?: string;       // 應用程式名稱
  environment?: string;   // 環境名稱
  enabled?: boolean;      // 是否啟用
}

DebuggerLogDto

interface DebuggerLogDto {
  level: DebuggerLogLevel;              // 日誌層級
  message: string;                      // 訊息內容
  timestamp: string;                    // 時間戳記
  context?: string;                     // 上下文
  metadata?: Record<string, unknown>;   // 額外資料
}

⚡ 特性

• 分層架構: 清晰的關注點分離
• 自動批次發送: 每30秒自動發送日誌到伺服器
• 例外處理: Access 層統一處理 API 呼叫例外
• TypeScript 支援: 完整的型別定義
• Angular 19 相容: 支援最新的 Angular 版本
• 本地端日誌: 同步輸出到瀏覽器 console

🛠️ 開發

# 安裝依賴
npm install

# 建置庫
npm run build

# 執行測試
npm test

# 執行 lint
npm run lint

📄 License

MIT License

🤝 貢獻

歡迎提交 Issue 和 Pull Request！