Thousands of debug messages: «Ignoring non-forwarder message…»

[mwaeckerlin]

I get thousands of debug messages in the type of:

Ignoring non-forwarder message from 'http://localhost:3000' with data "setImmediate$0.9781935721517623$424"

This is caused by index.js:94, where I see:

  _createClass(Onboarding, [{
    key: "_onMessage",
    value: function () {
      var _onMessage2 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee(event) {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                if (!(event.origin !== this.forwarderOrigin)) {
                  _context.next = 2;
                  break;
                }

HERE-->                return _context.abrupt("return", console.debug("Ignoring non-forwarder message from '".concat(event.origin, "' with data ").concat(JSON.stringify(event.data))));

              case 2:
                if (!(event.data.type === 'metamask:reload')) {
                  _context.next = 6;
                  break;
                }

                return _context.abrupt("return", this._onMessageFromForwarder(event));

              case 6:
                console.debug("Unknown message from '".concat(event.origin, "' with data ").concat(JSON.stringify(event.data)));

              case 7:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function _onMessage(_x) {
        return _onMessage2.apply(this, arguments);
      }

      return _onMessage;
    }()
  }, {
    …

metamask-onboarding is running in a Drizzle / React based dapp, the relevant lines are (code shortened):

import MetamaskOnboarding from "@metamask/onboarding";

class LoadingContainer extends Component {
  componentDidMount() {
      window.ethereum.autoRefreshOnNetworkChange = false;
      window.ethereum
        .enable()
        .then(accounts => this.setState({ accounts, error: null }))
        .catch(error => this.setState({ error }));
      // reload on network change
      window.ethereum.on("networkChanged", chain => {
        this.setState({ chain, error: null });
        console.log("CHAIN", chain);
        window.location.reload();
      });
      // reload on account change
      window.ethereum.on("accountsChanged", accounts => {
        this.setState({ accounts, error: null });
        console.log("ACCOUNTS", accounts);
        window.location.reload();
      });
    }
  }
  render() {
    if (
      this.state.error ||
      this.state.accounts.length === 0 ||
      this.props.web3.status === "failed" ||
      this.props.web3.status === ""
    ) {
      const onboarding = new MetamaskOnboarding();
      if (!MetamaskOnboarding.isMetaMaskInstalled()) {
        return (
          <Error source={t("base.loading.noethereum")}>
            <ActionBar>
              <Button onClick={onboarding.startOnboarding}>
                Install Metamask
              </Button>
            </ActionBar>
          </Error>
        );
      } else if (
        this.props.web3.status === "initialized" &&
        this.state.accounts.length === 0
      ) {
        return <Error source={t("base.loading.noetheraccount")} />;
      } else {
        onboarding.stopOnboarding();
        if (this.props.errorComp) {
          return this.props.errorComp;
        }
        return (
          <Error source={t("base.loading.noethereum")}>
            <img src={downloadMetamask} />
            <img src={loginMetamask} />
            <img src={connectMetamask} />
          </Error>
        );
      }
    }
    …
  }
}

Any idea?

[mwaeckerlin]

Onboarding is nice for the end user, but extremely inefficient and slows down my Dapp, I'll have to remove it! What's the problem?

[mwaeckerlin]

After looking at the code, I added window.location.origin:

      const onboarding = new MetamaskOnboarding(window.location.origin);

That is undocumented, but seems to be mandatory. BTW: Why not make window.location.origin the default?

But then I still get hundreds to thousands of Ignoring non-forwarder message from 'http://localhost:3000' with data […].

Is this normal or am I doing something wrong? IMHO, the onboarding should run once at the start, then no more.

And if it is normal, please remove the debug log!

[mwaeckerlin]

I have now a solution, that seems to work quite well:

1. the onboarding instance is static, though only created once
2. since MetamaskOnboarding.isMetaMaskInstalled is static, onboarding is moved after this check end created only if not installed
3. if metamask is installed and onboarding exists, it is stopped and deleted

So my code now looks like this (code is shortened):

class LoadingContainer extends Component {
  static onboarding = null;
  state = {
    chain: null,
    accounts: [],
    error: null
  };
  componentDidMount() {
    if (typeof window.ethereum === "undefined") {
      this.setState({ error: "No Ethereum" });
    } else {
      this.setState({ chain: window.ethereum.networkVersion });
      //window.ethereum.autoRefreshOnNetworkChange = false;
      window.ethereum.enable()
        .then(accounts => this.setState({ accounts, error: null }))
        .catch(error => this.setState({ error }));
      window.ethereum.on("networkChanged", chain => {
        if (chain === "loading") return;
        if (chain === this.state.chain) return;
        this.setState({ chain, error: null });
        //window.location.reload(false);
      });
      window.ethereum.on("accountsChanged", accounts => {
        if (
          accounts.length !== this.state.accounts.length ||
          (accounts.length >= 1 && accounts[0] !== this.state.accounts[0])
        ) {
          this.setState({ accounts, error: null });
          window.location.reload(false);
        }
      });
    }
  }

  render() {
    if (
      this.state.error ||
      this.state.accounts.length === 0 ||
      this.props.web3.status === "failed" ||
      this.props.web3.status === ""
    ) {
      if (!MetamaskOnboarding.isMetaMaskInstalled()) {
        if (!this.onboarding)
          this.onboarding = new MetamaskOnboarding(window.location.origin);
        return (
          <Error>
              <Button onClick={this.onboarding.startOnboarding} />
          </Error>
        );
      } else if (
        this.props.web3.status === "initialized" &&
        this.state.accounts.length === 0
      ) {
        // ask user to provide account
      } else {
        // tell user to login to metamask and to connect
      }
    }
    // successful:
    if (this.onboarding) {
      this.onboarding.stopOnboarding();
      delete this.onboarding;
      this.onboarding = null;
    }
    // … build page here …
  }
}

[Gudahtt]

Those console messages were removed in #10. I think the main concern raised here has been addressed, so I'll close this issue.

That is undocumented, but seems to be mandatory. BTW: Why not make window.location.origin the default?

The constructor has changed somewhat since you made this comment (it takes an object now, not a string), but I believe that parameter is for the forwarder URL. That is not mandatory - it's to be provided only when you wish to use a non-standard forwarder. We only pass that parameter in during testing, to test with a local forwarder. I'd recommend never passing it in. We should certainly document this though, that's fair.

[Gudahtt]

I have updated #15 to add documentation as a prerequisite for v1