auraErrorMessage: Enhance styling and placement, Hide in Prod

[ndrewr]

FunnelSource already does this (see pages/FunnelAction2.page)

On app startup after component mount, we can check the org type and conditionally apply a class to either a) hide the element entirely in Prod orgs or b) prominently display the error message at top instead of hidden at bottom in dev orgs.

Could this be injected for any starting sfdx project?

Basic logic (note this is for a Visualforce page and utilizes a controller method to check org type):

STYLES
        .floatingError {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9998;
            height: 10vw;
            width: 35vw;
            margin: 0 auto;
            padding: 1rem;
            background: red;
            color: white;
        }
        .floatingError:after {
            content: "(Double click to dismiss)";
            position: absolute;
            bottom: .25rem;
            right: .25rem;
            z-index: -1;
        }
        div#auraErrorMessage:empty {
            display: none;
        }

SCRIPT
                    // Hide the error element if Prod or if there was a network issue
                    // Restyle vanilla error message element; https://salesforce.stackexchange.com/q/199930/68974
                    Visualforce.remoting.Manager.invokeAction(
                        '{!$RemoteAction.FunnelForecastCon.isProductionOrg}',
                        function(result, event) {
                            var auraErrorMessageElement = document.getElementById('auraErrorMessage');
                            auraErrorMessageElement.ondblclick = function() {
                                this.innerHTML = '';
                            };
                            auraErrorMessageElement.className = (result || !event.status)
                                ? 'slds-hide'
                                : 'floatingError';
                        }
                    );