@chinchillaenterprises/mcp-dev-logger 2.3.3 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +127 -495
- package/dist/index.js +328 -2087
- package/dist/index.js.map +1 -1
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -1,592 +1,225 @@
|
|
|
1
|
-
# MCP Dev Logger
|
|
1
|
+
# MCP Dev Logger v3.0.0
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**Simplified Amplify Gen2 Sandbox Logger**
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
A streamlined Model Context Protocol (MCP) server that does one thing well: runs `npx ampx sandbox --stream-function-logs` and captures output to `resources/sandbox.log`.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- **Modern Screen Support**: Better for dashboard layouts, admin interfaces, and component showcases
|
|
9
|
-
- **Improved Development Experience**: More realistic modern browser experience out of the box
|
|
10
|
-
- **Dev Tools Friendly**: Adequate space for dev tools + content simultaneously
|
|
7
|
+
## 🎯 What Changed in v3.0.0
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
**MAJOR SIMPLIFICATION**: Removed all complex features to focus on the single use case that matters.
|
|
13
10
|
|
|
14
|
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
11
|
+
**What's Gone:**
|
|
12
|
+
- ❌ Browser console capture (Playwright)
|
|
13
|
+
- ❌ Multi-process management
|
|
14
|
+
- ❌ Date-based log organization
|
|
15
|
+
- ❌ Process IDs and state persistence
|
|
16
|
+
- ❌ Custom commands and parameters
|
|
17
|
+
- ❌ Frontend/backend/custom process types
|
|
18
|
+
- ❌ All the complexity you never needed
|
|
18
19
|
|
|
19
|
-
|
|
20
|
+
**What Remains:**
|
|
21
|
+
- ✅ Single hardcoded command: `npx ampx sandbox --stream-function-logs`
|
|
22
|
+
- ✅ Single log file: `resources/sandbox/sandbox.log` (overwrites each time)
|
|
23
|
+
- ✅ Simple start/stop/tail interface
|
|
24
|
+
- ✅ Smart multi-project detection (kills existing sandbox for THIS project only)
|
|
20
25
|
|
|
21
|
-
|
|
22
|
-
- React hydration errors
|
|
23
|
-
- Unhandled promise rejections
|
|
24
|
-
- Page-level JavaScript errors
|
|
25
|
-
- Network request failures (4xx/5xx responses)
|
|
26
|
-
- **Visual Error Alerts**: Red banner notification when JavaScript errors occur
|
|
27
|
-
- **Better Error Context**: Full stack traces for all JavaScript errors
|
|
26
|
+
## Why This Exists
|
|
28
27
|
|
|
29
|
-
|
|
28
|
+
After two months of usage, the pattern was clear:
|
|
29
|
+
- Only ever used for Amplify sandbox streaming logs
|
|
30
|
+
- Never looked at old logs
|
|
31
|
+
- All the organization features were unused overhead
|
|
30
32
|
|
|
31
|
-
|
|
32
|
-
- **Smart Port Detection**: Automatically detects which port your dev server is using
|
|
33
|
-
- **Server Ready Detection**: Waits for server to be fully ready before launching browser
|
|
34
|
-
- **Simplified Teaching**: Reduces student setup from 3 commands to just 1
|
|
33
|
+
So we stripped it down to the essentials.
|
|
35
34
|
|
|
36
|
-
##
|
|
35
|
+
## Smart Multi-Project Support
|
|
37
36
|
|
|
38
|
-
|
|
39
|
-
- **Unified Log Stream**: See both server-side and client-side logs in one place
|
|
40
|
-
- **Student-Friendly Browser**: TEST BROWSER with visual indicators for teaching
|
|
37
|
+
The tool intelligently handles multiple projects with running sandboxes:
|
|
41
38
|
|
|
42
|
-
|
|
39
|
+
**How it works:**
|
|
40
|
+
1. Checks if a sandbox is already running in the current project directory
|
|
41
|
+
2. If found, **kills it** and starts fresh (prevents stuck sandboxes)
|
|
42
|
+
3. Only affects the sandbox for THIS project - other projects' sandboxes are untouched
|
|
43
43
|
|
|
44
|
-
|
|
45
|
-
-
|
|
46
|
-
-
|
|
47
|
-
|
|
48
|
-
## Features
|
|
49
|
-
|
|
50
|
-
- **Universal Dev Server Logging**: Works with any development server command
|
|
51
|
-
- **Browser Console Capture**: Capture console.log, console.error, console.warn from the browser
|
|
52
|
-
- **Multi-Process Support**: Run multiple dev servers simultaneously (frontend + backend)
|
|
53
|
-
- **Real-time Log Streaming**: Capture build errors, TypeScript errors, hot reload events
|
|
54
|
-
- **Organized Log Storage**: Structured as `logs/YYYY-MM-DD/processType/logfile.log`
|
|
55
|
-
- **Automatic Log Cleanup**: Removes logs older than 3 days automatically
|
|
56
|
-
- **Smart Process Management**: Start, stop, and restart individual dev servers by ID
|
|
57
|
-
- **Log Filtering**: Search through logs with grep patterns
|
|
58
|
-
- **Framework Agnostic**: One tool for all development servers
|
|
59
|
-
- **Auto-Generated Process IDs**: Intelligent process ID generation based on command and output file
|
|
60
|
-
- **Process State Persistence**: Maintains process state across server restarts (where possible)
|
|
61
|
-
- **Signal Handling**: Proper cleanup with SIGTERM for graceful shutdowns
|
|
62
|
-
- **Unified Server + Browser Logs**: See both frontend and backend logs in one stream
|
|
44
|
+
**Why kill instead of reuse?**
|
|
45
|
+
- Sandboxes can get stuck after running a long time
|
|
46
|
+
- File change detection might stop working
|
|
47
|
+
- Fresh start ensures clean deployment state
|
|
63
48
|
|
|
64
49
|
## Installation
|
|
65
50
|
|
|
66
|
-
### From NPM (Recommended)
|
|
67
51
|
```bash
|
|
68
52
|
claude mcp add dev-logger -s user -- npx @chinchillaenterprises/mcp-dev-logger
|
|
69
53
|
```
|
|
70
54
|
|
|
71
|
-
### For Development/Testing
|
|
72
|
-
```bash
|
|
73
|
-
# Clone and build locally
|
|
74
|
-
git clone <repository-url>
|
|
75
|
-
cd mcp-dev-logger
|
|
76
|
-
npm install
|
|
77
|
-
npm run build
|
|
78
|
-
|
|
79
|
-
# Add to Claude Code (local development)
|
|
80
|
-
claude mcp add dev-logger-local -s user -- node $(pwd)/dist/index.js
|
|
81
|
-
```
|
|
82
|
-
|
|
83
55
|
## Tools Provided
|
|
84
56
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
- `dev_tail_logs` becomes `mcp__dev-logger__dev_tail_logs`
|
|
88
|
-
- And so on for all tools
|
|
57
|
+
### 1. `dev_start_sandbox`
|
|
58
|
+
Start Amplify Gen2 sandbox with streaming function logs. No parameters needed.
|
|
89
59
|
|
|
90
|
-
|
|
60
|
+
**What it does:**
|
|
61
|
+
- Checks if a sandbox is already running in THIS project directory
|
|
62
|
+
- If found, kills it first (prevents stuck sandboxes)
|
|
63
|
+
- Starts `npx ampx sandbox --stream-function-logs`
|
|
64
|
+
- Clears/overwrites `resources/sandbox/sandbox.log`
|
|
65
|
+
- Streams all output (stdout + stderr) to the log file
|
|
66
|
+
- Adds timestamps to every log line
|
|
91
67
|
|
|
92
|
-
|
|
93
|
-
Start a development server and stream its output to a log file. **Supports multiple concurrent processes.**
|
|
94
|
-
|
|
95
|
-
**Parameters:**
|
|
96
|
-
- `command` (optional): Dev command to run (default: "npm run dev")
|
|
97
|
-
- `outputFile` (optional): File to write logs to (default: "dev-server-logs.txt")
|
|
98
|
-
- `processId` (optional): Custom process ID (auto-generated if not provided)
|
|
99
|
-
- `cwd` (optional): Working directory
|
|
100
|
-
- `env` (optional): Environment variables to pass
|
|
68
|
+
**Multi-project safe:** Only kills/affects sandboxes running in the current directory
|
|
101
69
|
|
|
102
|
-
**
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
"command": "npm run dev",
|
|
106
|
-
"outputFile": "frontend-logs.txt",
|
|
107
|
-
"cwd": "/path/to/project",
|
|
108
|
-
"env": {
|
|
109
|
-
"PORT": "3001",
|
|
110
|
-
"NODE_ENV": "development"
|
|
111
|
-
}
|
|
112
|
-
}
|
|
70
|
+
**Usage:**
|
|
71
|
+
```typescript
|
|
72
|
+
dev_start_sandbox()
|
|
113
73
|
```
|
|
114
74
|
|
|
115
|
-
### 2. dev_list_processes
|
|
116
|
-
List all running development processes with their status and details.
|
|
117
|
-
|
|
118
|
-
**No parameters required.**
|
|
119
|
-
|
|
120
|
-
### 3. dev_stop_log_streaming
|
|
121
|
-
Stop development server(s) and logging.
|
|
122
|
-
|
|
123
|
-
**Parameters:**
|
|
124
|
-
- `processId` (optional): Process ID to stop (if not provided, stops all processes)
|
|
125
|
-
|
|
126
|
-
### 4. dev_restart_log_streaming
|
|
127
|
-
Restart a specific development server (useful when it crashes or hangs).
|
|
128
|
-
|
|
129
|
-
**Parameters:**
|
|
130
|
-
- `processId` (required): Process ID to restart
|
|
131
|
-
- `clearLogs` (optional): Whether to clear the log file on restart (default: false)
|
|
132
|
-
|
|
133
|
-
### 5. dev_get_status
|
|
134
|
-
Check if development server(s) are running and get their status.
|
|
135
|
-
|
|
136
|
-
**Parameters:**
|
|
137
|
-
- `processId` (optional): Process ID to get status for (if not provided, shows all processes)
|
|
138
|
-
|
|
139
75
|
**Returns:**
|
|
140
|
-
- Running status
|
|
141
|
-
- Process ID(s)
|
|
142
|
-
- PID(s)
|
|
143
|
-
- Uptime
|
|
144
|
-
- Current command(s)
|
|
145
|
-
- Log file location(s)
|
|
146
|
-
|
|
147
|
-
### 6. dev_tail_logs
|
|
148
|
-
Get the last N lines from the log file.
|
|
149
|
-
|
|
150
|
-
**Parameters:**
|
|
151
|
-
- `processId` (optional): Process ID to tail logs from (smart fallback for single process)
|
|
152
|
-
- `lines` (optional): Number of lines to return (default: 50)
|
|
153
|
-
- `filter` (optional): Grep pattern to filter logs
|
|
154
|
-
|
|
155
|
-
**Example:**
|
|
156
76
|
```json
|
|
157
77
|
{
|
|
158
|
-
"
|
|
159
|
-
"
|
|
160
|
-
"
|
|
78
|
+
"success": true,
|
|
79
|
+
"message": "Amplify sandbox started. Logs are being written to /path/to/project/resources/sandbox/sandbox.log",
|
|
80
|
+
"logFile": "/path/to/project/resources/sandbox/sandbox.log"
|
|
161
81
|
}
|
|
162
82
|
```
|
|
163
83
|
|
|
164
|
-
|
|
165
|
-
Clear the log file.
|
|
166
|
-
|
|
167
|
-
**Parameters:**
|
|
168
|
-
- `processId` (optional): Process ID to clear logs for (smart fallback for single process)
|
|
169
|
-
- `backup` (optional): Whether to backup logs before clearing (default: false)
|
|
170
|
-
|
|
171
|
-
### 8. dev_launch_test_browser
|
|
172
|
-
Launch a TEST BROWSER for students to interact with. All console logs from this browser are captured automatically. Students should use THIS browser (not their regular browser) to test their app.
|
|
173
|
-
|
|
174
|
-
**Parameters:**
|
|
175
|
-
- `processId` (optional): Process ID to attach browser console to
|
|
176
|
-
- `browserUrl` (optional): URL to open in test browser (default: http://localhost:3000)
|
|
177
|
-
- `teachingMode` (optional): Enable teaching mode with DevTools open and slower actions (default: true)
|
|
178
|
-
- `viewport` (optional): Browser window size (default: { width: 1280, height: 800 })
|
|
179
|
-
- `highlightErrors` (optional): Add visual indicator when console errors occur (default: true)
|
|
180
|
-
|
|
181
|
-
**Key Features:**
|
|
182
|
-
- 🪟 Always visible browser window (not headless)
|
|
183
|
-
- 🔍 DevTools automatically open in teaching mode
|
|
184
|
-
- 🐌 Slower actions for easier teaching/learning
|
|
185
|
-
- ⚡ Red flash on console errors
|
|
186
|
-
- 📝 Green banner showing "TEST BROWSER" status
|
|
187
|
-
- 🎯 All console logs captured to the same log file as server logs
|
|
188
|
-
|
|
189
|
-
**Example:**
|
|
84
|
+
Or if it killed an existing sandbox:
|
|
190
85
|
```json
|
|
191
86
|
{
|
|
192
|
-
"
|
|
193
|
-
"
|
|
194
|
-
"
|
|
195
|
-
"
|
|
87
|
+
"success": true,
|
|
88
|
+
"message": "Killed existing sandbox (PID: 12345) and started fresh. Logs are being written to /path/to/project/resources/sandbox/sandbox.log",
|
|
89
|
+
"logFile": "/path/to/project/resources/sandbox/sandbox.log",
|
|
90
|
+
"killedPid": 12345
|
|
196
91
|
}
|
|
197
92
|
```
|
|
198
93
|
|
|
199
|
-
###
|
|
200
|
-
Stop
|
|
201
|
-
|
|
202
|
-
**Parameters:**
|
|
203
|
-
- `processId` (optional): Process ID to stop browser console capture for
|
|
94
|
+
### 2. `dev_stop_sandbox`
|
|
95
|
+
Stop the running Amplify sandbox process. No parameters needed.
|
|
204
96
|
|
|
205
|
-
|
|
206
|
-
|
|
97
|
+
**Usage:**
|
|
98
|
+
```typescript
|
|
99
|
+
dev_stop_sandbox()
|
|
100
|
+
```
|
|
207
101
|
|
|
208
|
-
**
|
|
209
|
-
- `command` (optional): Dev command to run (default: "npm run dev")
|
|
210
|
-
- `port` (optional): Port to wait for (default: auto-detect from output)
|
|
211
|
-
- `waitTimeout` (optional): Max time to wait for server in ms (default: 30000)
|
|
212
|
-
- `browserDelay` (optional): Delay after server ready in ms (default: 1000)
|
|
213
|
-
- `teachingMode` (optional): Enable teaching features (default: true)
|
|
214
|
-
- `processId` (optional): Custom process ID (default: "frontend-with-browser")
|
|
215
|
-
- `env` (optional): Environment variables
|
|
216
|
-
- `cwd` (optional): Working directory
|
|
217
|
-
|
|
218
|
-
**Key Features:**
|
|
219
|
-
- 🎯 Automatically detects when server is ready
|
|
220
|
-
- 🪟 Launches test browser with DevTools open
|
|
221
|
-
- 📝 Captures both server AND browser console logs
|
|
222
|
-
- ⚡ Red flash on browser errors
|
|
223
|
-
- 🧪 Green "TEST BROWSER" banner
|
|
224
|
-
- ⏱️ Single command instead of multiple steps
|
|
225
|
-
|
|
226
|
-
**Example:**
|
|
102
|
+
**Returns:**
|
|
227
103
|
```json
|
|
228
104
|
{
|
|
229
|
-
"
|
|
230
|
-
"
|
|
231
|
-
"processId": "student-project"
|
|
105
|
+
"success": true,
|
|
106
|
+
"message": "Amplify sandbox stopped successfully."
|
|
232
107
|
}
|
|
233
108
|
```
|
|
234
109
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
✅ Starting development server...
|
|
238
|
-
✅ Server ready on http://localhost:3000
|
|
239
|
-
✅ Launching test browser...
|
|
240
|
-
|
|
241
|
-
🎯 TEST BROWSER LAUNCHED!
|
|
242
|
-
|
|
243
|
-
👉 Use the browser window that just opened (with green banner)
|
|
244
|
-
📝 All console logs are being saved
|
|
245
|
-
🔍 DevTools is open for debugging
|
|
246
|
-
⚠️ Errors will flash red on screen
|
|
247
|
-
|
|
248
|
-
Happy debugging! 🚀
|
|
249
|
-
```
|
|
110
|
+
### 3. `dev_tail_sandbox_logs`
|
|
111
|
+
Get the last N lines from the sandbox log file.
|
|
250
112
|
|
|
251
|
-
|
|
113
|
+
**Parameters:**
|
|
114
|
+
- `lines` (optional): Number of lines to return (default: 50)
|
|
252
115
|
|
|
253
|
-
|
|
116
|
+
**Usage:**
|
|
254
117
|
```typescript
|
|
255
|
-
//
|
|
256
|
-
|
|
257
|
-
"command": "npm run dev",
|
|
258
|
-
"outputFile": "frontend.log",
|
|
259
|
-
"processId": "frontend"
|
|
260
|
-
})
|
|
118
|
+
// Get last 50 lines (default)
|
|
119
|
+
dev_tail_sandbox_logs()
|
|
261
120
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
"outputFile": "backend.log",
|
|
265
|
-
"processId": "backend"
|
|
266
|
-
})
|
|
267
|
-
|
|
268
|
-
// List all running processes
|
|
269
|
-
dev_list_processes()
|
|
270
|
-
|
|
271
|
-
// Stop just the frontend
|
|
272
|
-
dev_stop_log_streaming({ "processId": "frontend" })
|
|
273
|
-
|
|
274
|
-
// Restart backend with clean logs
|
|
275
|
-
dev_restart_log_streaming({
|
|
276
|
-
"processId": "backend",
|
|
277
|
-
"clearLogs": true
|
|
278
|
-
})
|
|
121
|
+
// Get last 100 lines
|
|
122
|
+
dev_tail_sandbox_logs({ "lines": 100 })
|
|
279
123
|
```
|
|
280
124
|
|
|
281
|
-
|
|
282
|
-
```
|
|
283
|
-
// Start Next.js dev server
|
|
125
|
+
**Returns:**
|
|
126
|
+
```json
|
|
284
127
|
{
|
|
285
|
-
"
|
|
286
|
-
"
|
|
128
|
+
"success": true,
|
|
129
|
+
"logs": "[2025-10-02T12:34:56.789Z] Starting Amplify sandbox: npx ampx sandbox --stream-function-logs\n[2025-10-02T12:34:57.890Z] Amplify Gen 2 sandbox starting...\n..."
|
|
287
130
|
}
|
|
288
131
|
```
|
|
289
132
|
|
|
290
|
-
|
|
291
|
-
```typescript
|
|
292
|
-
// Start Vite with custom port
|
|
293
|
-
{
|
|
294
|
-
"command": "vite --port 3001",
|
|
295
|
-
"outputFile": "vite-dev.log",
|
|
296
|
-
"env": {
|
|
297
|
-
"NODE_ENV": "development"
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
```
|
|
133
|
+
## Typical Workflow
|
|
301
134
|
|
|
302
|
-
### Check for TypeScript Errors
|
|
303
135
|
```typescript
|
|
304
|
-
//
|
|
305
|
-
|
|
306
|
-
"lines": 200,
|
|
307
|
-
"filter": "TS\\d+"
|
|
308
|
-
}
|
|
309
|
-
```
|
|
310
|
-
|
|
311
|
-
### Debug Build Errors
|
|
312
|
-
```typescript
|
|
313
|
-
// Get recent errors from build process
|
|
314
|
-
{
|
|
315
|
-
"lines": 100,
|
|
316
|
-
"filter": "ERROR|FAILED|error"
|
|
317
|
-
}
|
|
318
|
-
```
|
|
136
|
+
// 1. Start the sandbox
|
|
137
|
+
dev_start_sandbox()
|
|
319
138
|
|
|
320
|
-
|
|
139
|
+
// 2. Work on your code...
|
|
140
|
+
// Sandbox is running and streaming logs to resources/sandbox/sandbox.log
|
|
321
141
|
|
|
322
|
-
|
|
142
|
+
// 3. Check recent logs when something goes wrong
|
|
143
|
+
dev_tail_sandbox_logs({ "lines": 100 })
|
|
323
144
|
|
|
145
|
+
// 4. Stop when done
|
|
146
|
+
dev_stop_sandbox()
|
|
324
147
|
```
|
|
325
|
-
logs/
|
|
326
|
-
├── 2025-07-10/ # Date folder (YYYY-MM-DD)
|
|
327
|
-
│ ├── frontend/ # Process type folder
|
|
328
|
-
│ │ ├── nextjs-14-32-15.log
|
|
329
|
-
│ │ └── vite-16-45-22.log
|
|
330
|
-
│ ├── backend/
|
|
331
|
-
│ │ ├── express-14-33-01.log
|
|
332
|
-
│ │ └── api-15-22-11.log
|
|
333
|
-
│ └── amplify/
|
|
334
|
-
│ └── sandbox-14-35-22.log
|
|
335
|
-
└── 2025-07-09/ # Older logs (auto-removed after 3 days)
|
|
336
|
-
└── ...
|
|
337
|
-
```
|
|
338
|
-
|
|
339
|
-
## Log Format
|
|
340
|
-
|
|
341
|
-
Logs are written with timestamps, process IDs, and error markers. Browser console logs are prefixed with [BROWSER]:
|
|
342
148
|
|
|
343
|
-
|
|
344
|
-
[2024-01-15T10:30:45.123Z] Starting: npm run dev (Process ID: npm-frontend)
|
|
345
|
-
[2024-01-15T10:30:46.456Z] [npm-frontend] > my-app@1.0.0 dev
|
|
346
|
-
[2024-01-15T10:30:46.457Z] [npm-frontend] > next dev
|
|
347
|
-
[2024-01-15T10:30:47.123Z] [npm-frontend] ▲ Next.js 14.0.0
|
|
348
|
-
[2024-01-15T10:30:47.124Z] [npm-frontend] - Local: http://localhost:3000
|
|
349
|
-
[2024-01-15T10:30:48.789Z] [npm-frontend] [ERROR] Error: Cannot find module './components/Header'
|
|
350
|
-
[2024-01-15T10:30:49.123Z] [npm-frontend] [BROWSER] Console capture started for http://localhost:3000
|
|
351
|
-
[2024-01-15T10:30:49.456Z] [npm-frontend] [BROWSER] [LOG] React DevTools detected
|
|
352
|
-
[2024-01-15T10:30:49.789Z] [npm-frontend] [BROWSER] [WARN] React: Each child should have a unique key prop
|
|
353
|
-
[2024-01-15T10:30:50.123Z] [npm-frontend] [BROWSER] [ERROR] Failed to fetch /api/user: 404 Not Found
|
|
354
|
-
[2024-01-15T10:30:50.456Z] [npm-frontend] [BROWSER] [LOG] { user: null, loading: false }
|
|
355
|
-
|
|
356
|
-
[2024-01-15T10:30:50.123Z] Starting: npx ampx sandbox --stream-function-logs (Process ID: npx-backend)
|
|
357
|
-
[2024-01-15T10:30:51.456Z] [npx-backend] [INFO] Amplify sandbox starting...
|
|
358
|
-
[2024-01-15T10:30:52.123Z] [npx-backend] Process exited with code 0 and signal null
|
|
359
|
-
```
|
|
149
|
+
## AI Assistant Usage
|
|
360
150
|
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
151
|
+
When you tell Claude Code to "use dev logger", it will:
|
|
152
|
+
1. Call `dev_start_sandbox()` to start streaming (kills existing sandbox if found)
|
|
153
|
+
2. Logs are captured automatically to `resources/sandbox/sandbox.log`
|
|
154
|
+
3. Claude can call `dev_tail_sandbox_logs()` to check for errors
|
|
155
|
+
4. Calls `dev_stop_sandbox()` when you're done
|
|
366
156
|
|
|
367
|
-
##
|
|
157
|
+
## Log Format
|
|
368
158
|
|
|
369
|
-
|
|
370
|
-
```bash
|
|
371
|
-
# Start dev server
|
|
372
|
-
dev_start_log_streaming
|
|
159
|
+
Logs are timestamped and include error markers:
|
|
373
160
|
|
|
374
|
-
# When build fails, check recent errors
|
|
375
|
-
dev_tail_logs { "filter": "ERROR", "lines": 100 }
|
|
376
161
|
```
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
# Check for TS errors
|
|
384
|
-
dev_tail_logs { "filter": "TS\\d+|typescript", "lines": 50 }
|
|
162
|
+
[2025-10-02T12:34:56.789Z] Starting Amplify sandbox: npx ampx sandbox --stream-function-logs
|
|
163
|
+
[2025-10-02T12:34:57.890Z] Amplify Gen 2 sandbox starting...
|
|
164
|
+
[2025-10-02T12:34:58.123Z] [INFO] Deploying stack...
|
|
165
|
+
[2025-10-02T12:35:00.456Z] [ERROR] Failed to deploy: Invalid configuration
|
|
166
|
+
[2025-10-02T12:35:01.789Z] Amplify sandbox exited with code 1 and signal null
|
|
385
167
|
```
|
|
386
168
|
|
|
387
|
-
|
|
388
|
-
```bash
|
|
389
|
-
# Start on different port
|
|
390
|
-
dev_start_log_streaming {
|
|
391
|
-
"command": "npm run dev",
|
|
392
|
-
"env": { "PORT": "3001" }
|
|
393
|
-
}
|
|
394
|
-
```
|
|
169
|
+
## Requirements
|
|
395
170
|
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
dev_restart_log_streaming { "clearLogs": true }
|
|
400
|
-
```
|
|
171
|
+
- Node.js 18+
|
|
172
|
+
- AWS Amplify Gen2 project
|
|
173
|
+
- A `resources/` folder in your repo (created automatically if missing)
|
|
401
174
|
|
|
402
|
-
|
|
403
|
-
```bash
|
|
404
|
-
# Start Amplify backend logging
|
|
405
|
-
dev_start_log_streaming {
|
|
406
|
-
"command": "npx ampx sandbox --stream-function-logs",
|
|
407
|
-
"outputFile": "backend-logs.txt",
|
|
408
|
-
"processId": "amplify-backend"
|
|
409
|
-
}
|
|
175
|
+
## Migration from v2.x
|
|
410
176
|
|
|
411
|
-
|
|
412
|
-
dev_tail_logs { "processId": "amplify-backend", "filter": "ERROR|WARN", "lines": 100 }
|
|
413
|
-
```
|
|
177
|
+
If you were using the old version:
|
|
414
178
|
|
|
415
|
-
|
|
179
|
+
**Before (v2.x):**
|
|
416
180
|
```typescript
|
|
417
|
-
// Step 1: Start the student's dev server
|
|
418
181
|
dev_start_log_streaming({
|
|
419
|
-
"command": "
|
|
420
|
-
"
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
dev_launch_test_browser({
|
|
425
|
-
"processId": "student-app",
|
|
426
|
-
"browserUrl": "http://localhost:3000",
|
|
427
|
-
"teachingMode": true // DevTools open, slower actions
|
|
428
|
-
})
|
|
429
|
-
|
|
430
|
-
// Step 3: Tell student: "Use the TEST BROWSER window that just opened!"
|
|
431
|
-
// They click buttons, fill forms, trigger errors - ALL console logs are captured
|
|
432
|
-
|
|
433
|
-
// Step 4: When student says "I clicked submit and nothing happened"
|
|
434
|
-
dev_tail_logs({
|
|
435
|
-
"processId": "student-app",
|
|
436
|
-
"filter": "\\[BROWSER\\].*\\[ERROR\\]",
|
|
437
|
-
"lines": 20
|
|
438
|
-
})
|
|
439
|
-
// Shows: [BROWSER] [ERROR] Cannot read property 'name' of undefined
|
|
440
|
-
|
|
441
|
-
// Step 5: Show all browser activity
|
|
442
|
-
dev_tail_logs({
|
|
443
|
-
"processId": "student-app",
|
|
444
|
-
"filter": "\\[BROWSER\\]",
|
|
445
|
-
"lines": 50
|
|
182
|
+
"command": "npx ampx sandbox --stream-function-logs",
|
|
183
|
+
"outputFile": "backend-logs.txt",
|
|
184
|
+
"processId": "amplify-backend",
|
|
185
|
+
"structuredLogging": true,
|
|
186
|
+
"sessionDate": "2025-10-02"
|
|
446
187
|
})
|
|
447
|
-
|
|
448
|
-
// Step 6: When done testing
|
|
449
|
-
dev_stop_browser_console({ "processId": "student-app" })
|
|
450
188
|
```
|
|
451
189
|
|
|
452
|
-
**
|
|
453
|
-
- A browser window opens with "🧪 TEST BROWSER" banner
|
|
454
|
-
- DevTools is already open to the Console tab
|
|
455
|
-
- When errors occur, the browser flashes red
|
|
456
|
-
- All their console.log() statements are captured
|
|
457
|
-
- They can debug using the actual browser they're testing in
|
|
458
|
-
|
|
459
|
-
### Tips for Instructors/TAs:
|
|
460
|
-
1. **Always emphasize**: Students must use the TEST BROWSER, not their regular browser
|
|
461
|
-
2. **Common mistake**: Students open localhost:3000 in their regular Chrome - no logs captured!
|
|
462
|
-
3. **Quick check**: Look for [BROWSER] prefix in logs to confirm they're using test browser
|
|
463
|
-
4. **Teaching moment**: Show how server errors appear without [BROWSER] prefix
|
|
464
|
-
5. **Debugging together**: The red flash makes it easy to spot when errors occur
|
|
465
|
-
|
|
466
|
-
### 7. Simplified One-Click Workflow (v2.3.0) 🎯
|
|
467
|
-
The new `dev_start_frontend_with_browser` combines steps 1 and 2 above into a single command:
|
|
468
|
-
|
|
190
|
+
**Now (v3.0):**
|
|
469
191
|
```typescript
|
|
470
|
-
|
|
471
|
-
dev_start_log_streaming({ "command": "npm run dev", "processId": "student-app" })
|
|
472
|
-
// Wait for server to start...
|
|
473
|
-
dev_launch_test_browser({ "processId": "student-app" })
|
|
474
|
-
|
|
475
|
-
// NOW (v2.3.0): Single command does everything!
|
|
476
|
-
dev_start_frontend_with_browser({
|
|
477
|
-
"command": "npm run dev",
|
|
478
|
-
"processId": "student-project",
|
|
479
|
-
"teachingMode": true
|
|
480
|
-
})
|
|
481
|
-
// Server starts, waits for ready, then browser launches automatically!
|
|
192
|
+
dev_start_sandbox()
|
|
482
193
|
```
|
|
483
194
|
|
|
484
|
-
|
|
485
|
-
- 🚀 One command instead of two
|
|
486
|
-
- ⏱️ No need to wait and guess when server is ready
|
|
487
|
-
- 🎯 Browser launches at the perfect time
|
|
488
|
-
- 📝 All logs in one place from the start
|
|
489
|
-
- 🔧 Less chance for mistakes
|
|
490
|
-
|
|
491
|
-
**Common Student Scenarios:**
|
|
492
|
-
|
|
493
|
-
```typescript
|
|
494
|
-
// Scenario 1: React app on default port
|
|
495
|
-
dev_start_frontend_with_browser()
|
|
496
|
-
// That's it! Uses all smart defaults
|
|
497
|
-
|
|
498
|
-
// Scenario 2: Vite app with custom command
|
|
499
|
-
dev_start_frontend_with_browser({
|
|
500
|
-
"command": "npm run dev -- --host",
|
|
501
|
-
"processId": "vite-project"
|
|
502
|
-
})
|
|
503
|
-
|
|
504
|
-
// Scenario 3: Next.js on different port
|
|
505
|
-
dev_start_frontend_with_browser({
|
|
506
|
-
"command": "npm run dev",
|
|
507
|
-
"port": 3001, // If auto-detect fails
|
|
508
|
-
"env": { "PORT": "3001" }
|
|
509
|
-
})
|
|
510
|
-
|
|
511
|
-
// Scenario 4: Quick demo mode (no DevTools)
|
|
512
|
-
dev_start_frontend_with_browser({
|
|
513
|
-
"teachingMode": false // Faster, no DevTools
|
|
514
|
-
})
|
|
515
|
-
```
|
|
195
|
+
That's it. No parameters, no configuration, just works.
|
|
516
196
|
|
|
517
197
|
## Troubleshooting
|
|
518
198
|
|
|
519
|
-
###
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
4. Ensure all dependencies are installed
|
|
524
|
-
|
|
525
|
-
### Logs Not Appearing
|
|
526
|
-
1. Check the output file path is writable
|
|
527
|
-
2. Some frameworks buffer output - logs may appear in chunks
|
|
528
|
-
3. Use `dev_get_status` to verify server is running
|
|
529
|
-
|
|
530
|
-
### Process Won't Stop
|
|
531
|
-
1. Use `dev_stop_log_streaming` first
|
|
532
|
-
2. If that fails, the process may have crashed - check system process manager
|
|
533
|
-
3. Restart Claude Code to clean up orphaned processes
|
|
534
|
-
|
|
535
|
-
## Implementation Details
|
|
536
|
-
|
|
537
|
-
### Process Management
|
|
538
|
-
- Uses Node.js `spawn` with `detached: true` for proper process isolation
|
|
539
|
-
- Implements graceful shutdown with SIGTERM signals
|
|
540
|
-
- Automatically removes event listeners on process termination to prevent memory leaks
|
|
541
|
-
- Attempts to kill process groups (`-pid`) to handle child processes
|
|
542
|
-
|
|
543
|
-
### State Persistence
|
|
544
|
-
- Saves process state to `${tmpdir}/mcp-dev-logger.json`
|
|
545
|
-
- Restores process information on server restart (where possible)
|
|
546
|
-
- Handles process cleanup on server shutdown
|
|
547
|
-
|
|
548
|
-
### Log Streaming
|
|
549
|
-
- Real-time streaming of both stdout and stderr
|
|
550
|
-
- Timestamped log entries with process ID tagging
|
|
551
|
-
- Error entries are clearly marked with `[ERROR]` prefix
|
|
552
|
-
- Supports concurrent logging from multiple processes to different files
|
|
199
|
+
### Sandbox won't start
|
|
200
|
+
- Make sure you're in an Amplify Gen2 project directory
|
|
201
|
+
- Check that `npx ampx` is available
|
|
202
|
+
- Verify AWS credentials are configured
|
|
553
203
|
|
|
554
|
-
|
|
204
|
+
### Logs not appearing
|
|
205
|
+
- Check that `resources/` folder exists (created automatically)
|
|
206
|
+
- Use `dev_tail_sandbox_logs()` to verify logs are being written
|
|
555
207
|
|
|
556
|
-
|
|
557
|
-
-
|
|
558
|
-
-
|
|
559
|
-
-
|
|
208
|
+
### Process won't stop
|
|
209
|
+
- Call `dev_stop_sandbox()` again
|
|
210
|
+
- If still stuck, restart Claude Code
|
|
211
|
+
- The process will be cleaned up automatically
|
|
560
212
|
|
|
561
213
|
## Development
|
|
562
214
|
|
|
563
|
-
### Building
|
|
564
215
|
```bash
|
|
216
|
+
# Build
|
|
565
217
|
npm run build
|
|
566
|
-
```
|
|
567
|
-
|
|
568
|
-
### Watch Mode
|
|
569
|
-
```bash
|
|
570
|
-
npm run dev
|
|
571
|
-
```
|
|
572
218
|
|
|
573
|
-
|
|
574
|
-
```bash
|
|
575
|
-
# Test with local installation
|
|
219
|
+
# Install locally for testing
|
|
576
220
|
claude mcp add dev-logger-test -s user -- node $(pwd)/dist/index.js
|
|
577
|
-
|
|
578
|
-
# Start Claude and test tools
|
|
579
|
-
claude
|
|
580
|
-
> /mcp # Check if server is connected
|
|
581
221
|
```
|
|
582
222
|
|
|
583
|
-
## Contributing
|
|
584
|
-
|
|
585
|
-
1. Fork the repository
|
|
586
|
-
2. Create feature branch
|
|
587
|
-
3. Make changes and test thoroughly
|
|
588
|
-
4. Submit pull request with clear description
|
|
589
|
-
|
|
590
223
|
## License
|
|
591
224
|
|
|
592
225
|
MIT License - see LICENSE file for details.
|
|
@@ -596,4 +229,3 @@ MIT License - see LICENSE file for details.
|
|
|
596
229
|
For issues and questions:
|
|
597
230
|
- Open an issue in the repository
|
|
598
231
|
- Check existing issues for similar problems
|
|
599
|
-
- Include log samples when reporting bugs
|