This should cover things like logging, tracing etc.

This article is a great reference.

Console logging in the browser

We have a few methods we can use with console to help us be more proficient on how we log:

.log
.info
.warn
.error
.table
.time(key)
.group
.groupEnd
.trace
.assert

Guidelines:

These are more guidelines that take influence from languages like Objective-C and personal decisions.

Logging keys

Example Class

import React, { Component } from "react";
import Emitter from "common/Emitter";
import Config from "src/app.json";
import Waypoint from "react-waypoint";

/**
 * Render the ComponentALLandingFive component
 *
 * @class ComponentALLandingFive
 * @extends {Component}
 */
class ComponentALLandingFive extends Component {
  /**
   * Handle primary button click event.
   *
   * @memberof ComponentALLandingFive
   */
  handlePrimaryClick = (e) => {
    console.group("- ComponentALLandingFive.handlePrimaryClick");
    Emitter.emit("event", {
      event: "ComponentALLandingFive.handlePrimaryClick",
      e: e.target,
      data: {
        href: "/",
      },
    });

    if (Config.debug) {
      e.preventDefault();
      console.warn("? Debug mode: early return");
      console.groupEnd();
      return;
    }

    const { router } = this.props;
    router.push(Config.baseUrl + "/test");
    console.groupEnd();
  };

  /**
   * Handle secondary button click event.
   *
   * @memberof ComponentALLandingFive
   */
  handleSecondaryClick = (e) => {
    console.group("- ComponentALLandingFive.handleSecondaryClick");
    Emitter.emit("event", {
      event: "ComponentALLandingFive.handleSecondaryClick",
      e: e.target,
      data: {
        href: "/",
      },
    });

    if (Config.debug) {
      e.preventDefault();
      console.warn("? Debug mode: early return");
      console.groupEnd();
      return;
    }

    const { router } = this.props;
    router.push(Config.baseUrl + "/test");
    console.groupEnd();
  };

  /**
   * Handle component enter event.
   *
   * @memberof ComponentALLandingFive
   */
  handleWaypointEnter = (e) => {
    console.log("- ComponentALLandingFive.handleWaypointEnter");
    Emitter.emit("event", {
      event: "ComponentALLandingFive.handleWaypointEnter",
    });
  };

  /**
   * Handle component exit event.
   *
   * @memberof ComponentALLandingFive
   */
  handleWaypointExit = (e) => {
    console.log("- ComponentALLandingFive.handleWaypointExit");
    Emitter.emit("event", {
      event: "ComponentALLandingFive.handleWaypointExit",
    });
  };

  /**
   * Render ComponentALLandingFive component
   * @memberof ComponentALLandingFive
   * @var {function} render Render ComponentALLandingFive component
   * @returns {Object} component
   */
  render() {
    // omitted for brevity
  }
}

export default ComponentALLandingFive;
copy

Note: In the below gif, the "analytics" logs come from the Emitter module class.

Example in action

If there is a possibility of an early return or error when logging and using groups, ensure that you adequately close the group off properly. If you cannot ensure that a group will close (ie entering a zone, mouse hover etc may not exit) then avoid the use of a group for that event and rely more on logs.