Clicking back button after filtering users returns raw json response

[godismyjudge95]

Bug description

Ran into this issue while creating a custom filter view for users. If you filter the users table using any method of filtering, then click on any user, and then click the browser back button you get the JSON response (that I imagine feeds the Vue table) instead of the actual page.

How to reproduce

1. Go to the users table
2. Use any filter (one that will leave at least one user visible)
3. Click on the user to view their profile info
4. Click the browser back button - you will be shown the raw JSON response from the last filter request.

Logs

No response

Environment

Environment
Application Name: Website
Laravel Version: 10.48.4
PHP Version: 8.3.6
Composer Version: 2.7.2
Environment: local
Debug Mode: ENABLED
URL: website.test
Maintenance Mode: OFF

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: redis
Cache: redis
Database: mysql
Logs: stack / single
Mail: smtp
Queue: redis
Session: redis

Statamic
Addons: 5
Antlers: runtime
Sites: 1
Stache Watcher: Disabled
Static Caching: Disabled
Version: 4.55.0 PRO

Statamic Addons
statamic-rad-pack/meilisearch: 3.2.1
statamic/eloquent-driver: 3.3.3
stillat/antlers-components: 2.1.0

Statamic Eloquent Driver
Asset Containers: eloquent
Assets: eloquent
Blueprints: file
Collection Trees: file
Collections: file
Entries: file
Forms: file
Global Sets: file
Global Variables: file
Navigation Trees: file
Navigations: file
Revisions: file
Taxonomies: file
Terms: file

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

None

Additional details

I believe this may be due to how history is being manually pushed onto the history stack. I might look into it if I have time.

[duncanmcclean]

This issue was probably caused by changes in #9408, where it manually pushes to the history stack.

[Utibu]

Our site also experiences this, and it only seems to be the users table for us, not any collection or user groups from what I can see. Before upgrading it worked. So I think Duncan is right about the cause. I will try to downgrade to 4.54 tomorrow and see if it was 4.55 that introduced the bug.

[jacksleight]

This is definitely happening since https://github.com/statamic/cms/pull/9408, you can test by setting pushQuery: false in resources/js/components/users/Listing.vue. But it's suuuuuper weird.

1. It's only happening in Chrome (for me). Safari and Firefox work fine.
2. It's not happening in entry or term listings and they're using exactly the same implementation.
3. The history API just, like, shouldn't ever do that. Yes we're pushing a new URL to the stack around the same time a background XHR request is happening, but those are completely separate things, the response of the XHR request should never appear in the browser.

Looking at the response when you hit back Chrome is loading the XHR response from it's cache, rather than the HTML page you'd expect:

[duncanmcclean]

Unlike the other listing tables, the user listing page shares the same URL as the JSON endpoint we use to actually get the user info:

https://github.com/statamic/cms/blob/4.x/src/Http/Controllers/CP/Users/UsersController.php#L35-L37

I have a feeling the browser is caching the JSON response since it comes after the initial page so that's what you end up looking at when you click "Back".

[jacksleight]

Ah yeah, that makes sense.

Still, I don't think the XHR response should be cached as a page right? That feels like a Chrome(ium) bug. Unless anyone's seeing the same behaviour in other browsers?

[godismyjudge95]

Ok, looks like it might be a chrome specific issue, but... the fix (untested atm) looks pretty simple: https://www.jonathancreamer.com/chrome-back-button-in-express-caching-issue-solved/

Obligatory SO post: https://stackoverflow.com/questions/9956255/chrome-displays-ajax-response-when-pressing-back-button