When a user reports a bug, the information you actually need is already gone. The console error that triggered it fired three page loads ago. The failed network request happened before they even thought to open a ticket.
The fix is to capture this data continuously — from page load, not from the moment the user clicks "report a bug". Here's how to build that from scratch.
Intercepting console.error
The browser's console object is just a plain JavaScript object. Its methods are writable, which means you can swap them out.
const errors = [];
const originalConsoleError = console.error;
console.error = function (...args) {
errors.push({
type: 'console.error',
message: args.map(arg => String(arg)).join(' '),
timestamp: Date.now(),
});
originalConsoleError.apply(console, args);
};
Always store a reference to the original before patching — you'll call through to it so DevTools still works. .apply(console, args) matters because some internal console implementations check that this is the console object.
Catching uncaught errors and promise rejections
Console patches only catch what code explicitly logs. For uncaught exceptions and unhandled promise rejections:
window.addEventListener('error', (event) => {
errors.push({
type: 'uncaught_error',
message: event.message,
source: event.filename,
line: event.lineno,
col: event.colno,
stack: event.error?.stack ?? null,
timestamp: Date.now(),
});
});
window.addEventListener('unhandledrejection', (event) => {
errors.push({
type: 'unhandled_rejection',
message: String(event.reason),
stack: event.reason?.stack ?? null,
timestamp: Date.now(),
});
});
The error event gives you the filename, line number, and column — useful for mapping back to source maps. The unhandledrejection event fires when a Promise rejects and nothing catches it.
Intercepting network requests
fetch
const requests = [];
const originalFetch = window.fetch;
window.fetch = async function (input, init) {
const url = typeof input === 'string' ? input : input.url;
const method = init?.method ?? 'GET';
const startTime = Date.now();
try {
const response = await originalFetch.apply(this, arguments);
requests.push({
type: 'fetch',
url,
method,
status: response.status,
duration: Date.now() - startTime,
timestamp: startTime,
});
return response;
} catch (err) {
requests.push({
type: 'fetch',
url,
method,
status: null,
error: String(err),
duration: Date.now() - startTime,
timestamp: startTime,
});
throw err;
}
};
Note the throw err at the end of the catch block. Never silently swallow errors in a wrapper.
XMLHttpRequest
Plenty of libraries still use XHR under the hood. You need to patch both.
const OriginalXHR = window.XMLHttpRequest;
window.XMLHttpRequest = function () {
const xhr = new OriginalXHR();
const meta = { url: null, method: null, startTime: null };
const originalOpen = xhr.open.bind(xhr);
xhr.open = function (method, url, ...rest) {
meta.method = method;
meta.url = url;
return originalOpen(method, url, ...rest);
};
const originalSend = xhr.send.bind(xhr);
xhr.send = function (...args) {
meta.startTime = Date.now();
xhr.addEventListener('loadend', () => {
requests.push({
type: 'xhr',
url: meta.url,
method: meta.method,
status: xhr.status,
duration: Date.now() - meta.startTime,
timestamp: meta.startTime,
});
});
return originalSend(...args);
};
return xhr;
};
Privacy considerations
Raw network logs are a liability. URLs frequently contain sensitive data.
Sanitize URLs
function sanitizeUrl(url) {
try {
const parsed = new URL(url);
parsed.search = '';
parsed.pathname = parsed.pathname
.split('/')
.map(segment => /^[a-f0-9-]{8,}$/i.test(segment) ? '[id]' : segment)
.join('/');
return parsed.toString();
} catch {
return '[invalid url]';
}
}
Exclude sensitive domains
const EXCLUDED_DOMAINS = ['stripe.com', 'paypal.com', 'auth0.com'];
function shouldCapture(url) {
try {
const hostname = new URL(url).hostname;
return !EXCLUDED_DOMAINS.some(domain => hostname.endsWith(domain));
} catch {
return false;
}
}
Filter by path pattern
const EXCLUDED_PATTERNS = ['/auth/', '/login', '/password', '/token'];
function isExcludedPath(url) {
try {
const { pathname } = new URL(url);
return EXCLUDED_PATTERNS.some(pattern => pathname.includes(pattern));
} catch {
return true;
}
}
Capture early, filter late
Start capturing from page load. Store everything in memory. When a report is generated, apply your filters before anything leaves the browser.
function getRecentErrors(limitMs = 60_000) {
const cutoff = Date.now() - limitMs;
return errors.filter(e => e.timestamp >= cutoff);
}
function getRelevantRequests(limitMs = 60_000) {
const cutoff = Date.now() - limitMs;
return requests
.filter(r => r.timestamp >= cutoff)
.filter(r => shouldCapture(r.url) && !isExcludedPath(r.url))
.map(r => ({ ...r, url: sanitizeUrl(r.url) }));
}
This means you never miss an error that happened before the report was triggered, but you also never send data you haven't explicitly decided to include.
A few things to watch for
Memory. If a user leaves a tab open for hours, these arrays will grow. Add a max-size cap or a rolling window.
Third-party script errors. The error event will catch errors from third-party scripts, often with message: "Script error." and no useful stack. This is a browser security feature (CORS). Filter these out by checking event.filename.
Content Security Policy. If your site's CSP blocks inline scripts, make sure your logger is loaded as a proper module.
Sentry, LogRocket, and every other browser monitoring tool does exactly this under the hood. The pieces take an afternoon to build. The value is in running them from page load, before the user knows they need to file a report.
SOCIAL SHARE CARD GENERATOR