Monitoring errors in a web application is critical for delivering a reliable user experience. Modern tools like New Relic make it possible to track, categorize, and alert on virtually all types of errors. This article dives deep into frontend error monitoring, with practical guidance for React/Next.js apps.


Understanding Error Types in Web Applications

Before setting up monitoring, you need to know the types of errors you can encounter:

1.1 JavaScript Errors

  1. Runtime exceptions caused by code logic.
  2. Examples:

const x = undefined;
console.log(x.foo); // JS Error: Cannot read property 'foo'

1.2 Syntax Errors

  1. Errors that occur when the JS parser cannot interpret the code.
  2. Example:

eval("alert('oops"); // SyntaxError: Unexpected end of input

1.3 Promise Rejections

  1. Errors in asynchronous operations not handled via .catch().
  2. Example:

Promise.reject("API failed");

1.4 Network Errors

  1. Failed API requests, 404 or 500 responses.
  2. These can be monitored using Fetch/XHR instrumentation.

1.5 Page & User Event Errors

  1. Route navigation failures in SPAs.
  2. UI event failures like button click errors or form submission issues.
💡 Pro Tip: Categorizing errors from the start helps filter high-priority issues in dashboards.

2. How New Relic Helps Track Errors

New Relic Browser agent automatically collects:

  1. JavaScript errors
  2. Promise rejections
  3. Page load times
  4. XHR/Fetch failures
  5. SPA route changes

Custom features you can enable:

2.1 Custom Error Logging

You can send custom errors to the dashboard:


if (window.newrelic) {
newrelic.noticeError(new Error("Custom functional error"), {
category: "Network Error",
endpoint: "/api/user"
});
}
  1. Category helps group errors.
  2. Attributes can carry extra info like user ID, page route, or environment.

2.2 Page Actions / Event Tracking

Track critical user actions to link errors to user behavior:


newrelic.addPageAction("formSubmit", {
form: "contactForm",
userId: 123
});
  1. Useful for monitoring form submissions, checkout flows, or button clicks.
  2. Can be filtered in New Relic Dashboard for deeper insights.

2.3 Performance Metrics

New Relic provides real-user monitoring (RUM):

  1. Page load times
  2. SPA route transitions
  3. Slow network requests
  4. Metrics can be correlated with errors to identify performance-induced failures.

3. Categorizing Errors Like a Pro

Proper categorization allows quick diagnosis:

TypeHow to TrackNotes
JS ErrorAutomatic by agentUncaught exceptions
Syntax ErrorAutomaticParser issues
Promise RejectionAutomaticAsync failures
Network ErrorXHR/Fetch trackingMonitor API failures
Custom Event ErrorsnoticeErrorTag with category & attributes
💡 Pro Tip: Include environment info (dev, staging, prod) in attributes for better filtering.

4. Alerts and Notifications

  1. Alerts are configured in the New Relic dashboard.
  2. Examples of alert rules:
  3. Trigger if more than 5 errors occur in 1 minute.
  4. Trigger on slowest page load > 5s.
  5. Trigger on API failure rate > 10%.
  6. Alerts can go to email, Slack, PagerDuty, or webhook.
⚡ Pro Tip: Combine error type + page action for targeted alerts. For example, alert only if “checkout button” errors exceed threshold.

5. Testing Errors Locally

Simulate errors in your app before deploying:


// JS error
throw new Error("Test JS error");

// Promise rejection
Promise.reject("Test Promise rejection");

// Custom error
newrelic.noticeError(new Error("Test functional error"), { category: "Test" });
  1. Errors appear in dashboard immediately if agent is configured.
  2. Test different environments (local, staging, prod) to validate configuration.

6. Advanced Topics for Pro-Level Monitoring

6.1 Session & User Context

  1. Attach errors to specific user sessions.
  2. Include user ID, browser, device, and OS for debugging.

6.2 SPA (Single Page Application) Routing

  1. Monitor route changes in React/Next.js to catch navigation failures:

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function RouteTracker() {
const router = useRouter();
useEffect(() => {
const handleRouteError = (url) => {
newrelic.noticeError(new Error("Route failed"), { route: url });
};
router.events.on('routeChangeError', handleRouteError);
return () => router.events.off('routeChangeError', handleRouteError);
}, [router.events]);
return null;
}

6.3 Performance + Error Correlation

  1. Analyze slow pages causing JS errors.
  2. Combine performance metrics with error tracking to prioritize fixes.

6.4 Logging Custom Data

  1. Track extra info like:
  2. API request payload
  3. User actions leading to error
  4. Time of day / environment

7. Combining New Relic with Backend Logging

  1. Frontend errors → sent to New Relic (real-time dashboard)
  2. Backend errors → stored in logs or database (Node.js + Winston or Pino)
  3. Correlate frontend + backend for full-stack observability.

8. Pro-Level Recommendations

  1. Always include environment tags: dev, staging, prod.
  2. Use custom attributes for better filtering.
  3. Monitor network failures separately (API + external services).
  4. Test locally before pushing to production.
  5. Set intelligent alerts: only alert when thresholds are exceeded.
  6. Review dashboards weekly to catch silent issues.
  7. Consider integrations: Slack, email, PagerDuty, Jira.

9. Conclusion

New Relic is a powerful library, but maximizing its potential requires careful setup:

  1. Track all error types
  2. Categorize and tag errors
  3. Monitor page performance
  4. Set actionable alerts
  5. Correlate errors with user sessions

By combining these strategies, you can proactively catch issues before they impact users and maintain high reliability in production apps.