Catch missing translations from `react-intl`

react-intl-wrapper.js

import { IntlMixin } from 'react-intl';

// prevent app to break when translation is missing
// add message a la i18n Rails
export function getIntlMessage(key) {
  try {
    return IntlMixin.getIntlMessage.call(this, key);
  } catch (error) {
    const { locale } = this.props;
    return `translation missing ${locale}: ${key}`;
  }
}

Usage in a component with babel ES7:

import React, { Component } from 'react';
import { getIntlMessage } from 'react-intl-wrapper.js';

class Foo extends Component {

  i18n = getIntlMessage

  render() {
    return <h1>{ this.i18n('foo.bar') }</h1> // returns `translation missing ({ locale }): foo.bar`
  }

}