Back to home

LoggingPractical usageOther tips and gotchas
Javascript Logging Conventions main image

Javascript Logging Conventions

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:

1 2 3 4 5 6 7 8 9 10 .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 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.

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 workingoutloud.dev, Den Dribbles and LandPad .

Related articles


1,200+ PEOPLE ALREADY JOINED ❤️️

Get fresh posts + news direct to your inbox.

No spam. We only send you relevant content.