Echo (Proof of concept)

echo.js

window.echo = function (message, namespace) {
  if (namespace && !echo.namespaces[namespace]) {
    return;
  }

  console.log(message);
};

// TODO : DRY
echo.warn = function (message, namespace) {
  if (namespace && !echo.namespaces[namespace]) {
    return;
  }

  console.warn(message);
};

// TODO : DRY
echo.error = function (message, namespace) {
  if (namespace && !echo.namespaces[namespace]) {
    return;
  }

  console.error(message);
};

// Configure what namespaces you want turned on
echo.namespaces = {
  contact: true,
  carousel: false
};

// This will display because the 'contact' namespace is enabled:
echo.warn('Invalid email', 'contact');

// This will not show up because carousel logs are turned off
echo('Slide changed', 'carousel');

// This will not show up because the namespace is undefined
// In production you can simply omit the `echo.namespaces` property to silence logs
echo('Oh hai', 'kitten');

// Namespace-free logs will always show up:
echo('Generic message');

Typical usage would involve creating a namespace for each component that you want logging for. This way most components can be silenced while you're working on a specific one.

Further functionality might include a config option to pipe logs to a web service. A use case would be logging all error messages that users encounter on production.