Communications

This should cover things like logging, tracing etc.

This article is a great reference.

Table of contents

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
copy

Guidelines:

Practical usage

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

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.