Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DO NOT MERGE UNTILL NOTIFIED: Auto-logging for browser #19540

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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).

Check notice on line 9 in src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx

View workflow job for this annotation

GitHub Actions / vale

[vale] src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx#L9

[Microsoft.Passive] 'are tracked' looks like passive voice.
Raw output
{"message": "[Microsoft.Passive] 'are tracked' looks like passive voice.", "location": {"path": "src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx", "range": {"start": {"line": 9, "column": 14}}}, "severity": "INFO"}

Check failure on line 9 in src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx

View workflow job for this annotation

GitHub Actions / vale

[vale] src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx#L9

[Microsoft.Spacing] 't. S' should have one space.
Raw output
{"message": "[Microsoft.Spacing] 't. S' should have one space.", "location": {"path": "src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx", "range": {"start": {"line": 9, "column": 201}}}, "severity": "ERROR"}

## 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:

Check notice on line 13 in src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx

View workflow job for this annotation

GitHub Actions / vale

[vale] src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx#L13

[new-relic.ComplexWords] Consider using 'try' instead of 'attempt'.
Raw output
{"message": "[new-relic.ComplexWords] Consider using 'try' instead of 'attempt'.", "location": {"path": "src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx", "range": {"start": {"line": 13, "column": 112}}}, "severity": "INFO"}

<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.

Check failure on line 86 in src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx

View workflow job for this annotation

GitHub Actions / vale

[vale] src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx#L86

[Microsoft.Spacing] 's. I' should have one space.
Raw output
{"message": "[Microsoft.Spacing] 's. I' should have one space.", "location": {"path": "src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx", "range": {"start": {"line": 86, "column": 275}}}, "severity": "ERROR"}

Check failure on line 86 in src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx

View workflow job for this annotation

GitHub Actions / vale

[vale] src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx#L86

[Microsoft.Contractions] Use 'it's' instead of 'it is'.
Raw output
{"message": "[Microsoft.Contractions] Use 'it's' instead of 'it is'.", "location": {"path": "src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx", "range": {"start": {"line": 86, "column": 291}}}, "severity": "ERROR"}
</Callout>

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

Check notice on line 89 in src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx

View workflow job for this annotation

GitHub Actions / vale

[vale] src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx#L89

[Microsoft.Passive] 'is stored' looks like passive voice.
Raw output
{"message": "[Microsoft.Passive] 'is stored' looks like passive voice.", "location": {"path": "src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx", "range": {"start": {"line": 89, "column": 26}}}, "severity": "INFO"}

## 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.

Check notice on line 144 in src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx

View workflow job for this annotation

GitHub Actions / vale

[vale] src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx#L144

[Microsoft.Wordiness] Consider using 'unless' instead of 'except when'.
Raw output
{"message": "[Microsoft.Wordiness] Consider using 'unless' instead of 'except when'.", "location": {"path": "src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx", "range": {"start": {"line": 144, "column": 112}}}, "severity": "INFO"}
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
Loading