Some days ago I was working on an issue for my job where a page on React couldn't "catch" an error when someone tried to navigate using a bad URL that had the percentage sign (%) that can't be decoded.
The React project uses react-router-dom to handle navigation by showing different views when accessing different URL's (it even has a 404 route when it has no matching routes), and the struture looks very similar to React Router's 404 example, here's the link where you can try for yourself adding /% to the URL from the sandbox's browser and understand in a better way the problem.
In my local-development scenario the page only shows the stack trace in the following image (also check the console output).
I understand that it if someone provides a bad URL that can't be decoded this error will throw and therefore the page will not run. I've been looking for a while and haven't found nothing related to how to catch it on React (I'm not sure if that's really possible).
Any suggestions are welcome!
Related
I've seen a few of these posts on StackOverflow already, though I really can't seem to get mine working no matter what I try.
I am trying to host a webpage, though when deploying I am left with a blank screen, and the following error in the console:
Uncaught SyntaxError: Unexpected token '<' in main.e7fa3b75.js:1
I've seen posts which suggest it is a problem with the pathing to my static files, though I cant seem to sort it out.
This post suggests I should remove an extension from my package.json, though I don't use that extension.
This post says I should remove the repository name from the homepage field in the package.json, though that also wouldn't work for me.
I'm out of ideas, here is the repo, if someone doesn't mind taking a look?
I have got it to render the website for a few moments, only to disappear to the same white screen moments later. There are no problems if I run the page on local host.
UPDATE
I have since got the application to host, but only if I explicitly visit the URL of the landing page.
https://jcdw99.github.io/
From the landing page there is a /papers route which can be reached from the navbar. If you press on the button, the page renders. Though, if you try to explicitly view the page, by manually visiting
https://jcdw99.github.io/papers it returns a 404.
Any help?
Try <HashRouter> instead of <BrowserRouter> since Github pages don't support HTML5 history API (see notes on client side routing) but React BrowserRouter uses it. See this question with similar problem.
One observation is if you navigate directly using # in the url, like https://jcdw99.github.io/#/papers it works!
I am getting a 404 error whenever I try to enter a URL directly in the browser whereas, the normal routing using react-router-dom works fine.
I have a nested routes structure with the nested routes being lazy loaded.
I have also read about a few potential solutions including hashrouter but it comes with the disadvantage of having a hash in the url
Are there any other solutions?
When using React, it's important to understand that the app is only initially loaded when you call the index route (e.g. localhost:3000/), so if you're manually browsing to certain routes (e.g. localhost:3000/testroute), your browser is attempting to GET that specific route rather than loading the React application first.
I'd suggest checking out the answer on this post, as it provides a very detailed explanation and potential solutions. On one of my React apps I encountered this issue and was able to resolve it with a DNS wildcard.
I've built a Next.js app that uses dynamic routing and I'm noticing some strange behavior with the <Link> prefetches.
Occasionally (usually after rebuilding but not always) my app starts returning 404s for all prefetches on a given page. If I follow a link, the next page loads but again, all the prefetches on that page start to 404. This problem will go away after refreshing the page several times but this is not always consistent.
The breaks seem to happen exclusively on my dynamic routes, using getStaticProps and content revalidation every second. Below is an example of how I've structured my Link, note tripname would be a dynamic value.
<Link href={`/trip/${tripname)}`}>
<a>
<Card className={classes.tripCardRoot} />
</a>
</Link>
This is what happens when the page loads.
Edit:
I spent the day digging into this and have some additional details to better describe what I'm experiencing. This error is definitely related to when I build my app and is only occurring on pages that are being generated after the build process via the fallback:true property in my getStaticPaths() function.
Pages that are explicitly built (e.g. in the paths array) do not seem to exhibit this problem. I'm not sure if this makes sense but it seems as though the first few loads of a given page revert back to a version from the previous build rather than a fallback page. It's only after reloading a page a few times that the fallback functionality actually kicks in and next builds that page as part of the current build. From that point on everything seems to work as expected until the next build where the whole ordeal starts fresh.
Also included a screenshot of the console log indicating that there's an issue in the /_next/data/... directory. Though I'm not sure what this error is actually referring to.
I had the exact same problem... After 2 days trial/error I finally found a solution. But it's not the best solution IMO.
I updated all my <Link /> components from next/link and disabled the prefetch option. After this change I don't see any 404 errors in my dev-tools network-tab anymore. All GET-requests for the pre-generated JSON data will only take place on hover now, and magically they now don't result in a 404...
I know it is not the best solution, but at least the problem is gone... Hopefully somebody will reply with a better solution!
I have a react app that has several pages. When I refresh the page, I can successfully link to one other page. Subsequent links update the url address with the reference to the new page, but only load after the page refreshes.
Error messages in different browsers differ.
In chrome:
In firefox:
In safari:
I have seen this post which has very long, complicated suggestions about routing. I'm not sure if this is my problem yet, so have not yet explored the ideas set out as solutions.
2nd screenshot shows that something tries to load /your-path-to-fontawesome/css/all.css and most probably you don't have that file at that location (therefore receiving html instead). You need to config something somewhere in code, connected to fontawesome
Two separate issues here:
First, the combination ERR_BLOCKED_BY_CLIENT and ERR_UNSAFE_REDIRECT are usually the result of a browser extension, or the browser itself, blocking cross-site tracking. This would also make sense why you're only seeing it in a particular browser.
Second, the invalid MIME type for your CSS typically comes from one of two things. The most common, and easiest to fix, is that the path to that file is wrong. In this case, the server responds with a 404 page, giving you the invalid MIME type of text/html.
Another possibility is a library adding comments to the top of a CSS file that is meant to be minified before being sent to the client. Here's a more in-depth post about this issue. Would definitely double-check the file path, though, before digging deeper into this possibility. An easy way to check would just be to take that URL from the MIME type error and navigate to it in your browser to see what you get.
I used create-react-app to create my react app.
I have it deployed on AWS Cloudfront + S3. Everything seems to work when I visit the site: https://www.remotecareers.io
However, when I try using the "Fetch and Render" feature of Fetch as Google, I see this:
It's weird that the This is how a visitor to your website would have seen the page: part is empty. However, my main issue is when I try to do the same thing for the non-root routes.
For example, I have this page: https://www.remotecareers.io/remote-jobs/new. It looks like it's working fine. However, when I try fetching it through google it says it's Not Found.
It says the same thing in the new Google Search Console too:
So far even to get just the This is how Googlebot saw the page: part to work, I installed and added:
import "babel-polyfill"; // I tried this by itself as well as with the 2 below
import "url-search-params-polyfill";
import "whatwg-fetch";
What's weird is that the homepage is (partially) working but the rest of the pages aren't being scanned at all. I thought it might be because I wa missing the robots.txt file so I added it but it seems to not have any affect (https://www.remotecareers.io/robots.txt). Can someone help me?
From my experience, relying on googlebots to run javascript to render the app is not very reliable. For best SEO performance, you need to server render your react app.
You will need a dedicated NodeJS server that will render your react app, then send down the rendered HTML to the browser. The browser will receive the HTML response, which includes some script tags as well. After the scripts are loaded, it will run and hydrate your react app so that everything works properly.
Try reading this article to get you started on this topic.