Frontend Error Monitoring and Session Replay Solutions
These six packages provide critical observability for frontend applications, focusing on error tracking, performance monitoring, and user session replay. sentry, rollbar, raygun, and trackjs specialize in capturing JavaScript errors, stack traces, and context to help developers debug issues quickly. logrocket and newrelic extend this by offering deep session replay capabilities, allowing teams to watch exactly what a user did before an error occurred. While there is overlap in error reporting, the choice often depends on whether you prioritize granular error grouping, advanced replay features, or full-stack performance correlation.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Frontend Observability: Sentry vs. LogRocket vs. New Relic vs. Raygun vs. Rollbar vs. TrackJS
When your application breaks in production, guessing isn't an option. You need tools that tell you exactly what went wrong, who it affected, and how to fix it. The ecosystem offers several strong contenders: sentry, logrocket, newrelic, raygun, rollbar, and trackjs. While they all solve the core problem of "my app is broken," they approach it from different angles. Some focus on deep session replays, others on full-stack correlation, and some on pure error aggregation.
Let's break down how these tools handle the critical moments of frontend debugging.
🚨 Capturing Errors: Automatic vs. Manual Control
The first job of any monitoring tool is to catch errors before users complain. Most of these tools offer automatic capturing, but the level of control varies.
sentry automatically captures unhandled exceptions and rejected promises. It also lets you manually capture messages with rich context.
import * as Sentry from "@sentry/react";
// Automatic: Captures unhandled errors globally
Sentry.init({ dsn: "YOUR_DSN" });
// Manual: Capture a specific message with context
Sentry.captureMessage("User clicked checkout but cart was empty", {
level: "warning",
user: { id: "123" }
});
rollbar similarly captures global errors but emphasizes custom payloads for grouping.
import Rollbar from "rollbar";
const rollbar = new Rollbar({ accessToken: "YOUR_TOKEN" });
// Manual capture with custom data for grouping
rollbar.error("Payment failed", { orderId: "999", currency: "USD" });
raygun provides automatic reporting but requires explicit initialization to attach user data.
import { raygunClient } from "raygun4js";
raygunClient.init({ apiKey: "YOUR_API_KEY" });
// Manual send with tags
raygunClient.send(new Error("Login timeout"), { tags: ["auth", "timeout"] });
trackjs focuses on capturing the "telemetry" leading up to an error automatically, but you can also push custom events.
import { Track } from "trackjs";
Track.install({ token: "YOUR_TOKEN" });
// Record a custom event in the timeline
Track.recordEvent("Form Submitted", { formId: "signup" });
logrocket captures errors automatically but shines when you manually mark significant moments in the session.
import LogRocket from "logrocket";
LogRocket.init("YOUR_APP_ID");
// Manually identify a user to link sessions
LogRocket.identify("user-123", { name: "Jane Doe" });
newrelic requires the browser agent to be loaded (often via script tag or package) and captures JS errors automatically.
import { nr } from "newrelic";
// Custom error addition if needed
nr.noticeError(new Error("Widget failed to load"), { widgetId: "weather-01" });
🎥 Seeing the Problem: Session Replay vs. Stack Traces
Knowing an error happened is step one. Seeing why it happened is step two. This is where the tools diverge significantly.
logrocket is built around session replay. It records the DOM, network requests, and console logs, letting you watch a video-like playback of the user's session.
// LogRocket doesn't need extra code to replay; it just works.
// You view the session in the dashboard and see:
// - Mouse movements
// - Console logs printed during the session
// - Network requests that failed
sentry has added "Replay" features recently, allowing you to see a buffered recording of the session leading up to an error.
import * as Sentry from "@sentry/react";
Sentry.init({
dsn: "YOUR_DSN",
integrations: [
Sentry.replayIntegration({
maskAllText: true, // Privacy default
blockAllMedia: true
})
]
});
// Errors in the dashboard now include a "Replay" tab
newrelic offers "Browser Session Replay" which correlates directly with their APM data.
// Configuration in New Relic One dashboard enables replay
// No extra code snippet needed beyond standard agent init
// Links frontend replay to backend trace IDs automatically
raygun, rollbar, and trackjs traditionally focus on detailed stack traces and timeline events rather than full DOM replay (though features evolve, their core strength remains the data timeline).
// TrackJS example: Viewing the "Telemetry Timeline"
// You see a list: "Click Button" -> "API Call 500" -> "Error"
// Instead of a video, you get a structured log of actions
🏷️ Context and User Tracking
Errors are useless if you don't know who experienced them. All these tools allow you to attach user context, but the API style differs.
sentry uses a scoped approach to set user context for subsequent events.
Sentry.setUser({ id: "123", email: "jane@example.com" });
Sentry.setTag("subscription", "pro");
rollbar lets you configure the person object globally or per payload.
rollbar.configure({
payload: {
person: { id: "123", username: "jane_doe" }
}
});
raygun uses a specific setUser method.
raygunClient.setUser({
identifier: "123",
email: "jane@example.com"
});
logrocket combines identification with session metadata.
LogRocket.identify("123", {
name: "Jane Doe",
email: "jane@example.com"
});
newrelic uses setCustomAttribute or setUserId.
nr.setUserId("123");
nr.setCustomAttribute("planType", "enterprise");
trackjs attaches customer info to the session.
Track.customer({
id: "123",
name: "Jane Doe"
});
⚙️ Configuration and Framework Integration
How hard is it to get these running in a modern React, Vue, or Angular app?
sentry offers dedicated SDKs for almost every framework, handling routing instrumentation automatically.
// React specific init
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";
Sentry.init({
dsn: "...",
integrations: [new BrowserTracing()],
tracesSampleRate: 1.0
});
logrocket has plugins for Redux and Vuex to record state changes automatically.
import LogRocket from "logrocket";
import createReduxMiddleware from "logrocket-redux";
const logRocketMiddleware = createReduxMiddleware(LogRocket);
// Add to Redux store creation
newrelic often relies on a script injected into the HTML head for full capability, though npm packages exist for SPA routing.
<!-- Typical setup involves a script tag in index.html -->
<script src="https://js-agent.newrelic.com/nr-1234.js"></script>
rollbar, raygun, and trackjs provide generic JS SDKs that work well with any framework but may require manual setup for routing transitions.
// Rollbar generic setup
const rollbar = new Rollbar({ ... });
// Manual route change tracking might be needed for SPAs
rollbar.log("Page View", { path: window.location.pathname });
🛡️ Privacy and Data Control
Recording user sessions raises privacy concerns. How do these tools handle sensitive data?
logrocket and sentry (Replay) allow you to mask input fields and block specific elements from recording.
// Sentry Replay masking
Sentry.init({
integrations: [
Sentry.replayIntegration({
maskAllInputs: true,
blockClass: "sensitive-data"
})
]
});
newrelic provides privacy modes in the dashboard to scrub PII (Personally Identifiable Information) before it leaves the browser.
raygun and rollbar allow you to filter payloads before sending using callback functions.
// Rollbar filter
rollbar.configure({
checkIgnore: function(isUncaught, args, payload) {
if (payload.request.url.includes("/internal")) {
return true; // Ignore internal errors
}
return false;
}
});
📊 Summary: Key Similarities
While they compete, they share common ground:
1. 🌍 Global Error Handling
- All capture
window.onerrorandunhandledrejectionevents automatically. - No need to wrap every function in try/catch for basic coverage.
// Common pattern across all tools:
// Throw an error -> Tool catches it -> Sends to dashboard
throw new Error("Something broke");
2. 👤 User Identification
- Every tool supports linking errors to a specific user ID or email.
- Essential for filtering "Show me errors only for Premium Users."
// Conceptual equivalent in all tools:
setUser({ id: "123" });
3. 🔔 Alerting
- All provide email, Slack, or PagerDuty integrations when error rates spike.
- You can set thresholds (e.g., "Alert if > 50 errors in 5 minutes").
4. 📦 Source Map Support
- All support uploading source maps to de-minify stack traces.
- Critical for debugging production builds from React/Vue/Angular.
# Typical CLI command for uploading source maps (Sentry example)
sentry-cli upload-sourcemaps ./dist
🆚 Summary: Key Differences
| Feature | sentry | logrocket | newrelic | raygun | rollbar | trackjs |
|---|---|---|---|---|---|---|
| Primary Focus | Error Tracking + Replay | Session Replay | Full-Stack APM | Crash Reporting | Error Workflows | Telemetry Timeline |
| Session Replay | ✅ (Add-on) | ✅ (Core Feature) | ✅ (Add-on) | ❌ (Limited) | ❌ | ❌ |
| Backend Correlation | ✅ | ❌ | ✅ (Strongest) | ⚠️ | ⚠️ | ❌ |
| Open Source Core | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Self-Hosting | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Pricing Model | Generous Free Tier | Session-based | Platform-based | Volume-based | Volume-based | Volume-based |
💡 The Big Picture
Choosing the right tool depends on what question you are trying to answer.
sentry is the safe, powerful default. If you want excellent error grouping, great framework support, and the option to add replay later, start here. It's the Swiss Army knife of error tracking.
logrocket is the detective's magnifying glass. If your team spends too much time saying "I can't reproduce this," LogRocket solves that by showing you the exact video of the failure. Pair it with an error tracker if you need deeper stack analysis.
newrelic is the enterprise command center. If you already monitor your servers with New Relic, adding the browser agent gives you a single pane of glass from the database to the button click. It's powerful but can be overkill for small apps.
rollbar and raygun are the focused specialists. They do error tracking very well without trying to be everything. Choose them if you want a clean, no-nonsense interface and robust alerting without the complexity of a massive platform.
trackjs is the timeline viewer. It sits in the middle, offering a clear sequence of events leading to a crash. It's a great middle ground if you find full session replay too heavy but stack traces too dry.
Final Thought: You don't always have to pick just one. Many teams run sentry for errors and logrocket for replay, linking them together. Start with the problem you feel most painfully today — is it not knowing what broke, or not knowing how to reproduce it? — and choose the tool that solves that first.
How to Choose: logrocket vs newrelic vs raygun vs rollbar vs sentry vs trackjs
- logrocket:
Choose
logrocketif your top priority is high-fidelity session replay that captures DOM changes, network requests, and console logs without manually instrumenting every event. It is ideal for support teams and developers who need to visually reproduce bugs reported by users rather than just reading stack traces. - newrelic:
Choose
newrelicif you need a unified observability platform that correlates frontend errors with backend infrastructure performance, database queries, and APM data. It is best for organizations already using New Relic for backend monitoring who want to close the loop between client-side errors and server-side bottlenecks. - raygun:
Choose
raygunif you want a straightforward, privacy-focused error monitoring tool with strong crash reporting and real-user monitoring (RUM) without the complexity of a massive platform. It suits teams that need reliable error grouping and alerting with minimal configuration overhead. - rollbar:
Choose
rollbarif you need highly customizable error grouping and automated workflows to fix bugs directly from the dashboard. It is excellent for engineering teams that want to integrate error resolution into their existing project management tools and require fine-grained control over how errors are categorized. - sentry:
Choose
sentryif you want the most popular, open-core solution with deep framework integrations (React, Vue, Angular) and a generous free tier. It is the standard choice for startups and enterprises alike who need a balance of powerful features, community support, and the ability to self-host if required. - trackjs:
Choose
trackjsif you prefer a lightweight, developer-first tool that focuses on 'telemetry'—recording the timeline of events leading up to an error rather than just the error itself. It is great for teams that want simple, fast setup and clear visibility into the user journey without heavy agent overhead.
Popular Comparisons
README for logrocket
LogRocket
The official JavaScript SDK for LogRocket.
Installation
npm install --save logrocket