fix: show real capture error + step-by-step backend logging

- Frontend: blob error responses (from responseType:'blob' calls) are now
  decoded back to text/JSON so the actual backend error message surfaces
  in the UI instead of generic "Request failed with status code 500"
- Backend: step-by-step console.log through capture flow so the exact
  failure point is visible in server logs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/device-detail/ToolsTab.tsx

@@ -407,8 +407,20 @@ function PacketCaptureTool({ deviceId, interfaces }: { deviceId: number; interfa
       setFileName(name);
       setReady(true);
     } catch (e: unknown) {
-      const msg = (e as { response?: { data?: { error?: string } } })?.response?.data?.error;
-      setError(msg || (e as Error).message || 'Capture failed');
+      // responseType:'blob' means error bodies arrive as Blobs — parse them back to text
+      const blobData = (e as { response?: { data?: unknown } })?.response?.data;
+      if (blobData instanceof Blob) {
+        try {
+          const text = await blobData.text();
+          const json = JSON.parse(text) as { error?: string };
+          setError(json.error || text || 'Capture failed');
+        } catch {
+          setError('Capture failed');
+        }
+      } else {
+        const msg = (e as { response?: { data?: { error?: string } } })?.response?.data?.error;
+        setError(msg || (e as Error).message || 'Capture failed');
+      }
     } finally {
       setLoading(false);
     }