Collaboration addon thumbnails appear broken when mixing local and production users

[JayGeorge]

Bug description

The Issue

If you run the Collaboration addon on both local environment production environments, a local user's avatar will appear as a broken thumbnail to the production user.

Here are a couple of screenshots from different Statamic installations

More information

This happens on both v3 and v4

I suppose you could just say "Don't run the addon locally" but since I work locally 90% of the time, including making edits, using Collaboration is really handy to see if a user is editing the same page I'm on, so I know to avoid conflicts. It works great between local/production apart from this thumbnail issue.

How to reproduce

1. Set up Collaboration locally
2. Set up Collaboration on a production environment
3. Log in as user1 on a particular entry on the local environment
4. Log in as user2 on the same entry on the production environment
5. On the production environment, observe user1's avatar appears as a broken thumbnail

Logs

No response

Environment

Environment
Application Name: Statamic
Laravel Version: 9.52.5
PHP Version: 8.1.5
Composer Version: 2.3.3
Environment: local
Debug Mode: ENABLED
URL: thelens.wip
Maintenance Mode: OFF

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

Drivers
Broadcasting: pusher
Cache: statamic
Database: mysql
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Statamic
Addons: 3
Antlers: runtime
Stache Watcher: Enabled
Static Caching: Disabled
Version: 3.4.9 PRO

Statamic Addons
jaygeorge/admin-styler: dev-main
statamic/collaboration: 0.6.0
statamic/seo-pro: 4.0.1

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

runtime (new)

[jasonvarga]

What are the URLs? Please show both URLs, on both environments.

[paradise-london]

Ah, yes, I see the problem now. The production thumbnail URL is trying to reference the local URL

Where it's working (locally)

Thumbnail URL: https://thelens.paradise.wip/cp/thumbnails/YXNzZXRzOjpzaXRlL2F2YXRhcnMvamF5LWdlb3JnZS5qcGc=/small/square CP URL: https://thelens.paradise.wip/cp/collections/insights/entries/55b72495-0dbb-4daa-86e2-a1f4d269bf4f

Where it's NOT working (on production)

Thumbnail URL: https://thelens.paradise.wip/cp/thumbnails/YXNzZXRzOjpzaXRlL2F2YXRhcnMvamF5LWdlb3JnZS5qcGc=/small/square CP URL: https://thelens.paradise.london/cp/collections/insights/entries/55b72495-0dbb-4daa-86e2-a1f4d269bf4f

[jasonvarga]

Ah yes, we render avatars using the absolute URL. The avatar comes along with the user's payload which is generated on the server wherever the user is working.

Not really sure what we could do about it that isn't hacky. First thing that comes to mind is that when a user joins we could string replace in user.avatar.permalink thelens.paradise.wip to thelense.laradise.london, somehow.

[paradise-london]

My way around it for the moment is to remove my avatar image so it just shows my initials. At least a broken thumbnail isn't shown to users this way.

I wouldn't be opposed to just showing initials as a fallback if the thumbnail fails to load – in case this is a more straightforward solution for you to implement.

[jasonvarga]

Good idea! I've implemented this in the core. statamic/cms#8139