Lighthouse no longer working with website - Error 404

Question

I have a website hosted on AWS (S3 using CloudFront) with SSL. When I perform a Lighthouse test via Chrome, the test doesn't work on any page other than the Home page. It returns question marks against all tests except performance and returns the following error:

There were issues affecting this run of Lighthouse: Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. Status code: 404."

It's a ReactJS SPA website and Lighthouse does work via debug, but doesn't work when I try the S3 or cloudfront domains in the URL, or the actual domain I purchased. Whether it used to work I'm not 100% sure, as I may have tried it only on the Home page and assumed it would work for all pages.

Could anyone suggest anything obvious I could try (either to resolve or give me more analysis)? I'm fairly new to AWS and React. The website appears to be working fine other than this.

Many thanks :)

Answer 1

Eventually sorted this. It was an issue with the way AWS S3 and CloudFront handles errors. Since React websites hosted on AWS don't link to the actual files held in the bucket (e.g www.example.com/testpage, it attempts to route to testpage), it will error. Now you can set up an Error doc in your bucket that points to the index.html page, so if it does error it will reroute and then react will route to the actual page. So, I had this set up already but it was still failing. What I found was that you can also set up an Error doc in CloudFront, and by adding this, Lighthouse (and Google Search Console) finally started working (through CloudFront and using my actual domain). It does not however work via the S3 bucket domain. No idea why not, but this isn't important for me since it routes correctly where I want it to.

Answer 2

This worked for me.

I update my 404 Url options with a prefix #!/

Had to update my routing rules for the bucket

<RoutingRules>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <HostName>myhostname.com</HostName>
            <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <HostName>myhostname.com</HostName>
            <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

After this I added a small check in App.jsx to reroute such URL's

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
if (path) {
    history.replace(path);
}

Reference: https://viastudio.com/hosting-a-reactjs-app-with-routing-on-aws-s3/