Javascript Logging Conventions

Published: Jan 3, 2019

Last updated: Jan 3, 2019

This should cover things like logging, tracing etc.

Logging

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:

When going through a process across files and functions, attempt to use group to log the process.
Assertions may also become handy when if/else logic is involved for logging purposes.
Ensure these logs only show when running in a certain environment (ie not in production mode).

Practical usage

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

Logging keys

Type	Key	Example
Error	!	console.error('! description', error);
Warning	?	console.warn('? description');
Functions	>	console.group('> fileName.functionName');
Instance methods	-	console.group('- className.methodName');
Static methods	+	console.group('+ className.staticMethodName');
Debug level 1	#	console.log('# importantDebugMessage');
Debug level 2	##	console.log('## moreImportantDebugMessage');
Debug level 3	###	console.log('### mostImportantDebugMessage');
Event	@	console.log('@ analyticsEndpoint:', data);
Success	\$	console.log('\$ message');

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;

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

Example in action

Other tips and gotchas

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.