Redux has some great ideas and it's still pretty simple to grasp (maybe one of the reasons why it's so widely accepted), nevertheless, I sometimes forget how to do simple stuff.

Last month a colleague needed to add error reporting for the tool we were building, so I did what every sane developer does, googled it. I must say there are a lot of options and some of them don't take too long to implement but we still felt like there should be an easier way, and of course there was.

If what you need is a minimal solution that sends the state (not the actions) to the server here is the thing we come up with:

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import { logError } from "./actions"
import App from './components/App'

let store = createStore(todoApp)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)
if(window) {
  window.onerror = function(msg, url, lineNo, columnNo, error) {
    store.dispatch(logError({ msg, url, lineNo, columnNo, error, state: store.getState() }))
  }
}

Never mind the boilerplate and focus on the few lines that make sense, we can dispatch any action using the store instance and we can also query the state from it. Luckily that's the only thing we need :).

I'm not saying you should roll out your own error logging solution but sometimes it's easier than we think. Sometimes you don't even need to do npm install to get stuff done and that for me is liberating.

A note on shipping fast

During the last six months, I've been part of a group that chooses to deliver fast to the client, fast as in a weekly basis, in my experience it's has been incredibly beneficial for both users and product team.

This solution is the result of this way of thinking, build something we could ship this week; even if we know we will miss some errors, it's better than missing all errors.