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