A decorator for wrapping a function in a `console.group(msg)` -> `console.groupEnd()` call.

console-group-decorator.d.ts

export function groupCollapsedFn<F extends Function>(
  msg: any, func: F,
): F;
  
export function groupFn<F extends Function>(
  msg: any, func: F, isCollapsed?: boolean
): F;

console-group-decorator.js

export const groupCollapsedFn = (msg, func) => groupFn(msg, func, true);

export const groupFn = (msg, func, isCollapsed) => {
  // decorated func
  return function() {
    // start group
    console[isCollapsed === true ? "groupCollapsed" : "group"](msg);

    try {
      let result = func.apply(this, arguments);

      if (_isPromise(result)) {
        // result is promise
        return result
          .then(val => {
            console.groupEnd();
            return val;
          })
          .catch(err => {
            console.groupEnd();
            throw err;
          });
      } else {
        // result is not async
        console.groupEnd();
        return result;
      }
    } catch (e) {
      // error was thrown
      console.groupEnd();
      throw e;
    }
  };
};

const _isPromise = x =>
  x &&
  typeof x === "object" &&
  typeof x.then === "function" &&
  typeof x.catch === "function";

This allows you to decorate a JavaScript function such that every time you call it, it starts a console.group(…) or console.groupCollapsed(…) and regardless of how the function terminates via any of the following ways, it will safely end the group:

• synchronously
• thrown error
• resolved promise
• rejected promise

Simple example:

const doThing = groupFn("Doing thing", (index) => {
  console.log(`in Function: ${index}`);
  return Promise.resolve().then(() => {
    console.log(`in Promise: ${index}`);
    return true;
  })
});

doThing(1).then(() => doThing(2));

NOTE: the example shows it working with promises that run in serial, if you have this on promises that are running in parallel, then it is possible for the grouping to get mixed up.