LogKeeper

LogKeeper is a lightweight browser debugging extension that captures and organizes everything happening in your web application — without opening DevTools. 🔍 WHAT IT CAPTURES • Console logs, warnings, errors, info, and debug messages • Network failures (4xx, 5xx, connection errors) with full request/response details • Unhandled JavaScript exceptions with stack traces • Unhandled Promise rejections • Content Security Policy (CSP) violations with directive and source details • WebSocket connection errors and close events • Storage changes — cookies, localStorage, and sessionStorage mutations • User interactions as breadcrumbs (clicks, navigation, form submissions, scrolls) 🚨 INCIDENT DETECTION • Automatically groups recurring errors into incidents based on fingerprint matching • Configurable threshold (how many hits) and time window (1 min to 1 hour) • Active vs. resolved incident tracking with duration and occurrence count • Auto-resolve incidents after a configurable quiet period • Resolve, reopen, or delete incidents manually 🧩 FRAMEWORK DETECTION • Automatically detects React, Vue, and Angular with version and mode info • Enriches errors with the active component name at the time of failure • Component-aware incident grouping — same error in different components = separate incidents • Framework-specific diagnostic hints for common error patterns • Component breadcrumb trail showing the hierarchy when errors occur 🔁 REGRESSION & PATTERN DETECTION • Regression detection — flags errors that reappear after being absent (configurable from 6 hours to 14 days) • Error pattern detection identifies bursts, periodic errors, cascades, correlated clusters, and flapping issues • Patterns displayed as color-coded badges directly on log entries 📊 PERFORMANCE MONITORING • Core Web Vitals (LCP, CLS, INP, FCP, TTFB) with good/needs-improvement/poor ratings • LCP element attribution and CLS layout shift sources • Resource analysis by type (scripts, styles, images, fonts, XHR/fetch) • Long task detection with duration and severity classification • Top offenders — identifies which scripts cause the most long tasks • Memory usage monitoring with heap size tracking • Performance snapshots — save and compare metrics across page loads • Slow request warnings — flag any request exceeding a configurable threshold 🌊 NETWORK WATERFALL • Visual timeline of all network requests — like DevTools Network panel, but passive • 6 color-coded timing phases: Stalled, DNS, Connect, TLS, Waiting (TTFB), Download • Filter by resource type, status code, domain, and free-text search • Sort by start time, duration, or transfer size • Slow request highlighting (orange >1s, red >3s) • Hover tooltips with detailed timing breakdown • Keyboard navigation (j/k, arrow keys, Esc) • Multi-tab view — switch between pages when multiple tabs are monitored • Auto-refresh enabled by default (every 3 seconds) • Session tag snapshots — automatically saves waterfall data when tagging sessions • Export as clipboard report or JSON file 🔀 COMPARE TOOL • Compare two sets of log data side-by-side to identify regressions, fixes, and changes • Compare by session tag, archive, time range, or URL prefix • Entries matched by fingerprint and classified: New, Fixed, Worsened, Improved, Unchanged • Level distribution chart with animated bars • Auto-compare when session tags follow version patterns (e.g., "v1.2.3" vs "v1.2.4") • Regression alert banner when error count increases significantly • Framework component diff — error count changes per component • Performance diff — Core Web Vitals comparison with delta values • Shareable URL (encodes parameters only, never log data) 📡 NETWORK ACTIVITY • Records failed HTTP requests with full context — including resource loads (stylesheets, scripts, images, fonts) enriched with HTTP status codes, request/response headers, timing, and server IP • Captures request/response headers and bodies (request body up to 2048 chars) • Copy failed requests as cURL commands for terminal replay • Export as HAR files for sharing with your team 🍪 STORAGE CHANGE TRACKING • Monitor cookie changes (JS-visible and httpOnly) • Track localStorage and sessionStorage mutations • Useful for debugging auth flows, session persistence, and state management • Each storage type can be toggled independently 🧭 BREADCRUMB TRAIL & REPRO STEPS • Tracks user clicks, keyboard events, page navigations, scroll activity, form submissions, and visibility changes • Provides a timeline of what the user did leading up to an error • Auto-generates step-by-step reproduction instructions from breadcrumbs • Copy repro steps as plain text or Markdown for bug trackers 🏷️ SESSION TAGGING • Label your debugging sessions (e.g. "Testing checkout", "Reproducing bug #42") • Filter logs by session tag to isolate specific test runs • Tags are preserved in exports and archives 📌 PINNING & NOTES • Pin important log entries so they always appear at the top • Add notes to pinned entries for context and annotations • Export pinned entries separately for focused bug reports • Pinned logs are protected from retention cleanup by default 📸 SCREENSHOTS • Automatically captures screenshots when errors occur • View screenshots alongside error details for visual context • Rate-limited (1 per 2 seconds) to avoid excessive storage 🗺️ SOURCE MAP RESOLUTION • Resolve minified stack traces to original source code positions • Shows original file names, function names, and line numbers • Works when source maps are deployed alongside production code 🔀 DIFF VIEW • Compare two occurrences of the same error side-by-side • Highlights field differences: message, URL, status, duration, headers, stack trace • Quickly identify what changed between error occurrences 🔴 SCREEN RECORDING • Record your browser tab or entire screen to capture visual context alongside logs • Tab mode captures DOM content only — ideal for focused single-page bug reproduction • Screen mode captures everything including cursor mov…