@sentry/node vs @sentry/browser vs @sentry/react
Error Tracking and Monitoring Libraries Comparison
1 Year
@sentry/node@sentry/browser@sentry/reactSimilar Packages:
What's Error Tracking and Monitoring Libraries?

Sentry is a powerful error tracking and monitoring tool that helps developers identify and fix issues in their applications in real time. It provides comprehensive insights into application errors, performance bottlenecks, and user interactions, allowing teams to improve the overall quality and reliability of their software. Each Sentry package is tailored for specific environments, ensuring optimal integration and functionality across different platforms, whether it's a web browser, a Node.js server, or a React application.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
@sentry/node7,615,0268,2472.16 MB362a day agoMIT
@sentry/browser7,191,1008,2471.21 MB362a day agoMIT
@sentry/react4,457,7038,247453 kB362a day agoMIT
Feature Comparison: @sentry/node vs @sentry/browser vs @sentry/react

Integration

  • @sentry/node:

    @sentry/node offers robust integration with Node.js frameworks like Express, Koa, and Hapi. It captures unhandled promise rejections and exceptions, providing detailed stack traces and context about the server environment, which is crucial for debugging backend issues.

  • @sentry/browser:

    @sentry/browser integrates easily with various frontend frameworks and libraries, allowing you to capture unhandled exceptions and performance metrics directly from the browser. It supports automatic instrumentation of fetch and XMLHttpRequest calls, making it straightforward to monitor API errors.

  • @sentry/react:

    @sentry/react provides a tailored integration for React applications, allowing developers to use error boundaries to catch errors in their component trees. This package also supports React Router, enabling tracking of navigation-related errors seamlessly.

User Context

  • @sentry/node:

    @sentry/node also supports user context, enabling you to attach user information to errors that occur on the server side. This is particularly useful for understanding the impact of errors on specific users and for debugging user-specific issues.

  • @sentry/browser:

    @sentry/browser allows you to set user context easily, which helps in identifying which user encountered an error. This context can include user IDs, email addresses, and other relevant information that aids in reproducing and fixing issues.

  • @sentry/react:

    @sentry/react enhances user context tracking by automatically capturing user information when using React components. This integration helps in providing a more granular view of errors based on user interactions within the application.

Performance Monitoring

  • @sentry/node:

    @sentry/node provides performance monitoring for Node.js applications, allowing you to track the performance of your server-side code. You can measure transaction durations, database query times, and external HTTP request durations, giving you insights into the overall performance of your backend services.

  • @sentry/browser:

    @sentry/browser includes performance monitoring capabilities that allow you to track the performance of your web application. It captures metrics such as page load times, resource loading times, and user interactions, helping you identify performance bottlenecks.

  • @sentry/react:

    @sentry/react integrates performance monitoring specifically for React applications, allowing you to measure component render times and identify slow components. This helps in optimizing the performance of your React app by pinpointing areas that need improvement.

Error Reporting

  • @sentry/node:

    @sentry/node captures errors and exceptions occurring in your Node.js application, providing comprehensive error reports that include stack traces and contextual data about the request and environment. This aids in diagnosing server-side issues effectively.

  • @sentry/browser:

    @sentry/browser captures unhandled exceptions and errors occurring in the browser, providing detailed reports that include stack traces, breadcrumbs, and user context. This information is crucial for debugging and resolving frontend issues quickly.

  • @sentry/react:

    @sentry/react captures errors specifically within React components, providing detailed reports that include the component stack and context. This allows developers to quickly identify and fix issues that arise during the rendering and lifecycle of React components.

Setup and Configuration

  • @sentry/node:

    @sentry/node also offers a simple setup process for Node.js applications. It provides clear documentation and examples for integrating with various frameworks, making it easy for developers to start monitoring their server-side applications.

  • @sentry/browser:

    @sentry/browser is straightforward to set up, requiring minimal configuration to start capturing errors. It can be easily integrated into existing frontend applications with just a few lines of code, making it accessible for developers of all skill levels.

  • @sentry/react:

    @sentry/react is designed for easy integration into React applications, with clear guidelines for setup and configuration. It provides React-specific features that enhance error tracking, making it an ideal choice for React developers.

How to Choose: @sentry/node vs @sentry/browser vs @sentry/react
  • @sentry/node:

    Select @sentry/node if you are building a server-side application using Node.js. This package is designed to handle errors and performance monitoring in backend environments, allowing you to track issues in your server code, including Express.js applications and other Node frameworks.

  • @sentry/browser:

    Choose @sentry/browser if you are developing a client-side web application and need to capture errors and performance issues directly from the user's browser. This package is optimized for frontend environments and provides features like breadcrumb tracking and user context to enhance error reporting.

  • @sentry/react:

    Opt for @sentry/react if you are developing a React application and want seamless integration with React's component lifecycle. This package provides React-specific features such as error boundaries, which help catch errors in the component tree, and automatic context tracking for better insights.

README for @sentry/node

Sentry

Official Sentry SDK for Node

npm version npm dm npm dt

Installation

npm install @sentry/node

# Or yarn
yarn add @sentry/node

Usage

Sentry should be initialized as early in your app as possible. It is essential that you call Sentry.init before you require any other modules in your application, otherwise auto-instrumentation of these modules will not work.

You need to create a file named instrument.js that imports and initializes Sentry:

// CJS Syntax
const Sentry = require('@sentry/node');
// ESM Syntax
import * as Sentry from '@sentry/node';

Sentry.init({
  dsn: '__DSN__',
  // ...
});

You need to require or import the instrument.js file before importing any other modules in your application. This is necessary to ensure that Sentry can automatically instrument all modules in your application:

// Import this first!
import './instrument';

// Now import other modules
import http from 'http';

// Your application code goes here

ESM Support

When running your application in ESM mode, you should use the Node.js --import command line option to ensure that Sentry is loaded before the application code is evaluated.

Adjust the Node.js call for your application to use the --import parameter and point it at instrument.js, which contains your Sentry.init() code:

# Note: This is only available for Node v18.19.0 onwards.
node --import ./instrument.mjs app.mjs

If it is not possible for you to pass the --import flag to the Node.js binary, you can alternatively use the NODE_OPTIONS environment variable as follows:

NODE_OPTIONS="--import ./instrument.mjs" npm run start

Links