1

Either a WordPress plugin or a code written by the previous programmer is conflicting with WordPress admin bar causing it to always be visible. If you are an admin, no error is raised, however if you are a visitor you'd see a console error.

What I want to do, is that whenever you see this error in the console, hide the admin bar. Because normally visitors should not see the admin bar, I'm trying a quick hack.

The error is the following

Uncaught TypeError: Cannot read property 'addEventListener' of null

This is what I tried, I learned this hack from here after some research:

jQuery(document).ready(function($) {
  var original = window.console
  window.console = {
    error: function() {
      //Gets text from error message.
      errorText = arguments['0'];

      if (errorText.includes('TypeError')) {
        jQuery("#wpadminbar").css("display", "none");

      }

      original.error.apply(original, arguments)
    }
  }

});

I know I'm mixing JavaScript and jQuery -- I'll fix that later, but I just wanted to check if this hack would work. It's not working, not even executing the function, is there any other way to check for console errors?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Lynob
  • 5,059
  • 15
  • 64
  • 114
  • 3
    Sounds like you really should find the source of the problem in the first place and not try to build a hack on top of the problem. It's not worth it. Have you tried disabling extensions to see if any of them are causing this? – Esko Feb 04 '19 at 14:43
  • Not simpler to check if the property that is null doesn't exist then you hide the bar? – Alexandre Elshobokshy Feb 04 '19 at 14:43
  • 1
    It would be a much better idea to fix the cause of the error. You probably just need to check the element exists before trying to attach the event handler to it – Rory McCrossan Feb 04 '19 at 14:43
  • @Esko the wordpress admin bar.js is raising the error and I know for a fact that it's not the cause of the problem, the site is in production with so many plugins and so much custom code it would take months for me to read every code he's written. It's +4GB – Lynob Feb 04 '19 at 14:46
  • @Lynob a +4GB site is not worth taking. Honestly, it'll be cheaper in time and money to start from scratch – treyBake Feb 04 '19 at 14:48
  • I agree that fixing the actual problem would be preferable, but I sympathize, sometimes a quick hack is all you can do. Instead of monkeypatching `console` I'd add an error handler: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror – Daniel Beck Feb 04 '19 at 14:50
  • 1
    @treyBake The site is for some international organization, they had problems with the previous developers and want me to fix existing bugs, I can't ask them to let me start from scratch – Lynob Feb 04 '19 at 14:50
  • @Lynob then get to the root of the bug - not add a hack. It just causes more trouble down the line. Way better to debug until you hit bedrock – treyBake Feb 04 '19 at 14:51
  • @DanielBeck Is this supported by chrome as well or do I need to write a custom code for chrome? – Lynob Feb 04 '19 at 14:55
  • @Lynob There's a "compatibility" section at the bottom of the MDN page; chrome does support it. (MDN is run by mozilla, but the info in it is not firefox-specific.) – Daniel Beck Feb 04 '19 at 15:00
  • Doesn't solve the issue but a suggestion, patch the error property of console instead of resetting whole console, you are gonna lose other console methods like log and info if you do that – AvcS Feb 04 '19 at 15:02
  • @AvcS They pay me to work 4 days a month, first month, after that I work 8h a month and there's no way I could fix the error in less than a month because the site is huge and full of custom code, like literally written with ACF, I'm not sure if they're going to pay me a month just to fix that problem you see. I'm not sure what to say in my invoice. – Lynob Feb 04 '19 at 15:07
  • 1
    I'm reconsidering whether error handlers was a good suggestion; lots of unrelated things could throw a TypeError, so (whether you check that via a monkeypatched console or an error handler) you risk hiding the admin bar from admin users if they happen to trigger an unrelated error. The error object contains a line number and filename, which should help you track down the original bug, or failing that perhaps there's a way you can force the admin bar to hidden by default, then detect the user's admin status (however this works in your app) and show it again when appropriate? – Daniel Beck Feb 04 '19 at 17:15
  • I understand it would be a lot of work to go through the code. :/ An idea would be to open any JS files from the project and do a word search or "find" for "addEventListener". This will exist wherever the error is being generated. Log the element that it is being added to at that point. For instance if you found (in the code) something like box.addEventListener('click', someFunction); then I would write console.log("box " + box); before that line to see whether box is defined or not in the console...Do this wherever you see addEventListener in the code and then you'll see where the problem is. – Sarah Feb 04 '19 at 18:04
  • 1
    @Sarah I fixed it as you all suggested :) required some digging but fixed :) – Lynob Feb 04 '19 at 19:30
  • @DanielBeck Thank you for insisting that I should fix it the right way, I found the real problem, posted as an answer just for the sake of closing the issue. – Lynob Feb 04 '19 at 19:31
  • Bravo! Glad you found it at last. – Daniel Beck Feb 04 '19 at 19:44
  • @Lynob That's great! Well done :) – Sarah Feb 04 '19 at 20:13

2 Answers2

2

Issue fixed, since all of you were rightfully insisting that I shouldn't use JS, I started digging into his code and I found that he left in functions.php

show_admin_bar(true);

I removed it and the issue was fixed :)

Lynob
  • 5,059
  • 15
  • 64
  • 114
0

This works and onerror mentioned by daniel works too, the reason I picked jQuery is because in theory, it offers wider browsers compatibility, correct me if I'm wrong. This solution doesn't have anything to do with the console, which is great.

jQuery(document).ready(function( $ ){
  window.addEventListener('error', function(e) {
        if (e.error.name == 'TypeError'){
          jQuery("#wpadminbar").css("display", "none");
        }
    });

});

But I don't like that. There are few authors and too many visitors, therefore I'd like to hide it by default and show it otherwise, as it stands the visitor will see the bar for a second, then the error will happen and the bar will be gone.

I would like the error not to be displayed by default, and then if there's no error, meaning if the event handler doesn't fire, then I'd like to show the bar. But I don't know how to do that, I don't know how to do something if the even't listener isn't used.

Lynob
  • 5,059
  • 15
  • 64
  • 114