Lighthouse no longer working with website - Error 404

user_571335 0
Viewed 2212

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 :)

lighthouse amazon-web-services
3 Answers

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.

user_5713350

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/

user_51190890

Just add custom error response. Like this(view image for reference):

HTTP Error Code : 404

Error Caching Minimum TTL (seconds): 0

Check Customize error response setting

Response page path: /index.html

HTTP Response Code: 200

enter image description here

Basically let the framework handle the routing settings.

user_55790020
Related