Metamask injected web3 unreliable

Question

I am using node with express to serve HTML and JS files to port 3000. Sometimes the injected web3 get's recognised and things work fine and other times it does not. Strange things is that after page is loaded the injected web3 is available (see image)

Relevant JS code is:

$(document).ready(function() {
    if (typeof web3 !== 'undefined') {
        console.warn("Using web3 detected from external source like Metamask")
        // Use Mist/MetaMask's provider
        window.web3 = new Web3(web3.currentProvider);


    } else {
        window.alert("No web3 detected. This site is a Web3 Dapp - to proceed you will need to get Metamask https://metamask.io/");
    }

});

How can I guarantee that the web3 is available in time every time the page loads?

Answer 1

This is a known bug in chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=634381

The current recommended workaround is to do like you're doing, and wait for the document to load: https://github.com/MetaMask/faq/blob/master/DEVELOPERS.md#partly_sunny-web3---ethereum-browser-environment-check