Logs in frontend apps

Basit Ali Mundia — Fri, 08 Jun 2018 15:16:29 +0000

I was having a discussion with my team and wanted to have everyone thoughts on how they configured logging in their frontend apps.

I happen to just reset console.log to an empty function on production builds but leave the warn and error in place.

But, is there any use of having logs enabled on production at all?

Renderless EventBus component for Vue.js

Basit Ali Mundia — Thu, 17 May 2018 03:37:37 +0000

Assumptions:

This article assumes you know about the neat little trick to use Vue as an event bus to communicate between your components. If not, read the article Creating a Global Event Bus with Vue.js by Joshua Bemenderfer.

Why?

I started off using the EventBus in my components and the implementation looked like this,

  mounted() {
    EventBus.$on('some-event', this.handleEvent)
  },
  destroyed() {
    EventBus.$off('some-event', this.handleEvent)
  }

This got a little cluttered as the number of events increased and the worse part? you can forget turning off the events.

Solution

The two solutions the came up to my mind were,

Mixin to auto destroy events
A dummy component that handles the mounted and destroyed logic.

Personally, I don't like mixins which is why I didn't even think twice about the point 1.

The dummy component seemed more fun to write. Additionally, event listeners in html templates looked a lot better than their JS counterpart (and it conforms to the idea behind https://vuejs.org/v2/guide/events.html#Why-Listeners-in-HTML).

This is how the component for EventBus looks like,

import _ from 'lodash'
import { EventBus } from '../common/eventBus.js'

export default {
  data() {
    return {
      events: Object.keys(this.$listeners),
      methods: _.mapValues(this.$listeners, (value, key) => this.handleEvent.bind(this, key))
    }
  },
  mounted() {
    this.events.forEach(event => {
      this.methods[event].SOMETHING = event
      EventBus.$on(event, this.methods[event])
    })
  },
  destroyed() {
    this.events.forEach(event => {
      EventBus.$off(event, this.methods[event])
    })
  },
  methods: {
    handleEvent(name, ...args) {
      this.$emit(name, ...args)
    }
  }
}

The demo is up at https://codesandbox.io/s/k5v2owk8v7.

Footnotes