npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

Iโ€™ve always been into building performant and accessible sites, but lately Iโ€™ve been taking it extremely seriously. So much so that Iโ€™ve been building a tool to help me optimize and monitor the sites that I build to make sure that Iโ€™m making an attempt to offer the best experience to those who visit them. If youโ€™re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, ๐Ÿ‘‹, Iโ€™m Ryan Hefnerย  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If youโ€™re interested in other things Iโ€™m working on, follow me on Twitter or check out the open source projects Iโ€™ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soonโ€“ish.

Open Software & Tools

This site wouldnโ€™t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you ๐Ÿ™

ยฉ 2024 โ€“ย Pkg Stats / Ryan Hefner

rxjs-debug-operator

v2.0.0

Published

<h1 align="center">RxJS Debug Operator ๐Ÿ›</h1>

Downloads

691

Readme



We've all had occasions where we've felt the need to simply pipe a tap(console.log) to our Observables to get some insight into what is occuring at a certain time.

This operator aims to reduce the amount of typing you'll have to do!

Usage

Installation

Install the package:
npm install rxjs-debug-operator

Adding it to your code

It's super simple to add and use:

Use your prefered import method:

import { debug } from 'rxjs-debug-operator';
// OR
const { debug } = require('rxjs-debug-operator');

Then pipe it to your Observables:

const obs$ = source.pipe(debug());

You can add a label to help identify the Observable:

const obs$ = source.pipe(debug('My Observable'));
// OUTPUT
// My Observable    {value}

It even allows you to turn it off if you are in a production environment, or for any other reason you wouldn't want to log to the console:

const obs$ = source.pipe(debug({ shouldIgnore: true }));

Examples

We can use it on its own to simply log out values to the console

const obs$ = of('my test value');
obs$.pipe(debug()).subscribe();

// OUTPUT:
// my test value

We can add a label to the logs:

const obs$ = of('my test value');
obs$.pipe(debug('Obserable A')).subscribe();

// OUTPUT:
// Obserable A    my test value

// We can label it using the config object syntax:
const obs$ = of('my test value');
obs$.pipe(debug({ label: 'Obserable A' })).subscribe();

// OUTPUT:
// Obserable A    my test value

// However, if we add a label and custom notification handlers,
// we will not get the label in the logs by default:
const obs$ = of('my test value');
obs$
  .pipe(
    debug({
      label: 'Obserable A',
      next: (value) => console.log(value),
    })
  )
  .subscribe();

// OUTPUT:
// my test value

We can also set up our own notification handlers if we prefer:

const obs$ = of('my test value');
obs$
  .pipe(debug({ next: (value) => console.log('my custom handler:', value) }))
  .subscribe();

// OUTPUT:
// my custom handler:   my test value

const obs$ = throwError('uh oh');
obs$
  .pipe(debug({ error: (value) => console.log('my error handler:', value) }))
  .subscribe();

// OUTPUT:
// my error handler:   uh oh

const obs$ = of('my test value');
obs$
  .pipe(debug({ complete: (value) => console.log('I completed') }))
  .subscribe();

// OUTPUT:
// I completed

We can access the default logger for more flexibility:

const obs$ = of('my test value');

obs$
  .pipe(
    debug((logger) => ({
      next: (v) => logger.warn('Warning!', v),
    }))
  )
  .subscribe();

// OUTPUT
// WARN: Warning!   my test value

Setting Global Config

You can set some globals that make it more convenient to change:

  • the default logger
  • a global prefix to be appended to all logs
  • a global-level ignore flag

Change the Default Logger

You can change the default logger by creating an object that matches the DebugLogger interface, which can be seen below:

export interface DebugLogger {
  log: (...args: unknown[]) => void;
  error: (...args: unknown[]) => void;
  warn?: (...args: unknown[]) => void;
  debug?: (...args: unknown[]) => void;
  info?: (...args: unknown[]) => void;
}

Once you have created your new logger, you can set it to be used as the default logger using setGlobalDebugConfig()

setGlobalDebugConfig({
  logger: myNewLogger,
});

Now all your debug() operators will use your new logger to log the values it receives.

Adding a Global Prefix

You can also add a string prefix to all your logs at a global level, which can be useful to help identify logs.

setGlobalDebugConfig({
  prefix: 'My Prefix',
});

Setting whether to ignore logging

You can also set whether all debug() should not log at the global level. This can be useful for turning it off in production environments.

setGlobalDebugConfig({
  shouldIgnore: isProduction,
});

Example Winston Usage

import { DebugLogger, setGlobalDebugConfig } from 'rxjs-debug-operator';
const winston = require('winston');

const sysLogger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  transports: [
    //
    // - Write all logs with level `error` and below to `error.log`
    // - Write all logs with level `info` and below to `combined.log`
    //
    new winston.transports.File({ filename: 'error.log', level: 'error' }),
    new winston.transports.File({ filename: 'combined.log' }),
  ],
});

const debugLogger: DebugLogger = {
  log: (v) => sysLogger.info(v),
  error: (e) => sysLogger.error(e),
};

setGlobalDebugConfig({ logger: debugLogger });

const obs$ = of('my test value');
obs$.pipe(debug()).subscribe();

// OUTPUT
// 'my test value' written to `combined.log`

NOTES

It should be noted that local config options passed to the debug() operator will take precedence over any global values

API

Debug

debug(config?: Partial<DebugOperatorConfig>)

DebugOperatorConfig

See the list of options available to configure the operator below

| Option | Description | Type | Default | | -------------- | :----------------------------------------------------------------: | -------------------------- | --------------- | | shouldIgnore | Do not perform the Debug actions | boolean | false | | label | Add a label to the logs to help identify the Observable | string | null | | next | Action to perform when Observer receives a Next notification | (value: T) => void | console.log | | error | Action to perform when Observer receives an Error notification | (value: unknown) => void | console.error | | complete | Action to perform when Observer receives a Completion notification | () => void | () => null |

Global Debug Config

setGlobalDebugConfig(config: Partial<GlobalDebugConfig>)

GlobalDebugConfig

| Option | Description | Type | Default | | -------------- | :-----------------------------------------------------: | ------------- | --------- | | shouldIgnore | Do not perform the Debug actions | boolean | false | | prefix | Add a label to the logs to help identify the Observable | string | null | | logger | Logger to use to log values recieved by debug() | DebugLogger | console |

DebugLogger

| Option | Description | Type | Default | | -------- | :---------: | ------------------------------ | --------------- | | log | Basic log | (...args: unknown[]) => void | console.log | | error | Error log | (...args: unknown[]) => void | console.error | | info? | Info log | (...args: unknown[]) => void | console.info | | warn? | Warn log | (...args: unknown[]) => void | console.warn | | debug? | Debug log | (...args: unknown[]) => void | console.debug |