1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Debugging a page reload problem

Discussion in 'JavaScript' started by sarahk, May 31, 2021.

  1. #1
    I've got a page that does some fun stuff with data collection and outputs to a pdf. The data is stored in our database and is retrieved as json.

    This works as expected for 99% of the forms we've created but one user has a problem where the page just reloads continuously.

    If I step through the code I can see everything working just fine even for my two problem forms. I have a ton of console.log() turned on and all output as expected. Except that the page reloads.

    I've got a pause on event listener for "DOMWindow.beforeunload" set and it stops there, sometimes, but the callstack just shows a jquery handler that also kicks in.

    Because it doesn't happen for every dataset I load I'd expect the problem to be in the data but then I'd also expect the unload to be triggered by something it doesn't like in the code and for that to show in the callstack.

    Any hints on how to debug this?
    SEMrush
     
    sarahk, May 31, 2021 IP
    SEMrush
  2. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    125
    Likes Received:
    40
    Best Answers:
    4
    Trophy Points:
    85
    #2
    Since you said this:
    What is the normal expected action for forms that works properly?
    Also, can you give more details about this page?
     
    Efetobor Agbontaen, Jun 1, 2021 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    27,016
    Likes Received:
    4,127
    Best Answers:
    117
    Trophy Points:
    665
    #3
    It's got jquery, bootstrap3, google analytics.

    Normal action is that the form is populated with the saved json so that the user can update the form, save changes, or request the pdf.

    By instantly reloading the page is unusable.
     
    sarahk, Jun 1, 2021 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,792
    Likes Received:
    1,487
    Best Answers:
    26
    Trophy Points:
    425
    #4
    qwikad.com, Jun 1, 2021 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    27,016
    Likes Received:
    4,127
    Best Answers:
    117
    Trophy Points:
    665
    #5
    Thanks @qwikad.com, that would have been nice!

    When I have "Pause on caught exceptions" ticked I can see a stack of internal jQuery errors related to querySelectorAll and way, way up the callstack are .parseHTML or ux masks, calendars etc but I also get errors from google analytics!

    By the time the exceptions are happening all trigger() events have been called at least once which makes me think it's not a submit happening, if I'm stepping through then all have time to complete. In most cases they're not buttons anyway...

    I've commented out the masks and can see that not all ajax requests have completed before the unload - including one of the 2 google analytics calls.

    I've changed $.parseHTML to use this with no improvement:
    var parseHTML = function(str) {
      var tmp = document.implementation.createHTMLDocument();
      tmp.body.innerHTML = str;
      return tmp.body.children;
    };
    Code (JavaScript):
    It's 2am, time for bed.
     
    sarahk, Jun 1, 2021 IP
  6. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    125
    Likes Received:
    40
    Best Answers:
    4
    Trophy Points:
    85
    #6
    Unfortunately, I can't suggest anything better without personally debugging the code. But have you tried preventing a page refresh by simply adding a return statement to your window.onbeforeunload function
     
    Efetobor Agbontaen, Jun 1, 2021 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    27,016
    Likes Received:
    4,127
    Best Answers:
    117
    Trophy Points:
    665
    #7
    I can't let you guys near the code, the data is live and confidential and if I gave you access to the form you'd probably be like the 99% who have no problems.
     
    sarahk, Jun 1, 2021 IP
    ActiveFrost likes this.
  8. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    125
    Likes Received:
    40
    Best Answers:
    4
    Trophy Points:
    85
    #8
    If the problem occurs only for certain users and not for certain datasets like u said earlier, then maybe the problem might be related to those user's profile.

    I've had a lot of issues where a bug only happens for a particular user. And all other users works fine. Logging in as that user will eventually reveal the bug. I remember the very first project with this issue. The user had an invalid character in their User Name. Making the App behave abnormally only when they're are logged in.
     
    Efetobor Agbontaen, Jun 1, 2021 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    27,016
    Likes Received:
    4,127
    Best Answers:
    117
    Trophy Points:
    665
    #9
    OMG I just found it, what a debugging nightmare.

    @qwikad.com was spot on but I was too deep in the code to see it.

    A form can have a button to add additional records and it's a button but not a submit button and there's a listener catching clicks that does everything right.

    BUT

    When that form gets added by javascript the handler wasn't binding so the button, which isn't a submit button, was deciding to be a submit button. Add the listener and hey presto, it works!
     
    sarahk, Jun 9, 2021 IP