@smartsoft001/pro-claude-plugins 0.2.0

package/plugins/flow-legacy/skills/debug-helper/SKILL.md

@@ -0,0 +1,395 @@
+---
+name: debug-helper
+description: Cross-stack debugging workflows for Angular 14, NestJS, and MongoDB applications
+---
+
+# Debug Helper (Angular 14 Legacy)
+
+This skill provides debugging workflows and techniques for Angular 14 legacy projects.
+
+## 1. Angular 14 Debugging
+
+### Component Not Rendering
+
+1. **Check selector usage**
+
+   ```typescript
+   // Verify selector matches
+   @Component({ selector: 'app-my-component' })
+   // Template: <app-my-component></app-my-component>
+   ```
+
+2. **Check module declarations**
+
+   ```typescript
+   @NgModule({
+     declarations: [MyComponent], // Is it declared?
+     exports: [MyComponent], // Is it exported (if used outside)?
+   })
+   export class FeatureModule {}
+   ```
+
+3. **Check module imports**
+   ```typescript
+   @NgModule({
+     imports: [FeatureModule], // Is feature module imported?
+   })
+   export class AppModule {}
+   ```
+
+### BehaviorSubject/Observable Issues
+
+1. **BehaviorSubject not updating view**
+
+   ```typescript
+   // Wrong: mutating array directly
+   const items = this._items.getValue();
+   items.push(newItem); // Won't trigger update
+   this._items.next(items);
+
+   // Correct: create new reference
+   const items = this._items.getValue();
+   this._items.next([...items, newItem]);
+   ```
+
+2. **Subscription not receiving values**
+
+   ```typescript
+   // Ensure subscription is active
+   ngOnInit(): void {
+     this.items$ = this.stateService.items$;
+
+     // Debug: log values
+     this.items$.pipe(
+       tap(items => console.log('Items received:', items)),
+       takeUntil(this.destroy$)
+     ).subscribe();
+   }
+   ```
+
+3. **Memory leak from subscriptions**
+
+   ```typescript
+   // Always unsubscribe with takeUntil pattern
+   private readonly destroy$ = new Subject<void>();
+
+   ngOnInit(): void {
+     this.service.data$
+       .pipe(takeUntil(this.destroy$))
+       .subscribe(data => this.data = data);
+   }
+
+   ngOnDestroy(): void {
+     this.destroy$.next();
+     this.destroy$.complete();
+   }
+   ```
+
+### Change Detection Issues
+
+```typescript
+// Force change detection (use sparingly)
+constructor(private cdr: ChangeDetectorRef) {}
+
+// After async operation
+this.cdr.detectChanges();
+
+// Or mark for check (OnPush)
+this.cdr.markForCheck();
+```
+
+### HTTP Debugging (Angular 14)
+
+```typescript
+// HTTP interceptor for logging
+@Injectable()
+export class LoggingInterceptor implements HttpInterceptor {
+  intercept(
+    req: HttpRequest<any>,
+    next: HttpHandler,
+  ): Observable<HttpEvent<any>> {
+    console.log('Request:', req.method, req.url);
+
+    return next.handle(req).pipe(
+      tap({
+        next: (event) => {
+          if (event instanceof HttpResponse) {
+            console.log('Response:', event.status, event.body);
+          }
+        },
+        error: (error) => console.error('HTTP Error:', error),
+      }),
+    );
+  }
+}
+
+// Register in module
+@NgModule({
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
+  ],
+})
+export class AppModule {}
+```
+
+### Template Debugging
+
+```html
+<!-- Debug in template with json pipe -->
+<pre>{{ data | json }}</pre>
+
+<!-- Debug *ngIf condition -->
+<p>isLoading: {{ isLoading }}</p>
+<p>items.length: {{ items?.length }}</p>
+
+<!-- Debug *ngFor -->
+<div *ngFor="let item of items; let i = index">{{ i }}: {{ item | json }}</div>
+```
+
+### Browser DevTools
+
+1. **Angular DevTools** - Install Chrome extension (works with Angular 14)
+2. **Component inspector** - Click "Components" tab
+3. **Profiler** - Record change detection cycles
+4. **Network tab** - Check API calls
+
+## 2. NestJS Debugging
+
+### Request Not Reaching Controller
+
+1. **Check route path**
+
+   ```typescript
+   @Controller('features')  // /features
+   @Get(':id')              // /features/:id
+   ```
+
+2. **Check module imports**
+
+   ```typescript
+   @Module({
+     imports: [FeatureModule], // Is module imported?
+   })
+   export class AppModule {}
+   ```
+
+3. **Check guards/interceptors**
+   ```typescript
+   @UseGuards(AuthGuard)  // Is guard blocking?
+   ```
+
+### Dependency Injection Errors
+
+```
+Error: Nest can't resolve dependencies of FeatureService
+```
+
+**Solutions:**
+
+1. Check provider is in module
+
+   ```typescript
+   @Module({
+     providers: [FeatureService, FeatureRepository],
+   })
+   ```
+
+2. Check circular dependencies
+
+   ```typescript
+   // Use forwardRef
+   @Inject(forwardRef(() => OtherService))
+   private readonly other: OtherService,
+   ```
+
+3. Check module exports
+   ```typescript
+   @Module({
+     providers: [SharedService],
+     exports: [SharedService], // Must export if used elsewhere
+   })
+   ```
+
+### Logging
+
+```typescript
+import { Logger } from '@nestjs/common';
+
+@Injectable()
+export class FeatureService {
+  private readonly logger = new Logger(FeatureService.name);
+
+  async findAll() {
+    this.logger.log('Finding all features');
+    this.logger.debug('Debug info');
+    this.logger.warn('Warning');
+    this.logger.error('Error occurred', error.stack);
+  }
+}
+```
+
+## 3. MongoDB/Mongoose Debugging
+
+### Connection Issues
+
+```typescript
+// Log connection events
+mongoose.connection.on('connected', () => console.log('MongoDB connected'));
+mongoose.connection.on('error', (err) => console.error('MongoDB error:', err));
+mongoose.connection.on('disconnected', () =>
+  console.log('MongoDB disconnected'),
+);
+```
+
+### Query Debugging
+
+```typescript
+// Enable Mongoose debug mode
+mongoose.set('debug', true);
+
+// Or for specific query
+const result = await this.model.find({ status: 'active' });
+console.log('Query:', this.model.find({ status: 'active' }).getQuery());
+```
+
+## 4. Common Debugging Patterns
+
+### Console Debugging
+
+```typescript
+// Temporary debug logs (remove before commit)
+console.log('DEBUG:', variable);
+console.table(arrayOfObjects);
+console.group('Group');
+console.log('Item 1');
+console.log('Item 2');
+console.groupEnd();
+console.time('Operation');
+// ... operation
+console.timeEnd('Operation');
+```
+
+### Breakpoint Debugging
+
+```typescript
+// Add debugger statement
+function processData(data: Data) {
+  debugger; // Execution pauses here in DevTools
+  return transform(data);
+}
+```
+
+### VS Code Launch Configuration (Angular 14 / Nx 14)
+
+```json
+// .vscode/launch.json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug NestJS",
+      "runtimeArgs": ["-r", "ts-node/register"],
+      "args": ["${workspaceFolder}/apps/api/src/main.ts"],
+      "cwd": "${workspaceFolder}"
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Debug Angular",
+      "url": "http://localhost:4200",
+      "webRoot": "${workspaceFolder}/apps/web/src"
+    }
+  ]
+}
+```
+
+## 5. Error Investigation Workflow
+
+### Step 1: Reproduce
+
+- Get exact steps to reproduce
+- Note environment (browser, Node version - should be Node 18)
+
+### Step 2: Isolate
+
+- Identify component/service causing issue
+- Check if issue is frontend, backend, or database
+
+### Step 3: Trace
+
+- Add logging at key points
+- Use debugger to step through code
+- Check network requests/responses
+
+### Step 4: Root Cause
+
+- Identify the actual cause (not symptoms)
+- Document findings
+
+### Step 5: Fix & Verify
+
+- Apply fix
+- Write test that catches the bug
+- Verify fix doesn't introduce regressions
+
+## 6. Quick Fixes (Angular 14)
+
+### "Cannot read property of undefined"
+
+```typescript
+// Use optional chaining
+const name = user?.profile?.name;
+
+// With nullish coalescing
+const name = user?.profile?.name ?? 'Unknown';
+
+// In templates (Angular 14)
+{
+  {
+    user?.profile?.name;
+  }
+}
+```
+
+### "Expression has changed after it was checked"
+
+```typescript
+// Option 1: setTimeout
+ngAfterViewInit(): void {
+  setTimeout(() => this.value = newValue);
+}
+
+// Option 2: ChangeDetectorRef
+ngAfterViewInit(): void {
+  this.value = newValue;
+  this.cdr.detectChanges();
+}
+```
+
+### "Circular dependency detected"
+
+```typescript
+// Use forwardRef
+@Inject(forwardRef(() => ServiceB))
+private serviceB: ServiceB
+
+// Or refactor to remove circular dependency
+```
+
+### "NullInjectorError: No provider for X"
+
+```typescript
+// Check module providers
+@NgModule({
+  providers: [MyService], // Add missing provider
+})
+export class AppModule {}
+
+// Or check providedIn
+@Injectable({
+  providedIn: 'root', // Or specific module
+})
+export class MyService {}
+```