No rendering of svg images when backend is deployed

[ritikbhatia]

Hi development team!
Thanks for this open source platform! We are planning to use this platform for an upcoming hackathon but are facing a few issues in the deployed software.
When the playground is deployed on AWS ElasticBeanstalk and we use the deployed version as the websocketURL for the frontend running on localhost, the frontend does not display the SVG images for all the locations except Personal Room (that is, the town plaza etc. are not rendered) although the character and its movements work fine
However, all the SVGs seem to be rendered fine when the backend is run on localhost.

We wanted to ask whether you had faced a similar issue on the deployed software? If yes, could you please suggest a workaround for the same? Thank You!

cc @jackcook

[jackcook]

Hi, we're glad to hear you're using Playground! Are you pulling the svg images from our S3 bucket or from somewhere else? And are there any errors in your browser console?

[ritikbhatia]

Hi @jackcook. Thanks for the reply!
For now, we are using the images from the hackmit s3 bucket (we have already created our own s3 as well but plan to use it for production)
Further, there are no errors reported on browser console when the playground is loaded.

If it helps in troubleshooting, I had a console.log in the element.js file to display the s3 url accessed for each page load. It seems that it logs an output when the personal room is opened (which is rendered correctly as well), but there is no console statement when other parts of the map are loaded.
Another point, if it helps, is that if I go to personal room, then let's say to town plaza, the background image of the personal room stays (although other assets like wardrobe are removed), and the background of town plaza is not loaded

Could it be an issue related the redis image of docker, that is running locally on the ec2 instance hosting the backend?

Hope this info can help in the troubleshooting!

[jackcook]

Did you happen to modify this line?

https://github.com/HackMIT/playground-frontend/blob/4e08c388d82bb17a201bfb5e0ea90e91069a2f9e/src/js/element.js#L40

The ?Math.random() may look ridiculous, but it's necessary -- there's some browser caching issue that Three.js runs into when loading svg images from S3. I don't remember all of the details around this issue, but you can definitely find more people online who have run into this same issue.

[ritikbhatia]

Hey @jackcook
No I haven't modified this line as I was aware of this issue with three.js
As mentioned before, it seems weird that the personal room SVGs do render correctly while the rest of the locations do not.
Is there anyone you could point out to, maybe in the dev team, to help resolve this issue? That would be of great help, in case they must have run into the same issue previously!

[jackcook]

Can you add a console.log(data) message below this line: https://github.com/HackMIT/playground-frontend/blob/master/src/js/socket.js#L21 and see what packets you're getting from the backend? And then confirm that any room id you see in join packets is present in your Redis database -- you can check this with hgetall room:<id> in a Redis cli. If the plaza isn't loading, the room might not be correctly stored in your database. Let me know if you have questions about doing any of this.

[ritikbhatia]

@jackcook
When I connect to the redis-cli and enter hgetall room:plaza, it shows empty array as response.
But when I execute hgetall for the personal room, it does output certain results....
Just to add, the packet that is displayed has a room field which "" when I change between multiple locations.

I guess, as you suspected, it must be an issue of storing in the Redis database running on docker. I am running the docker container containing the redis image locally on the ec2 instance that is hosting my backend. I wanted to confirm whether this is the correct way to do so? If yes, based on the info above, could you suggest a workaround for this issue?
Thanks for all the help so far!

[jackcook]

The room id being empty would definitely cause this problem. Did you change any of the room templates? How are you getting from the personal room to the plaza? With the map?

[ritikbhatia]

@jackcook
I have not changed any of the room templates.
Yes, I change location from personal room using the map. Further I wanted to clarify the following:

• If a new person joins the playground (who was not in the database earlier), even in that case the SVGs are not rendered, although the join packet has room as home
• When I change location to personal room, the room in the join packet there is an empty string as well. Just that the character field in the join packet is populated with a string (this is the case in other locations too)

I have attached the screenshots for reference

[ritikbhatia]

Hi @jackcook
We were able to solve the error by deploying the docker running the redis image separately, using AWS ECS (Elastic Container Service).
However, can we ask how you worked with the docker running the Redis database (did you have the database on localhost on the EC2 running the playground, or separately in another instance)? The current solution seems to display the SVGs, but there is a latency issue, as the socket takes time to interact with the Redis that is running on another EC2 instance.

[jackcook]

Hi @ritikbhatia -- super sorry about the late response. Glad you were able to fix that issue!

We used an ElastiCache instance for Redis, we didn't have it running on the same box. We got one of the ones with high network availability to reduce socket latency. You'll need to do this if you're using ECS because you need one central Redis instance, you can't have a different one on each box.

[ritikbhatia]

Hi @jackcook
May we know what was the frontend deployed on?
We switched to ElastiCache and now we are encountering the same issue of svgs not rendering (don't know why it works properly with ECS)

[AishikNagar]

Hey @jackcook, adding on to this thread, there is an issue where the current position of the avatar becomes undefined on entering a new room. After this, if we try to press the home button or use the map to go to a new room, the svgs keep stacking on top of each other until we refresh the whole page.

May I ask if a similar issue was faced by you guys while deploying and if there is a solution to this? Is this due to a latency issue as mentioned before or another problem altogether? Any help or suggestions on the same would be very helpful!

Here are some screenshots of the error and the svg stacking for reference

[AishikNagar]

There is also another error which keeps popping up in such cases which is as follows:

Uncaught TypeError: Cannot read property 'safeDelete' of undefined
at t.value (game.5454ee2a0044f27adcc8.bundle.js:2)
at game.5454ee2a0044f27adcc8.bundle.js:2
at game.5454ee2a0044f27adcc8.bundle.js:2
at Array.forEach ()
at game.5454ee2a0044f27adcc8.bundle.js:2
at Map.forEach ()
at game.5454ee2a0044f27adcc8.bundle.js:2
at Array.forEach ()
at WebSocket.conn.onmessage (game.5454ee2a0044f27adcc8.bundle.js:2)

Thanks again for all the help and hoping to hear from you!