(Publish 26 June 2024 at 9:00 AM) add browser logs API docs

src/content/docs/browser/browser-monitoring/getting-started/introduction-browser-monitoring.mdx

@@ -34,7 +34,7 @@ import browserDistributedTracing from 'images/browser_screenshot-crop_distribute
   <Side>
     Our <InlinePopover type="browser" /> provides a real user monitoring (RUM) solution. It measures speed and performance as your end users navigate to your site through different web browsers, devices, operating systems, and networks. But browser monitoring goes far beyond providing information about the initial page load. Use it to measure full page life cycle data and start getting the info you need to help ensure customer satisfaction. 
 
-    New Relic lets you monitor the data from browser activity and optimize performance across your entire stack. Use browser monitoring to help ensure successful deployments and quickly troubleshoot customer-visible problems. Monitor your stack at a glance and make sure all your entities are operating as they should. Visualize application speed and performance, JavaScript errors, AJAX requests, and more. Spend less time trying to chase down issues and more time delivering a perfect digital experience to customers.     
+    New Relic lets you monitor the data from browser activity and optimize performance across your entire stack. Use browser monitoring to help ensure successful deployments and quickly troubleshoot customer-visible problems. Monitor your stack at a glance and make sure all your entities are operating as they should. Visualize application speed and performance, JavaScript errors, AJAX requests, logs and more. Spend less time trying to chase down issues and more time delivering a perfect digital experience to customers.     
 
       <ButtonGroup>  
       <ButtonLink

src/content/docs/browser/new-relic-browser/browser-apis/log.mdx

@@ -0,0 +1,125 @@
+---
+title: log
+type: apiDoc
+shortDescription: Capture a single log event.
+tags:
+  - Browser
+  - Browser monitoring
+  - Browser agent and SPA API
+metaDescription: Browser API call to capture data as a single log event.
+redirects:
+freshnessValidatedDate: never
+---
+
+## Syntax
+
+```js
+newrelic.log(message: string, options?: Object<{ customAttributes?: Object, level?: 'debug|error|info|trace|warn'}>)
+```
+
+Captures data as a single log event.
+
+## Requirements
+
+* Browser Pro, or Pro+SPA agent (v1.261.0 or higher)
+* If you're using npm to install the browser agent and using a non-standard implementation, you must enable the `logging` feature when instantiating the `BrowserAgent` class. For example, add the following in the`features` array:
+
+  ```js
+  import { Logging } from '@newrelic/browser-agent/features/logging'
+
+  const options = {
+    info: { ... },
+    loader_config: { ... },
+    init: { ... },
+    features: [
+      Logging
+    ]
+  }
+  ```
+
+  For more information, see the [npm browser installation documentation](https://www.npmjs.com/package/@newrelic/browser-agent#new-relic-browser-agent).
+
+## Description
+
+Upon executing this function with a valid message and elective options, the browser agent records the data as a single `log` event.  See the [Logs UI](https://docs.newrelic.com/docs/logs/ui-data/use-logs-ui/) for more information about log events. Any custom attributes supplied to the API call in the `options` argument (`options.customAttributes`) will be appended as top-level attributes on the log event. You can control the `logType` of the captured log by supplying a `level` to the `options` argument (`options.level`), which defaults to `info`.
+
+## Parameters
+
+<table>
+  <thead>
+    <tr>
+      <th width="25%">
+        Parameter
+      </th>
+
+      <th>
+        Description
+      </th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>
+        `message`
+
+        _string_
+      </td>
+
+      <td>
+        Required. A string value which will be set to the `message` value of the created log event. The `message` property of the log event is the most visible property exposed on the log event and is used across the UI platform when displaying logs.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        `options`
+
+        _Object_
+      </td>
+
+      <td>
+        Optional. An object used for supplying optional configurations for the captured log. `options.customAttributes` is an object of key:val pairs that assigns a top-level property and value to the created log for each attribute supplied.  `options.level` is an enum that assigns a log level to the created log event.  The `level` must be one of: `debug | error | info | trace | warn`.  The log level defaults to `info` if not supplied.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Examples
+
+### Capturing a simple log item
+
+```js
+newrelic.log('my log message')
+// saves a log event with:
+// a message of --> 'my log message'
+// a logType of --> 'info'
+```
+
+### Capturing a log item with a specified logType
+
+```js
+newrelic.log('my log message', {level: 'debug'})
+// saves a log event with:
+// a message of --> 'my log message'
+// a logType of --> 'debug'
+```
+
+### Capturing a log item with custom attributes
+
+```js
+newrelic.log('my log message', {customAttributes: {myFavoriteApp: true}})
+// saves a log event with:
+// a message of --> 'my log message'
+// a logType of --> 'info'
+// an attribute of --> 'myFavoriteApp: true'
+```
+
+### Capturing a log item with a specified logType and custom attributes
+
+```js
+newrelic.log('my log message', {level: 'debug', customAttributes: {myFavoriteApp: true}})
+// saves a log event with:
+// a message of --> 'my log message'
+// a logType of --> 'debug'
+// an attribute of --> 'myFavoriteApp: true'
+```

src/content/docs/browser/new-relic-browser/browser-apis/using-browser-apis.mdx

@@ -104,6 +104,26 @@ To monitor traces and events, use these methods:
         [`newrelic.setUserId()`](/docs/browser/new-relic-browser/browser-apis/setuserid)
       </td>
     </tr>
+
+    <tr>
+      <td>
+        Capture a single browser log event
+      </td>
+
+      <td>
+        [`newrelic.log()`](/docs/browser/new-relic-browser/browser-apis/log)
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        Automatically capture messages passing through your existing logger methods as log events
+      </td>
+
+      <td>
+        [`newrelic.wrapLogger()`](/docs/browser/new-relic-browser/browser-apis/wrapLogger)
+      </td>
+    </tr>
   </tbody>
 </table>
 
@@ -137,7 +157,7 @@ To report errors in your application, use these methods:
 
     <tr>
       <td>
-        Log a caught or handled error, without disrupting your app's operation
+        Capture a caught or handled error, without disrupting your app's operation
       </td>
 
       <td>

src/content/docs/browser/new-relic-browser/browser-apis/wraplogger.mdx

@@ -0,0 +1,160 @@
+---
+title: wrapLogger
+type: apiDoc
+shortDescription: Wrap existing browser logging methods.
+tags:
+  - Browser
+  - Browser monitoring
+  - Browser agent and SPA API
+metaDescription: Automatically capture data passing through your existing browser logging methods as log events.
+redirects:
+freshnessValidatedDate: never
+---
+
+## Syntax
+
+```js
+newrelic.wrapLogger(parent: Object, functionName: string, options?: Object<{ customAttributes?: Object, level?: 'debug|error|info|trace|warn'}>)
+```
+
+Automatically captures data passing through existing browser logging methods as log events.
+
+## Requirements
+
+* Browser Pro, or Pro+SPA agent (v1.261.0 or higher)
+* If you're using npm to install the browser agent and using a non-standard implementation, you must enable the `logging` feature when instantiating the `BrowserAgent` class. For example, add the following in the`features` array:
+
+  ```js
+  import { Logging } from '@newrelic/browser-agent/features/logging'
+
+  const options = {
+    info: { ... },
+    loader_config: { ... },
+    init: { ... },
+    features: [
+      Logging
+    ]
+  }
+  ```
+
+  For more information, see the [npm browser installation documentation](https://www.npmjs.com/package/@newrelic/browser-agent#new-relic-browser-agent).
+
+## Description
+Upon providing this method with a valid parent container and child function name, the browser agent will record a new `log` event every time the wrapped function is `invoked`, capturing the `first` argument passed to the invoked function as the log's `message`. See the [Logs UI](https://docs.newrelic.com/docs/logs/ui-data/use-logs-ui/) for more information about log events. Optional configurations can be passed along with these captured logs, by use of the `options` argument. Any custom attributes supplied to the API call in the `options` argument (`options.customAttributes`) will be appended as top-level attributes on every log event created by this wrapper. You can control the `logType` of the captured log by supplying a `level` to the `options` argument (`options.level`), which defaults to `info`. **Note** once successfully wrapped, the function's logging detection will not be able to be altered.
+
+## Parameters
+
+<table>
+  <thead>
+    <tr>
+      <th width="25%">
+        Parameter
+      </th>
+
+      <th>
+        Description
+      </th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>
+        `parent`
+
+        _Object_
+      </td>
+
+      <td>
+        Required. An object which contains the target function to be wrapped.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        `functionName`
+
+        _string_
+      </td>
+
+      <td>
+        Required. The name of the target function to be wrapped. This function must exist in the `parent` object and match the type of "function".
+      </td>
+    </tr>
+    <tr>
+      <td>
+        `options`
+
+        _Object_
+      </td>
+
+      <td>
+        Optional. An object used for supplying optional configurations for every log captured by the wrapper. `options.customAttributes` is an object of key:val pairs that assigns a top-level property and value to the created log for each attribute supplied.  `options.level` is an enum that assigns a log level to the created log event.  The `level` must be one of: `debug | error | info | trace | warn`.  The log level defaults to `info` if not supplied.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Examples
+
+### Capturing log items from the native console method(s)
+```js
+newrelic.wrapLogger(console, 'info')
+// from this point forward, every time `console.info` is invoked, it will save a log event with:
+// a message of --> <the first argument passed to console.info>
+// a logType of --> 'info'
+```
+
+### Capturing log items from a custom logger
+
+```js
+const myLoggers = {
+  logger: function(){...}
+}
+newrelic.wrapLogger(myLoggers, 'logger')
+// from this point forward, every time `myLoggers.logger` is invoked, it will save a log event with:
+// a message of --> <the first argument passed to myLoggers.logger>
+// a logType of --> 'info'
+```
+
+### Capturing log items with a specified logType
+
+```js
+const myLoggers = {
+  logger: function(){...}
+}
+newrelic.wrapLogger(myLoggers, 'logger', {level: 'debug'})
+// from this point forward, every time `myLoggers.logger` is invoked, it will save a log event with:
+// a message of --> <the first argument passed to myLoggers.logger>
+// a logType of --> 'debug'
+```
+
+### Capturing a log item with custom attributes
+
+```js
+const myLoggers = {
+  logger: function(){...}
+}
+newrelic.wrapLogger(myLoggers, 'logger', {customAttributes: {myFavoriteApp: true}})
+// from this point forward, every time `myLoggers.logger` is invoked, it will save a log event with:
+// a message of --> <the first argument passed to myLoggers.logger>
+// a logType of --> 'info'
+// an attribute of --> 'myFavoriteApp: true'
+```
+
+### Wrap multiple loggers
+
+```js
+const myLoggers = {
+  myInfoLogger: function(){...},
+  myDebugLogger: function(){...}
+}
+newrelic.wrapLogger(myLoggers, 'myInfoLogger', {level: 'info'})
+newrelic.wrapLogger(myLoggers, 'myDebugLogger', {level: 'debug'})
+// from this point forward, every time `myLoggers.myInfoLogger` is invoked, it will save a log event with:
+// a message of --> <the first argument passed to myLoggers.myInfoLogger>
+// a logType of --> 'info'
+
+// every time `myLoggers.myDebugLogger` is invoked, it will save a log event with:
+// a message of --> <the first argument passed to myLoggers.myDebugLogger>
+// a logType of --> 'debug'
+```