@datadog/browser-logs

What is @datadog/browser-logs?

@datadog/browser-logs is an npm package that allows you to collect and monitor logs from your web applications in real-time. It integrates with Datadog's logging service to provide comprehensive insights into your application's performance, errors, and user interactions.

What are @datadog/browser-logs's main functionalities?

Basic Logging

This feature allows you to initialize the Datadog logging client and send basic log messages. The `init` method configures the client with your Datadog client token and other settings, while the `logger.info` method sends an informational log message.

const { datadogLogs } = require('@datadog/browser-logs');
datadogLogs.init({
  clientToken: 'YOUR_CLIENT_TOKEN',
  site: 'datadoghq.com',
  forwardErrorsToLogs: true,
  sampleRate: 100,
});
datadogLogs.logger.info('This is an info log');

Error Logging

This feature allows you to log errors that occur in your application. By catching exceptions and using the `logger.error` method, you can send detailed error logs to Datadog.

try {
  throw new Error('Something went wrong');
} catch (error) {
  datadogLogs.logger.error('An error occurred', { error });
}

Custom Attributes

This feature allows you to add custom attributes to your log messages. By passing an object with additional data to the logging methods, you can enrich your logs with context-specific information.

datadogLogs.logger.info('User action', { userId: '12345', action: 'click' });

Other packages similar to @datadog/browser-logs

logrocket

LogRocket is a front-end logging and session replay tool that helps you understand issues affecting your users. It provides similar logging capabilities as @datadog/browser-logs but also includes session replay, which allows you to see exactly what the user did leading up to an issue.

loggly-jslogger

Loggly is a cloud-based log management service. The `loggly-jslogger` package allows you to send logs from your web applications to Loggly. It provides similar logging capabilities as @datadog/browser-logs but integrates with Loggly's log management and analysis platform.

README

Browser Log Collection

Send logs to Datadog from web browser pages with the browser logs SDK.

See the dedicated datadog documentation for more details.

Usage

After adding @datadog/browser-logs to your package.json file, initialize it with:

import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.init({
  clientToken: '<DATADOG_CLIENT_TOKEN>',
  site: '<DATADOG_SITE>',
  forwardErrorsToLogs: true,
  sessionSampleRate: 100,
})

After the Datadog browser logs SDK is initialized, send custom log entries directly to Datadog:

import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.logger.info('Button clicked', { name: 'buttonName', id: 123 })

try {
  ...
  throw new Error('Wrong behavior')
  ...
} catch (ex) {
  datadogLogs.logger.error('Error occurred', { team: 'myTeam' }, ex)
}

Changelog

v6.5.0

Public Changes:

• ✨ [RUM-8622] introduce session-consistent trace sample rate (#3381) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• 🐛 [RUM-8744] CLS tracking: provide cls devicePixelRatio to adjust cls rect scale (#3389) [RUM] [RUM-REACT] [RUM-SLIM]

Internal Changes:

• 👷 Update all non-major dependencies (#3386) [RUM-REACT]
• 👷 fix tags to match the test optimisation configuration attributes (#3337) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• ✅ Clean logs in unit tests (#3390) [LOGS] [RUM] [RUM-REACT] [RUM-SLIM] [WORKER]
• Bump serialize-javascript from 6.0.1 to 6.0.2 in /test/app (#3383)
• ♻️ [RUM-8716] Use assembly hook for page states (#3362) [RUM] [RUM-REACT] [RUM-SLIM]