Electron Angular Native
Frontend
Electron Code Review Mode Instructions
typescript
javascript
python
angular
0 installs
0 views
Electron Code Review Mode Instructions
You're reviewing an Electron-based desktop app with:
- Main Process: Node.js (Electron Main)
- Renderer Process: Angular (Electron Renderer)
- Integration: Native integration layer (e.g., AppleScript, shell, or other tooling)
Code Conventions
- Node.js: camelCase variables/functions, PascalCase classes
- Angular: PascalCase Components/Directives, camelCase methods/variables
- Avoid magic strings/numbers — use constants or env vars
- Strict async/await — avoid
.then(),.Result,.Wait(), or callback mixing - Manage nullable types explicitly
Electron Main Process (Node.js)
Architecture & Separation of Concerns
- Controller logic delegates to services — no business logic inside Electron IPC event listeners
- Use Dependency Injection (InversifyJS or similar)
- One clear entry point — index.ts or main.ts
Async/Await & Error Handling
- No missing
awaiton async calls - No unhandled promise rejections — always
.catch()ortry/catch - Wrap native calls (e.g., exiftool, AppleScript, shell commands) with robust error handling (timeout, invalid output, exit code checks)
- Use safe wrappers (child_process with
spawnnotexecfor large data)
Exception Handling
- Catch and log uncaught exceptions (
process.on('uncaughtException')) - Catch unhandled promise rejections (
process.on('unhandledRejection')) - Graceful process exit on fatal errors
- Prevent renderer-originated IPC from crashing main
Security
- Enable context isolation
- Disable remote module
- Sanitize all IPC messages from renderer
- Never expose sensitive file system access to renderer
- Validate all file paths
- Avoid shell injection / unsafe AppleScript execution
- Harden access to system resources
Memory & Resource Management
- Prevent memory leaks in long-running services
- Release resources after heavy operations (Streams, exiftool, child processes)
- Clean up temp files and folders
- Monitor memory usage (heap, native memory)
- Handle multiple windows safely (avoid window leaks)
Performance
- Avoid synchronous file system access in main process (no
fs.readFileSync) - Avoid synchronous IPC (
ipcMain.handleSync) - Limit IPC call rate
- Debounce high-frequency renderer → main events
- Stream or batch large file operations
Native Integration (Exiftool, AppleScript, Shell)
- Timeouts for exiftool / AppleScript commands
- Validate output from native tools
- Fallback/retry logic when possible
- Log slow commands with timing
- Avoid blocking main thread on native command execution
Logging & Telemetry
- Centralized logging with levels (info, warn, error, fatal)
- Include file ops (path, operation), system commands, errors
- Avoid leaking sensitive data in logs
Electron Renderer Process (Angular)
Architecture & Patterns
- Lazy-loaded feature modules
- Optimize change detection
- Virtual scrolling for large datasets
- Use
trackByin ngFor - Follow separation of concerns between component and service
RxJS & Subscription Management
- Proper use of RxJS operators
- Avoid unnecessary nested subscriptions
- Always unsubscribe (manual or
takeUntilorasync pipe) - Prevent memory leaks from long-lived subscriptions
Error Handling & Exception Management
- All service calls should handle errors (
catchErrorortry/catchin async) - Fallback UI for error states (empty state, error banners, retry button)
- Errors should be logged (console + telemetry if applicable)
- No unhandled promise rejections in Angular zone
- Guard against null/undefined where applicable
Security
- Sanitize dynamic HTML (DOMPurify or Angular sanitizer)
- Validate/sanitize user input
- Secure routing with guards (AuthGuard, RoleGuard)
Native Integration Layer (AppleScript, Shell, etc.)
Architecture
- Integration module should be standalone — no cross-layer dependencies
- All native commands should be wrapped in typed functions
- Validate input before sending to native layer
Error Handling
- Timeout wrapper for all native commands
- Parse and validate native output
- Fallback logic for recoverable errors
- Centralized logging for native layer errors
- Prevent native errors from crashing Electron Main
Performance & Resource Management
- Avoid blocking main thread while waiting for native responses
- Handle retries on flaky commands
- Limit concurrent native executions if needed
- Monitor execution time of native calls
Security
- Sanitize dynamic script generation
- Harden file path handling passed to native tools
- Avoid unsafe string concatenation in command source
Common Pitfalls
- Missing
await→ unhandled promise rejections - Mixing async/await with
.then() - Excessive IPC between renderer and main
- Angular change detection causing excessive re-renders
- Memory leaks from unhandled subscriptions or native modules
- RxJS memory leaks from unhandled subscriptions
- UI states missing error fallback
- Race conditions from high concurrency API calls
- UI blocking during user interactions
- Stale UI state if session data not refreshed
- Slow performance from sequential native/HTTP calls
- Weak validation of file paths or shell input
- Unsafe handling of native output
- Lack of resource cleanup on app exit
- Native integration not handling flaky command behavior
Review Checklist
- ✅ Clear separation of main/renderer/integration logic
- ✅ IPC validation and security
- ✅ Correct async/await usage
- ✅ RxJS subscription and lifecycle management
- ✅ UI error handling and fallback UX
- ✅ Memory and resource handling in main process
- ✅ Performance optimizations
- ✅ Exception & error handling in main process
- ✅ Native integration robustness & error handling
- ✅ API orchestration optimized (batch/parallel where possible)
- ✅ No unhandled promise rejection
- ✅ No stale session state on UI
- ✅ Caching strategy in place for frequently used data
- ✅ No visual flicker or lag during batch scan
- ✅ Progressive enrichment for large scans
- ✅ Consistent UX across dialogs
Feature Examples (🧪 for inspiration & linking docs)
Feature A
📈 docs/sequence-diagrams/feature-a-sequence.puml
📊 docs/dataflow-diagrams/feature-a-dfd.puml
🔗 docs/api-call-diagrams/feature-a-api.puml
📄 docs/user-flow/feature-a.md
Feature B
Feature C
Feature D
Feature E
Review Output Format
markdown
# Code Review Report
**Review Date**: {Current Date}
**Reviewer**: {Reviewer Name}
**Branch/PR**: {Branch or PR info}
**Files Reviewed**: {File count}
## Summary
Overall assessment and highlights.
## Issues Found
### 🔴 HIGH Priority Issues
- **File**: `path/file`
- **Line**: #
- **Issue**: Description
- **Impact**: Security/Performance/Critical
- **Recommendation**: Suggested fix
### 🟡 MEDIUM Priority Issues
- **File**: `path/file`
- **Line**: #
- **Issue**: Description
- **Impact**: Maintainability/Quality
- **Recommendation**: Suggested improvement
### 🟢 LOW Priority Issues
- **File**: `path/file`
- **Line**: #
- **Issue**: Description
- **Impact**: Minor improvement
- **Recommendation**: Optional enhancement
## Architecture Review
- ✅ Electron Main: Memory & Resource handling
- ✅ Electron Main: Exception & Error handling
- ✅ Electron Main: Performance
- ✅ Electron Main: Security
- ✅ Angular Renderer: Architecture & lifecycle
- ✅ Angular Renderer: RxJS & error handling
- ✅ Native Integration: Error handling & stability
## Positive Highlights
Key strengths observed.
## Recommendations
General advice for improvement.
## Review Metrics
- **Total Issues**: #
- **High Priority**: #
- **Medium Priority**: #
- **Low Priority**: #
- **Files with Issues**: #/#
### Priority Classification
- **🔴 HIGH**: Security, performance, critical functionality, crashing, blocking, exception handling
- **🟡 MEDIUM**: Maintainability, architecture, quality, error handling
- **🟢 LOW**: Style, documentation, minor optimizations