error handling

[lstkz]

I can't find any example for correct error handling.

my code

class Comp1 extends React.Component {
  render() {
    return (
      <div>
        <strong>{this.props.foo}</strong>
        <Link to="/main">Index</Link>
      </div>
    );
  }
}


var num = 0;

const CompTransmitted = Transmit.createContainer(Comp1, {
  initialVariables: {
  },
  fragments: {
    foo: () => {
      return new Promise((resolve, reject) => {
        //return resolve("bar");
        reject(new Error("test error " + (++num)));
      });
    }
  }
});


export default class Comp2 extends React.Component {

  onFetch(promise) {
    return promise.then(result => {
      console.log("ON FETCH RESULT", result);
    }, e => {
      console.log("ON FETCH ERROR", e);
    })
  }
  render() {
    return (
      <CompTransmitted onFetch={this.onFetch} />
    )
  }
}

Console log

ON FETCH ERROR Error: test error 1(…)
ON FETCH ERROR Error: test error 2(…)
Test.js?eb08:26 Uncaught (in promise) Error: test error 1(…)
Test.js?eb08:26 Uncaught (in promise) Error: test error 2(…)

1. Is there any way to catch an error and display an error message inside the Comp1 component?
2. Why foo is resolved twice?