Skip to content

Commit

Permalink
Merge pull request #19540 from newrelic/feat(browser)-Auto-logging-19496
Browse files Browse the repository at this point in the history
DO NOT MERGE UNTILL NOTIFIED: Auto-logging for browser
  • Loading branch information
adutta-newrelic authored Jan 28, 2025
2 parents 8ed83d7 + 43a0088 commit e373241
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 2 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
---
title: "Automatically detect browser logs"
metaDescription: "Get a more complete picture of your front-end application"
freshnessValidatedDate: 2024-11-18
---

Auto logging collects log messages issued from the browser `console` to help you maximize observability of your front-end applications.

Browser logs are tracked by default at the `WARN` level for Pro and Pro+SPA agents, but unavailable for the Lite browser agent. We recommend that you first confirm you're using the Pro or Pro+SPA agent. See [Getting Started](#get-started).

## How browser auto-logging works [#how-it-works]

Based on logging levels and sampling rates set in the configuration, auto-instrumentation of browser logs will attempt to collect messages from the following methods:

<table>
<thead>
<tr>
<th style={{width: "200px"}}>
Method
</th>

<th>
Level
</th>
</tr>
</thead>

<tbody>
<tr>
<td>
`console.log`
</td>
<td>
`'INFO'`
</td>
</tr>

<tr>
<td>
`console.error`
</td>
<td>
`'ERROR'`
</td>
</tr>

<tr>
<td>
`console.warn`
</td>
<td>
`'WARN'`
</td>
</tr>

<tr>
<td>
`console.info`
</td>
<td>
`'INFO'`
</td>
</tr>

<tr>
<td>
`console.debug`
</td>
<td>
`'DEBUG'`
</td>
</tr>

<tr>
<td>
`console.trace`
</td>
<td>
`'TRACE'`
</td>
</tr>
</tbody>
</table>

<Callout variant="important">
Data passed through the console methods may go through serialization and [obfuscation](/docs/browser/new-relic-browser/configuration/obfuscate-browser-agent-data/). Depending on the size and frequency, this may negatively impact application performance as well as data costs. In general, it is NOT recommended to pass in large objects or large amounts of data into console methods.
</Callout>

By default, logging data is stored for 30 days, but actual data retention depends on your account.

## Get started [#get-started]

<Steps>
<Step>
### Enable automatic log collection [#enable-configure-settings]

1. Go to <DNT>**[one.newrelic.com](https://one.newrelic.com/all-capabilities) > All Capabilities > Browser**</DNT>.
2. Select your browser app.
3. In the left-hand menu, click <DNT>**Application settings**</DNT>.
4. On the Application settings page, make sure <DNT>**Pro**</DNT> or <DNT>**Pro + SPA**</DNT> browser agent is selected. Automatic log detection is not available for the Lite browser agent.
5. Toggle ON <DNT>**Browser logs**</DNT> setting.
</Step>

<Step>
### Configure sampling rates [#configure-sampling-rates]

Set a sampling rate (0%-100%) for the following samples:

* <DNT>**User sessions**</DNT> records a random sample of all user sessions.

For example, if you set the session sampling rate to 50%, it means that:

* Half of all user sessions will automatically collect log events.
</Step>

<Step>
### View log events [#view-events]

You can find logging data in two places:

* On the <DNT>**Logs**</DNT> page:

1. Go to: <DNT>**[one.newrelic.com > All capabilities](https://one.newrelic.com/all-capabilities) > Logs**</DNT>. For details on what you can do in the UI, see [Logs UI](/docs/logs/ui-data/use-logs-ui).

You can also query the `Log` data type. Here's a simple example NRQL query:

```sql
SELECT * FROM Log
```

You can also use NerdGraph, our GraphQL-format API to [query data](/docs/apis/nerdgraph/examples/nerdgraph-nrql-tutorial), or to [configure log management](/docs/apis/nerdgraph/examples/nerdgraph-log-parsing-rules-tutorial).

* On the <DNT>**Errors inbox**</DNT> page:

1. In the left-hand browser menu, click <DNT>**Errors**</DNT>.
2. Click on the <DNT>**Triage**</DNT> and <DNT>**Group errors**</DNT> pages to see logs attached to errors.
</Step>
</Steps>

## Data consumption [#data-consumption]

Logs follow the same consumption pricing as your other browser bytes. The amount of bytes produced depends on the count and length of messages.

The auto logging feature eliminates the need to call the `newrelic.log` or `newrelic.wrapLogger` browser APIs, except when adding custom attributes to logging events.
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ For more details on session replay, see the following sections:
2. Select your browser app.
3. In the left-hand menu, click <DNT>**Application settings**</DNT>.
4. On the Application settings page, make sure <DNT>**Pro**</DNT> or <DNT>**Pro + SPA**</DNT> browser agent is selected. Session replay is not available for the Lite browser agent.
5. Toggle ON <DNT>**Session tracking**</DNT> and <DNT>**Session replay**</DNT> settings.
5. Toggle ON <DNT>**Session traces**</DNT> and <DNT>**Session replay**</DNT> settings.
</Step>

<Step>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ Browser API used to force a replay to start recording.
`newrelic.recordReplay()` can be called to manually force a replay to begin recording. You must meet the following requirements:

* Account is entitled to record replays
* Session Tracking is Enabled
* Session Trace is Enabled
* Browser mutation observer global is present in the current version of the browser being used
* The Session Replay feature is either normally imported, or set to `autoStart: false` and has already been "started"
Expand Down

0 comments on commit e373241

Please sign in to comment.