Error handling in subscriptions with React


Hi all,

I’m using Meteor 1.2.1 with React and I’m struggling to figure out how to handle errors from subscriptions gracefully. I have a very simple example here where I want to render the Error component if the subscription fails. The behavior I’m observing is that if an error occurs in the subscription render() is never called. I am also unable to call setState() from getMeteorData() so I am lost as to how I could display a useful message to the user. Any feedback is welcome!!

  getMeteorData: function() {
    let error = null;
    let itemHandle = Meteor.subscribe('ItemsPub', self.props.itemId, {
      onStop: function(args) {
        if (args.error) {
          error = args.error;
    } );
    let item = Items.findOne({"itemId":self.props.itemId});

    return {
      error: error,
      loading: !itemHandle.ready(),
      item: item
  render() {
    if ( return ( <Error message={}/> );
    if ( return (<LoadingSpinner/>);
    return (
      <div>Item: {}</div>


It seems that this was posted a long time ago, but I just had to tackle a similar scenario.
This is what I did:

let itemError
const ItemContainer = createContainer(props => {
  const handle = Meteor.subscribe('Items', {
    onStop: (error) => {
      itemError = error
  return {
    loadingItem: !itemHandle.ready(),
    items: Items.find({}).fetch()
}, Item)

For the rendering part:

render () {
    const { items, itemError, loadingItem } = this.props
    if (itemError) return <h1>{itemError.error.message}</h1>
    if (loadingItem) return <h1>Loading...</h1>

    return (

I’m using the low-level publication API to pull data from a 3rd party REST API, so this is what I found to work so the error would be picked up on the client:
(Inside the “publish” callback):

if (!this.userId) {
    this.error(new Meteor.Error({message: 'Authentication required'}))

If the “ready” trigger isn’t used before “error”, the UI doesn’t get updated.