We use Sentry for Error Logging and Tracking and we use Segment for Product and User Analytics. Our logging infrastructure consists of a simple and universal logging service (Logger.service.ts) with support for multiple Transports (aka channels). A transport is essentially a storage device for your logs; a destination where you would want to send your logs for storage and analysis. You can have multiple transports configured at different levels. For example, one may want error logs to be stored in a persistent remote location (like a database), but all logs output to the console or a local file.

Log Levels

Our log levels are based on logging levels of the popular logging library winston. Refer https://github.com/winstonjs/winston#logging-levels to get an understanding of the log levels.

Transports

We have the following transports

1. ConsoleTransport - It prints the log on the browser console. It is used only in all the non-production environments (dev, qa, and staging)
2. SentryTransport - It sends logs to Sentry. It is used for environments other than the local environment
3. SegmentTransport - - It sends logs to Segment. It is used for environments other than the local environment. It is used for logs other than error logs since Segment is used for Product and User Analytics

We have the logging infrastructure already set up for you here - https://github.com/cawstudios/ReactJSBlueprint/tree/develop/src/app/services/logging

The binding rules will be as follows

// We will allow logs to be pasted in the browser's console to aid debugging
if (process.env.REACT_APP_ENV_NAME !== 'production') {
  container.bind(ILogTransport$).to(ConsoleLogTransport);
}

// We should push errors to Sentry in local and dev env the code is still under
// development and pushing errors to Sentry will just result into lot of noise
if (
  process.env.REACT_APP_ENV_NAME !== 'local' &&
  process.env.REACT_APP_ENV_NAME !== 'development'
) {
  container.bind(ILogTransport$).to(SentryLogTransport);
}

// Product and user analytics to be only send in production
if (process.env.REACT_APP_ENV_NAME === 'production') {
  container.bind(ILogTransport$).to(SegmentLogTransport);
}