-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #19540 from newrelic/feat(browser)-Auto-logging-19496
DO NOT MERGE UNTILL NOTIFIED: Auto-logging for browser
- Loading branch information
Showing
3 changed files
with
145 additions
and
2 deletions.
There are no files selected for viewing
144 changes: 144 additions & 0 deletions
144
src/content/docs/browser/browser-monitoring/browser-pro-features/auto-logging.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters