DevLog: A Most Excellent Custom RxJS Operator

devlog.operator.ts

import { tap } from 'rxjs/operators';
import { environment as ENV } from '../../environments/environment'; // NOTE: adjust path to environment files


const normalStyle = [
  'display: block',
  'color: mediumVioletRed',
  'font-weight: normal',
  'background: linear-gradient(135deg, #98fb98 66%, #22c1c3 100%)',
  'padding: 3px 9px',
].join(';');

const errorStyle = [
  'display: block',
  'color: #512500',
  'font-weight: normal',
  'background: linear-gradient(135deg, #f87666 55%, #ff934f 100%)',
  'padding: 3px 9px',
].join(';');

const completeStyle = [
  'display: block',
  'color: #2f3061',
  'font-weight: normal',
  'background: linear-gradient(135deg, #22c1c3 66%, #50723c 100%)',
  'padding: 3px 9px',
].join(';');

export function devlog(message: string) {
  return tap({
    next(val) {
      if (!ENV.production) {
        if (typeof val === 'string') {
          console.log(`%c${message}: ${val ? val : '📭 (empty string)'}`, normalStyle);
        } else if (typeof val === 'number' || typeof val === 'boolean') {
          console.log(`%c${message}: ${val}`, normalStyle);
        } else {
          console.log(`%c${message}: %O`, normalStyle, val);
        }
      }
    },
    error(error) {
      if (!ENV.production) {
        console.log(`☠️ ERROR: %c${message}: %O`, errorStyle, error);
      }
    },
    complete() {
      if (!ENV.production) {
        console.log(`%c${message}: Complete`, completeStyle);
      }
    }
  })
}

How to use:

import { devlog } from 'path/to/devlog.ts';

myObservable
    .pipe(
        devlog('A righteous message')
    )
    .subscribe()