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下载趋势
GitHub Stars 排名
统计详情
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.
如何选择: newrelic vs logrocket vs raygun vs rollbar vs sentry vs trackjs
- 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. - 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. - 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.
热门对比
newrelic的README
New Relic's Node.js agent
This package instruments your application for performance monitoring with New Relic.
In order to take full advantage of this package, make sure you have a New Relic account before starting.
As with any instrumentation tool, please test before using in production.
Installation
To use New Relic's Node.js agent entails these three steps, which are described in detail below:
- Install the
newrelicpackage - Create a base configuration file
- Load the agent in your program
-
To install the agent for performance monitoring, use your favorite npm-based package manager and install the
newrelicpackage into your application:$ npm install newrelic -
Then, copy the stock configuration file to your program's base folder:
$ cp ./node_modules/newrelic/newrelic.js ./<your destination> -
Now, add your New Relic license key and application/service name to that file:
/* File: newrelic.js */ 'use strict' /** * New Relic agent configuration. * * See lib/config/schemas/ in the agent distribution for a more complete * description of configuration variables and their potential values. */ exports.config = { app_name: ['Your application or service name'], license_key: 'your new relic license key', /* ... rest of configuration .. */ } -
Finally, run your program with the
newrelicmodule loaded first by using node's-r/--requireflag.$ node -r newrelic your-program.jsIf you cannot control how your program is run, you can load the
newrelicmodule before any other module in your program.const newrelic = require('newrelic') /* ... the rest of your program ... */
Next.js instrumentation
We recommend using the hybrid agent functionality to setup Next.js. Please read our Next.js instrumentation with hybrid agent document for more information. The following example applications show how to load the newrelic hybrid agent instrumentation, inject browser agent, and deploying to Vercel:
ECMAScript Modules
If your application is written with import and export statements in javascript, you are using ES Modules and must bootstrap the agent in a different way.
The New Relic Node.js agent includes support for ES Modules.
Setup
-
If you rely on a configuration file to run the agent, you must rename the file from
newrelic.jstonewrelic.cjsso it can be properly loaded. All the contents of the configuration file will behave the same once you rename. See CommonJS modules in ESM for more details.$ mv newrelic.js newrelic.cjs -
To use the newrelic ESM loader, start your program with node and use the
--importflag and a path to the loader file, like this:$ node --import newrelic/esm-loader.mjs -r newrelic your-program.js
Custom Instrumentation
The agent supports adding your own custom instrumentation to ES module applications. You can use the instrumentation API methods. The only other difference between CommonJS custom instrumentation and ESM is you must provide a property of isEsm: true.
import newrelic from 'newrelic'
newrelic.instrument({ moduleName: 'parse-json', isEsm: true }, function wrap(shim, parseJson, moduleName) {
shim.wrap(parseJson.default, function wrapParseJson(shim, orig) {
return function wrappedParseJson() {
const result = orig.apply(this, arguments)
result.instrumented = true
return true
}
})
})
We support the following custom instrumentation API methods in ES module apps:
newrelic.instrumentnewrelic.instrumentConglomeratenewrelic.instrumentDatastorenewrelic.instrumentMessagesnewrelic.instrumentWebframework
Note that newrelic.instrumentLoadedModule is deprecated and scheduled for removal in v15. It was never supported in ES module apps, and in CommonJS it only existed to retrofit instrumentation when the agent was loaded after user modules, which is no longer supported.
If you want to see an example of how to write custom instrumentation in an ES module app, check out our examples repo for a working demo.
Getting Started
For more information on getting started, check the Node.js docs.
External Modules
There are modules that can be installed and configured to accompany the Node.js agent:
@newrelic/native-metrics: Provides hooks into the native v8 layer of Node.js to provide metrics to the Node.js agent.
Usage
Using the API
The newrelic module returns an object with the Node.js agent's API methods attached.
const newrelic = require('newrelic')
/* ... */
newrelic.addCustomAttribute('some-attribute', 'some-value')
You can read more about using the API over on the New Relic documentation site.
Testing
These are the steps to work on core agent features, with more detail below:
- Fork the agent
- Install its dependencies
- Run tests using
npm
-
Fork and clone this GitHub repository:
$ git clone git@github.com:your-user-name/node-newrelic.git $ cd node-newrelic -
Install the project's dependencies:
$ npm install
Then you're all set to start programming.
To run the test suite
- Install Docker
- Start the Docker services:
$ npm run services - Run all the tests using
$ npm run test
Available test suites include:
$ npm run unit
$ npm run integration
$ npm run versioned
$ npm run lint
$ npm run smoke
Further Reading
Here are some resources for learning more about the agent:
-
Configuring the agent using
newrelic.jsor environment variables -
Example applications - Working examples of New Relic features in Node.js.
Support
Should you need assistance with New Relic products, you are in good hands with several support channels.
If the issue has been confirmed as a bug or is a feature request, please file a GitHub issue.
Support Channels
- New Relic Documentation: Comprehensive guidance for using our platform
- New Relic Community: The best place to engage in troubleshooting questions
- New Relic Technical Support Offerings: Support offerings.
- New Relic University: A range of online training for New Relic users of every level
Privacy
At New Relic we take your privacy and the security of your information seriously, and are committed to protecting your information. We must emphasize the importance of not sharing personal data in public forums, and ask all users to scrub logs and diagnostic information for sensitive information, whether personal, proprietary, or otherwise.
We define “Personal Data” as any information relating to an identified or identifiable individual, including, for example, your name, phone number, post code or zip code, Device ID, IP address and email address.
Please review New Relic’s General Data Privacy Notice for more information.
Contribute
We encourage your contributions to improve the Node.js agent! Keep in mind when you submit your pull request, you'll need to sign the CLA via the click-through using CLA-Assistant. You only have to sign the CLA one time per project.
If you have any questions, or to execute our corporate CLA, required if your contribution is on behalf of a company, please drop us an email at opensource@newrelic.com.
A note about vulnerabilities
As noted in our security policy, New Relic is committed to the privacy and security of our customers and their data. We believe that providing coordinated disclosure by security researchers and engaging with the security community are important means to achieve our security goals.
If you believe you have found a security vulnerability in this project or any of New Relic's products or websites, we welcome and greatly appreciate you reporting it to New Relic through our bug bounty program.
If you would like to contribute to this project, review these guidelines.
To all contributors, we thank you! Without your contribution, this project would not be what it is today.
License
Except as noted below, the Node.js agent is licensed under the Apache 2.0 License.
The New Relic security agent is licensed under the New Relic Software License v1.0. The New Relic security agent module may be integrated like the New Relic Node.js agent.
The Node.js agent also uses source code from third-party libraries. You can find full details on which libraries are used and the terms under which they are licensed in the third-party notices document.