📡 Live Logs & Error Monitoring
Automatically detect JavaScript errors, failed API calls, and crashes on your website — captured with full diagnostic context and synced to your workflow.
🌟 Overview#
Live Logs is Sniffer’s built-in error monitoring system. Once the Sniffer script tag is installed on your website, it passively monitors for JavaScript errors, unhandled promise rejections, failed network requests, and resource load failures. Detected errors are captured with full context and logged automatically in your project as System Bugs.
Unlike standalone error monitoring tools, Live Logs is fully integrated into Sniffer’s defect tracking pipeline. Detected errors can automatically become issues on your 📋 Task Board , get assigned to developers, and sync to 🔗 Jira — all without manual intervention.
For details on the System Bug list and detail view, see 🛰️ System Bugs → . For the CDN-driven capture flow, see 🤖 Sniffer AutoBug → .
🖼️ Insert image of the Live Logs dashboard showing a live stream of incoming errors.
🚀 Getting Started#
Prerequisites#
The Sniffer script tag must be installed on your website:
<script
src="https://cdn.snifferweb.com/sniffer.js"
data-project-id="YOUR_PROJECT_ID"
></script>Tip: This is the same script that powers the 💬 Feedback Widget and 🤖 Sniffer AutoBug . One snippet, three features.
⚙️ Enable Error Monitoring#
- Navigate to ⚙️ Settings within your project.
- Enable the Live Logs toggle (
isLiveLogEnabledflag). - Configure capture settings and alert thresholds.
- Ensure your domain is in the Whitelisted URLs list (🏢 Company Settings ).
🔍 What Gets Captured#
📱 Device Context (Auto-Captured)#
Every error includes:
📋 System Bug List#
Route: /sf/projects/:id/system-bugs
All auto-detected errors appear in a filterable list. See 🛰️ System Bugs → for the full UI walkthrough.
🖼️ Insert image of the System Bug list with severity, count, and last-seen columns.
🐛 System Bug Detail View#
Route: /sf/projects/:id/system-bugs/:bugId
Click any error to open the detail view with these tabs:
1. ℹ️ Info Tab#
2. 📟 Console Logs Tab#
Shows the first 30 log entries. Logs are filterable by level.
3. 🌐 Network Logs Tab#
Shows the first 30 network entries with error highlighting.
4. 💬 Comments Tab#
Team discussion about the error — same comment features as 🐛 Bug Details .
5. 🔗 Linked Tasks Tab#
Link the system bug to related issues on the 📋 Task Board . Useful when one error has multiple fix-tasks or is being investigated as part of a broader story.
🖼️ Insert image of the System Bug detail view with all 5 tabs visible.
⚙️ Configuration#
📘 Live Logs Documentation#
For Support organization projects, a Live Logs Docs page is available in the sidebar under Settings. It provides:
- Step-by-step script installation guide (with framework examples for React, Vue, Angular, Next.js)
- Domain whitelisting instructions
- Configuration best practices
- Source-map upload guide
- Troubleshooting tips
🔄 Integration with Task Board#
Auto-detected errors that become issues appear on the 📋 Task Board with:
- Source indicator: System bug icon distinguishes them from manual bugs
- Platform field: Set to the detected platform
- Attachments: Console logs, network logs, and device context attached automatically
- Jira sync: If 🔗 Jira integration is active, auto-detected issues sync to Jira
- Affected Files (AI): Auto-suggested file list based on stack trace + repo integration
📊 Live Feed (Real-Time Stream)#
A WebSocket-backed live feed displays errors as they happen:
- New errors flow in at the top
- Click-through to detail view
- Pause / resume button
- Filter by URL, error type, severity