Handle Github pages 404 issue

[jitu5]

Description

Resolves #2048

This pull request includes changes to fix a 404 error on the experiment tracking page, and to ensure the 404 page is correctly redirect to root and manage by React router internally by keeping the content of the index.html and 404.html same.

Development notes

Redirect handling:

• package.json: Modified the build script to copy index.html to 404.html to ensure the 404 page is correctly served.

QA notes

I have deployed the changes to Github pages https://jitu5.github.io to test.

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[astrojuanlu]

Watching this in slow motion was... interesting 😄

On the other hand, actual faulty URLs are handled in a strange way now:

Compare that with how it's handled locally:

I think this is smart but I fear it might have some unintended consequences...

[jitu5]

@astrojuanlu In slow motion you show that text "// in 404.html // in 404.html" was just for testing, I forgot to deploy the latest one , but now its updated. now it shows "Redirecting..."

[jitu5]

@astrojuanlu

On the other hand, actual faulty URLs are handled in a strange way now:

I fixed it now, if any sub path other than experiment-tracking is hit directly like this https://jitu5.github.io/experiment-trackingadsd, now it will be redirect to home/landing page.

[jitu5]

@astrojuanlu

Compare that with how it's handled locally:

This approach is specifically added for Github pages, on hitting faulty URLs it redirect you to our custom 404.html but locally thing works same as before.

[rashidakanchwala]

Look's great now! thanks @jitu5 .. this was a tough one to fix, and u did it in a minimal way!

[tynandebold]

Did you try using the exact same contents of the index.html file for the 404.html?

I just had to solve this issue for AlloyViz, which is also deployed to GH pages.

This is how I did it:

"build": "tsc && vite build && cp ./dist/index.html ./dist/404.html",

Might not be the same. Wanted to share my findings in case they were helpful!

[jitu5]

Did you try using the exact same contents of the index.html file for the 404.html?

I just had to solve this issue for AlloyViz, which is also deployed to GH pages.

This is how I did it:

"build": "tsc && vite build && cp ./dist/index.html ./dist/404.html",

Might not be the same. Wanted to share my findings in case they were helpful!

@tynandebold Thanks for sharing your finding.
But using same content for 404.html from index.html is redirecting to landing page or root but, how you retain the original url and its params entered by user and then redirect to the same using client-side React-router ?

This is even clear solution, I got once the control goes to client-router(React-router) it handle as normal button click or history.push(url).
I will update the PR. Thanks @tynandebold again.

[Huongg]

amazing, all looking good for me 👍 thank you @jitu5