app shows 500 error page when switching page using shortcuts or browser buttons

[rahultrivedi180]

sr-2022-08-23_14.42.50.webm

Steps to reproduce:

1. Open any post from the feed
2. Go back to the feed by alt+left key (or shortcut key that you have set or browser back button)
3. Again go back to the same post by alt+right key.

[ashutosh1206]

Happens on user profiles too:
https://user-images.githubusercontent.com/20791518/187151945-1009b0c1-4f8d-4456-b52b-9da8783de453.mov

@rahultrivedi180 on discord:

there are two points I found out.

1. When we replace the url before page exit, it does not work as expected. So it will still go to the friendlyUrl page instead of realUrl page from home page .
2. We don't have friendlyUrl page so it crashes the app.

refresh the browser history after switching pages (Home -> Post -> Home) to see what is happening. history behavior seems to be OK as per the history.replaceState documentation

[jackdishman]

Brainstorming solutions that I see that could solve this issue:

1. Create a /p/ route that fetches the post, forking layout from /post/cid but fetching the post from the friendly URL.
2. Replace history state before route leave to /post/ URL
3. Add a watcher to route and if it's a /p/ route, reload page and stop vue-router

[rahultrivedi180]

Create a /p/ route that fetches the post, forking layout from /post/cid but fetching the post from the friendly URL.

So the user will first come to the /p/ route (with friendly URL as a parameter) whenever they visit the post. Am I right?

[jackdishman]

Yes, create a /p/ route and then either refresh the page or fetch the post from the friendly URL

[rahultrivedi180]

Not sure if it is good to fetch the post from a friendly URL. Because this way, we will have to rely on the capsule server to send us IPFS CID whenever the user tries to open the post directly from the shared link instead of the feed. If somehow server does not respond back, user may face an error page.

[jackdishman]

I agree, that leaves us with options 2 and 3:

Replace history state before route leave to /post/ URL
or
Add a watcher to route and if it's a /p/ route, reload page and stop vue-router

[chrispanag]

If it's a /p/ route, we can fetch the IPFS cid, from capsule-server (this would require an extra GET route on the shareable link, that gives the cid of a given post id). With this CID, capsule-vue can then fetch the correct post.

[rahultrivedi180]

If it's a /p/ route, we can fetch the IPFS cid, from capsule-server (this would require an extra GET route on the shareable link, that gives the cid of a given post id). With this CID, capsule-vue can then fetch the correct post.

do you mean we should have two different post reader pages? /p/ and /post?