72 lines
2.4 KiB
Markdown
72 lines
2.4 KiB
Markdown
|
# ✅ Logger Issues Fixed
|
||
|
|
|
||
|
|
## **Problems Solved:**
|
||
|
|
|
||
|
|
### 1. **fs/promises Module Resolution Error**
|
||
|
|
- **Issue**: Complex logging system was trying to import Node.js `fs/promises` in browser
|
||
|
|
- **Fix**: Removed complex logging directory, created single simple Pino logger
|
||
|
|
- **Result**: No more browser bundling errors
|
||
|
|
|
||
|
|
### 2. **Logo 404 Error**
|
||
|
|
- **Issue**: Missing logo file at `/assets/images/logo.png`
|
||
|
|
- **Fix**: Added `logo.svg` at `apps/portal/public/assets/images/logo.svg`
|
||
|
|
- **Result**: Logo loads correctly
|
||
|
|
|
||
|
|
### 3. **Overcomplicated Logger System**
|
||
|
|
- **Issue**: Multiple logger types, complex configurations, server-only code in browser
|
||
|
|
- **Fix**: Single Pino logger in `packages/shared/src/logger.ts`
|
||
|
|
- **Result**: Simple, centralized logging everywhere
|
||
|
|
|
||
|
|
### 4. **TypeScript Compilation Issues**
|
||
|
|
- **Issue**: Shared package wasn't building due to module resolution conflicts
|
||
|
|
- **Fix**: Updated `tsconfig.json` to use CommonJS and Node module resolution
|
||
|
|
- **Result**: Clean builds and type checking
|
||
|
|
|
||
|
|
### 5. **Incorrect Pino API Usage**
|
||
|
|
- **Issue**: Frontend code using `logger.error("message", error)` but Pino expects `logger.error(error, "message")`
|
||
|
|
- **Fix**: Updated all logger calls to use correct Pino API
|
||
|
|
- **Result**: No TypeScript errors, proper logging
|
||
|
|
|
||
|
|
## **Final Architecture:**
|
||
|
|
|
||
|
|
```
|
||
|
|
packages/shared/src/logger.ts ← Single Pino logger
|
||
|
|
├── Frontend: import { logger, log } from "@customer-portal/shared"
|
||
|
|
├── Backend: @Inject(Logger) + nestjs-pino (uses same config)
|
||
|
|
└── Helper: log.error("message", error) for convenience
|
||
|
|
```
|
||
|
|
|
||
|
|
## **Usage Examples:**
|
||
|
|
|
||
|
|
**Frontend:**
|
||
|
|
```typescript
|
||
|
|
import { logger, log } from "@/lib/logger";
|
||
|
|
|
||
|
|
// Pino API (data first, message second)
|
||
|
|
logger.error(error, "Something failed");
|
||
|
|
logger.info({ userId: "123" }, "User action");
|
||
|
|
|
||
|
|
// Helper functions (message first, data second)
|
||
|
|
log.error("Something failed", error);
|
||
|
|
log.info("User action", { userId: "123" });
|
||
|
|
```
|
||
|
|
|
||
|
|
**Backend:**
|
||
|
|
```typescript
|
||
|
|
// Dependency injection (recommended)
|
||
|
|
constructor(@Inject(Logger) private logger: Logger) {}
|
||
|
|
this.logger.info({ userId: "123" }, "User action");
|
||
|
|
|
||
|
|
// Direct import (if needed)
|
||
|
|
import { logger } from "@customer-portal/shared";
|
||
|
|
logger.info({ userId: "123" }, "User action");
|
||
|
|
```
|
||
|
|
|
||
|
|
## **Status: ✅ All Fixed**
|
||
|
|
- ✅ No more fs/promises errors
|
||
|
|
- ✅ Logo displays correctly
|
||
|
|
- ✅ Single centralized logger
|
||
|
|
- ✅ Clean TypeScript compilation
|
||
|
|
- ✅ Proper Pino API usage
|
||
|
|
- ✅ Production-ready with security redaction
|