search

alephium / explorer

The explorer front-end for Alephium protocol
https://explorer.alephium.org
GNU Lesser General Public License v3.0
12 stars 7 forks source link

Implement 404 page #108

Closed nop33 closed 2 years ago

nop33 commented 2 years ago

Closes #107

Tested it locally and it works. May I deploy it on testnet?

image image
nop33 commented 2 years ago

I take the PR approval as approval to deploy it on testnet :) I'll do that, share it with the team, and if everything's good, I'll merge to master.

mvaivre commented 2 years ago

Yes sir, that's what it is!

nop33 commented 2 years ago

Deployed on testnet. The link that @polarker reported on his issue #107 now shows a 404 page: https://testnet.alephium.org/#/xxx

There are a few things to improve, however:

  1. Show a proper 404 HTTP status code instead of 200 when loading an invalid path. I believe this would be solved by changing the configuration on Amazon S3: https://tecadmin.net/solving-react-404-error/. We could try this on testnet (@killerwhile ?)
  2. Make sure that omitting the /#/ from the URL still results in a 404.

PS: The charts are not working because probably the backend is not deployed (@killerwhile ?).

polarker commented 2 years ago

I switched from BrowserRouter to HashRouter to fix an issue with Github pages: https://stackoverflow.com/a/71985764

Now we could switch back I think.

mvaivre commented 2 years ago

Now we could switch back I think.

That would be great! We just need to make sure that it would work on @killerwhile side. Also, we need to check that "hash" links in our current wallet are properly redirected.

nop33 commented 2 years ago

Also, we need to check that "hash" links in our current wallet are properly redirected.

@mvaivre with this fix we ensure that our apps will all still work even after deploying this to production. We now have the time to properly update all our links without stress. https://github.com/alephium/explorer/pull/108/commits/93cee3a42762d58bc0d4361f7dc310fe5a69b4da

mvaivre commented 2 years ago

Testing on testnet: when trying to access https://testnet.alephium.org/blocks, I'm getting a white page, but this is probably related to the AWS config (and the switch to BrowserRouter in this PR).

@killerwhile Do you think you could look into this issue? It should be rather easy to debug : once the above link shows a 404 page on testnet.alephium.org, then we'll be good to go!

nop33 commented 2 years ago

Benoit mentioned on Slack:

The change is done. Error page is now index.html as well.

However, I still get a blank page when visiting https://testnet.alephium.org/blocks.

I followed the react-router-dom v5 docs about creating a 404 page:

And based on other resources, the only change we had to make on Amazon S3 was the Error Document to be set to index.html...

Another related article suggests to add "homepage": "/" in the package.json to solve this issue, but that still didn't work.

Same problem exists when navigating from the homepage to the block page and then refreshing.

Researching this blank page on the internet I mostly get results for react-router-dom v6. Maybe it's worth spending time to upgrade?

mvaivre commented 2 years ago

That's hard to debug :/

Yes, let's upgrade to react-router-dom v6 first. If I remember correctly, the got rid of the <Switch/> mechanism entirely, so this may have an impact.

nop33 commented 2 years ago

The issue persists even after upgrading to v6. My intuition tells me that this is an Amazon S3 problem.

If you notice, when adding the#/ in front of a subpath (example: testnet.alephium.org/#/blocks) and then you load the page, it works correctly (don’t mind the removal of the # , it is done by my code, not react-router itself). This means that the index.html file and the react js code are properly loaded. This is confirmed when looking into the network tab of the devtools.

When loading testnet.alephium.org/blocks however, the react code is not loaded. So I don’t think this is a react-router issue, rather a server config one.

EDIT: Are we using CloudFront?

EDIT 2: Strangely enough, I am not getting a 404/403 error when loading testnet.alephium.org/blocks as I would have expected and as every article on the internet says. Instead, I get a 200, with a blank page.

EDIT 3: Another thing we could try is to add these "Redirection Rules", but instead of using #!/ to use just #/: https://via.studio/journal/hosting-a-reactjs-app-with-routing-on-aws-s3

It's hard to debug without access to Amazon S3 dashboard...

nop33 commented 2 years ago

@mvaivre Ready for merge!