Manually capturing browser logs with the New Relic browser agent

The New Relic browser agent enables you to oversee the efficiency, issues, and user interaction of your web application or site. It captures information on webpage loading duration, Ajax requests, JavaScript errors, and personalized events, transmitting this data to New Relic for thorough examination and visual representation. But what if you’d like to capture the raw log data your web application emits for a more thorough debugging process? The browser agent now has a solution for this in the form of two API methods for manually capturing browser logs emitted by your web applications.

Why capture browser logs?

Capturing browser logs has a number of advantages, including:

• Help spot errors or inconsistencies that do not show up with traditional error tracking.
• Obtain verbose log messages to break down processes or transactions with finer granularity.
• Gain insight into user behaviors, responses from specific actions, or rendering issues.
• Easily organize and triage logs into manageable buckets based on level, type, page, etc..

Install and configure

If you want to use the New Relic browser agent to manually capture browser logs, you’ll need to follow some steps to install and configure it properly. Here’s a guide on how to do that.

1. Open New Relic and then select Add Data from the navigation panel.
2. Select Browser & Mobile, then select the Browser monitoring data source.
3. Choose your deployment method, either APM or Copy/Paste.
4. Select an existing app monitored in APM, or name your new app and then click Enable.

You can also utilize the browser agent NPM package to instrument your webpage. For more information about that process, see this instrumentation guide. Manually capturing browser logs is supported in browser agent versions 1.261.0 and higher.

Capturing browser logs

Manually capturing data as a single log event

If you want to capture log data on a case-by-case basis, the “log” API captures a message as a log event, while providing the flexibility to enhance the event with a specified level and custom attributes. This API has a variety of use cases, from logging one-off messages to extending your existing logging platforms.

Capturing a single log event is as simple as calling “newrelic.log(<message>, <options>)” with a string message and an optional object specifying a logging level or custom attributes. See the API documentation for more detailed information about using this API.

Automatically capturing data passing through existing browser logging methods as log events

If you already have logging solutions incorporated into your web app and you want to capture log data every time those logging methods are invoked, the “wrapLogger” API will instrument your methods to capture a log event on every call, while still providing the flexibility to enhance the event with a specified level and custom attributes. This API allows you to capture logs across your entire application ecosystem with relatively little effort, simplifying the process either by wrapping your already-used methods or even by wrapping native browser loggers, such as console.info.

Capturing log items from the native console method(s)

Capturing log items from a custom logger

Capturing all messages as log events is as simple as calling “newrelic.wrapLogger(<parentObject>, <functionName>, <options>)” with an object containing a method to be wrapped and an optional object specifying a logging level or custom attributes. See the API documentation for more detailed information about using this API.

Viewing browser logs

You can view, sort, and customize your captured browser logs within your browser application’s logging view. First, find your browser application, and then select “Logs” in the side panel. 

Here you can customize the columns, filters, and more to help break down the issue in question. For more information on the Logging views, see the logs UI documentation.