@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

v5.27.0

Public Changes

• ✨ Discard loading time when page is hidden (#2965) [RUM] [RUM-SLIM]
• 🐛 [RUM-5785] fix missing navigation timings on Safari (#2964) [LOGS] [RUM] [RUM-SLIM] [WORKER]
• 🐛 convert long animation frame times to nanoseconds (#2994) [RUM] [RUM-SLIM]
• 🐛 [RUM-94] ignore performance resource timings with negative duration (#2958) [RUM] [RUM-SLIM]

Internal Changes

• 👷 Update all non-major dependencies (#2992) [RUM-REACT] [RUM]
• 👷 timeout e2e-bs ci job after 30 minutes (#2999)
• 👷 Bump staging to staging-38
• 👷 Bump chrome to 128.0.6613.84-1 (#2946)
• 👷 allow job 'test-performance' to fail (#2980)
• 👷 Update all non-major dependencies (#2975)
• 👷 Bump staging to staging-37
• 🎨 [RUM-6203] Expose experimental features in init method (#3006) [RUM] [RUM-SLIM]
• 🎨 [RUM-5100] Move away from testbuilder in test files - Pt 3 (#2952) [RUM] [RUM-SLIM]
• ✅♻️ do not mock navigationStart in mockClock (#2979) [LOGS] [RUM] [RUM-SLIM] [WORKER]
• ♻️ [RUM-6181] Use performanceObserver for LCP entries (#2990) [RUM] [RUM-SLIM]
• 🔥 cleanup unused Experimental Features (#2996) [LOGS] [RUM] [RUM-SLIM] [WORKER]
• ♻️ [RUM-6180] Use performanceObserver for long-task entries (#2989) [RUM] [RUM-SLIM]
• ⚗️✨ [RUM 5983] Add set view context apis (#2967) [LOGS] [RUM] [RUM-SLIM] [WORKER]