My web server is not loading on Safari or Firefox
As the title states, my website is not loading in all browsers. It works just fine in all Chromium browsers, regardless of the settings, and it also works in Firefox in an in-private window. It doesn't work on Firefox regular windows or on Safari in any configuration.
Now, when I say "not work", what I mean is that when you enter the url, the site doesn't load. It will be spinning for nearly an eternity when it will redirect to a page that says "The connection has timed out. The server is taking too long to respond".
It's a very simple site and the code shouldn't be causing any problems. Based on the error message, I would imagine it is something to do with the server configuration or firewall, but I'm at a loss as to what specific thing it could be. My best guess is that something with the Linode Firewall that I'm using for security is blocking those browsers, but I'm not sure.
6 Replies
✓ Best Answer
I looked into WASM and I'll put it on my radar for future projects! I'm also back to say that I found the cause of the error I originally posted about. It turns out that many web browsers still for some reason default to an http request the first time they see a new site without either https or http in front of it, and I had blocked port 80 on the firewall. Instead I opened port 80 and implemented HSTS to redirect traffic, which also explains why no one saw the error on here, since I just copied and pasted the URL from my browser that had the site working.
Are you using a CMS like WordPress?
Did you code it yourself… in what?
What is the URL?
Without knowing anything about how you made the site my first guess would be some kind of javascript error that does not affect Chrome, but does some other browsers.
No CMS, it's simple React, so JS, HTML, and CSS only, and no backend. I thought it was a javascript error too, except that it:
a) works on my machine when I run it locally (npm start) on all web browsers
b) Works on Firefox in private mode. Not that this means there's no way it's a js error, just that it seems less likely to me.
The URL, if it's helpful, is https://jaylowry.com/
Works fine on Safari Version 16.6 (17615.3.12.11.3, 17615) on my old iMac. Same on Brave.
On both, when I go to the other 3 pages they come up… but when I do a reload of them I get a Not Found: Apache/2.4.56 (Debian) Server at jaylowry.com Port 443
I think you have some kind of routing error in your React.
I also get these errors at the console level:
Failed to load resource: the server responded with a status of 404 (Not Found) logo192.png:1
Error while trying to use the following icon from the Manifest: https://jaylowry.com/logo192.png (Download error or resource isn't a valid image)
Failed to load resource: the server responded with a status of 404 (Not Found)
logo192.png:1
Failed to load resource: the server responded with a status of 404 (Not Found) Contact:1
Error while trying to use the following icon from the Manifest: https://jaylowry.com/logo192.png (Download error or resource isn't a valid image) logo192.png:1
GET https://jaylowry.com/logo192.png 404 (Not Found) Contact:1
Error while trying to use the following icon from the Manifest: https://jaylowry.com/logo192.png (Download error or resource isn't a valid image)
(Why did you write this in React… it is a static site and React brings nothing to the table except lots and lots of possible failure points… one of which you are experiencing!)
I'm aware of all the errors you found in the console (which relate to a resource I deleted and have yet to replace). The point of using React was of course to use React, as I'm new to the framework. I might add more to the site once I can get what I have fully working. So you could say that getting bugs like these are what I'm looking for :)
The not found error on refresh seems possibly separate from the error I originally came here with, but thank you for letting me know about it, that's definitely one to fix soon. If it turns out to fix both problems then I'll mark your answer as the right one.
It is good that you are learning React and this is one way to do it…. put up a site and kill the bugs.
Of course, React and all of the Javascript frameworks (there is a new one every week!) were designed to develop applications (i.e. the "to-do list" which is the "hello world" demo of frameworks.)
The concept is to bring server-side functionality to the local client browser, the idea being instant DOM updating… i.e. rapid (instant) response. Of course the trade off is the complexity this entails as opposed to the "old" server-side (i.e. PHP, Ruby Rails, Django, etc.) methodology.
Personally, I think you might be better advised to learn WASM and its platform as opposed to any of the Javascript frameworks (React, Vue, Next.js, etc.)
Web Assembly has a huge potential to eradicate some of the complexity of Javascript web-based applications in that it will be easier to integrate a 'pretty' front-end with application logic-code… something that is pretty messy with current frameworks.
YMMV