Back to home

Javascript Logging Conventions

Published: Jan 3, 2019

Last updated: Jan 3, 2019

    This should cover things like logging, tracing etc.

    This article is a great reference.

    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:

    1. When going through a process across files and functions, attempt to use group to log the process.
    2. Assertions may also become handy when if/else logic is involved for logging purposes.
    3. 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

    TypeKeyExample
    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

    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.

    Personal image

    Dennis O'Keeffe

    @dennisokeeffe92
    • Melbourne, Australia

    Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
    I am currently working on Visibuild.

    1,200+ PEOPLE ALREADY JOINED ❤️️

    Get fresh posts + news direct to your inbox.

    No spam. We only send you relevant content.

    Javascript Logging Conventions

    Introduction

    Share this post