Odd Issue in 2 Tabs

This is so odd I am not even sure where to begin understanding this issue. The site is in development but 99% production ready in terms the whole site thru testing produces zero errors. For the sake of this situation say everything is fine. Console and logging has resulted in zero issues

Problem / scenario is: I / user is on the site at any page doing my business as normal. I decide to reset my password (or anything that ends an email with a link to click) which sends a confirmation to my email, and carry on doing whatever on the site.
User can be on any page and my computer email program alerts me, new mail => mail has a link to reset my password. Click that link opens the site in a new tab “congrats your email is confirmed” and you can carry on your business on the site you would think…

This is where the site breaks.
If the site is open in 2 tabs at the same time only 1 tab / site will load data from the API. Both tabs make the same call, get the same response but only 1 will fully load the data into the page.

I can navigate to the same pages on both sites and check and anything loading via API will not load / display on 1 of the tabs, the other works perfect.

If I am on the tab that fails to load content and simple click close on the working tab, the tab that was not working suddenly loads the page content with out any interaction whatsoever…

Happens in Chrome / FF / Opera / Edge / Safari

Example: Tab 1 Works

Example: Tab 2 has no data

And this happens on every page so I can navigate thru Tab A and Tab B to to check each and same result. Only 1 of the tabs will operate the site functionality, the other is just empty.

Site is not live / production so unfortunately do not have a URL to share but any thoughts / insights?

Note: None of the data is using Vuex so its all direct from the API, both tabs make the request and response shows correct data as expected, just will not populate the page in Tab B

Thanks,

Dave

It sounds like a token related “issue”.

… until I read this. Are you saying that both tabs are able to successfully call the API and both receive responses, but only 1 tab hydrates the page?

Correct.

I guess 99.9% of users will only be using any site in 1 tab :slight_smile:
But the issue happens when a user opens an email with a link to verify or whatever and gets directed to the site it always opens a new tab, hence now having 2 instances of the site running in the browser.

Scenario:
So originally user has 1 instance call it Tab A…that will always function 100%, but the newly opened Tab B will not hydrate anything.
They can use the navigation as normal, go thru every page / link / URL and zero errors ( nothing in terms of console or API reporting anything).
Axios makes the call to the API as expected on every page, response comes back 100% fine, no errors no issues. It just results in Tab B not executing the displaying of anything other than the hard coded page title.

It only happens if 2 tabs are open in the same browser window. I can have Opera / Safari / Chrome / Edge / Firefox all open at the same time and no issues.
Even 2 of the same browsers (open all Browsers on each of my 3 screens) at the same time no issue.
But 2 tabs at the same time results in the newly most recent tab becoming a dead site. Switching back to Tab A it will always work as expected. If I close Tab A, then Tab B now works fine. But A and B will never both work.

Note: This is a JWT based Authentication Token setup. There is currently no check in place to void multiple logins from a user, so a user currently can be logged in from any device for multiple instances.

It’s a hard one to debug without something to work against. My inclination is it’s something to do with how your client or server handles the JWT. The fact that Tab B works as soon as Tab A closes indicates some sort of a session ending which may have been blocking Tab B… but then you’re saying that Tab B is able to successfully make requests, it just doesn’t hydrate - which is very confusing.

If you’re just working off your localhost, I’d try pushing to a production env to see if the issue persists. At least then you can eliminate (or confirm) it solely as a development env problem.

I agree its impossible to debug with no code reference, and the site is a monster so it’s not like sharing a snip of code to look for an isolated issue.

Plan is for a launch soon and the dev server is in the build process now, so perhaps once in a more production build environment I can share a link with you to check and see.

The JWT is using Laravel’s pretty standard Tymon JWT package with noting extra.

Hard to show also because the site is not live I do not have to ability (not allowed to do so) to even screen-share a video or anything so also put me in an odd predicament when i cant really even show the issue or share the API results from each Tab.

Appreciate the time as always and once on a server I will provide you credential to take a look and examine if you have time.

Thanks again!

Note: Odd fact is the non-responsive tab (Tab B on the right) never finishes loading, the circular spinning circle continues to spin.
The API request is long done, response is back to the front end. Yet the browser is “thinking” nonstop.

Screen Shot 2021-07-19 at 4.16.17 AM Screen Shot 2021-07-19 at 4.18.16 AM

Hard to see but the Tab B is always “thinking” spinning

Using the Support page as example

Response from navigating to support page on either tab are identical results.

Tab A Response


Tab B Response