Not Able to override the default 404 netlify page

Hello,

I am using Stencil JS and Gather Content to consume data for our site. The site is deployed in Netlify. I have implemented a custom 404 page which is getting the content from Gather Content but i am not able to override the default netlify 404 page. Locally is working fine but when i deploy i am still redirected to the default 404 page of netlify.

I have added the following code to the netlify.toml file but no luck:
[[redirects]]
from = “/*”
to = “/page-not-found”
status = 404

Can you provide a working example where the custom 404 page is tsx file with configuration example?

Looking forward to hear from you.

Best,
Ivaylo

hi there, are you hoping to load a tsx file directly? not sure that would work - i don’t know much about tsx but if it isn’t being transpiled into html or js then i doubt our service would know what to do with it.

1 Like

Hi, I am looking for any solution… As i said i have a component containing tsx file which is consuming the content for the custom 404 page from Gather Content. Can you come with a working example where i can override the default netlify 404 page?

Hi @Ivakaaaa

I have a basic (static HTML and CSS) site with a 404 deployed at netlify-drop-example with the git repository coelmay/netlify-drop-example.

Hi @coelmay, the problem is that i am retrieving the data for the custom 404 page from external source(Gather Content) and in order to display the content correctly i need to pass properties and metadata - this is why i need component(page-not-found.tsx) which has inline html markup. Your example shows a static 404 page where i need a dynamic one.

As @perry already mentioned, having .tsx file render dynamic content at browse time doesn’t work.

You can dynamically fetch content via client-side JavaScript at browse time, but not server-side (Netlify runs from a CDN that simply serves content.)

1 Like

I am retrieving all data of the site in one go(when open the site), how can i fetch the content via client-side JS from the tsx file?

I don’t believe you can. I didn’t mean to pull data from the .tsx file, rather to use client-side JS to pull data from Gather Content.

If you need to dynamically generate data on a 404 page, it is possible you could use a serverless function to do so.

If you can give more details about what you are doing and how, this would help greatly in assisting you. If you can share your git repository, this would likely help even more.

Sure. The admin of the repo is on leave so it will take some time before i share the repo details.

Hi @Ivakaaaa,

I believe you’d have to rely on client-side JS for this. The gist of the way Netlify’s 404 works is this:

  • If a custom 404 rule exists:
    • Check if that destination exists (as a static HTML page - not dynamically rendered) →
      • If yes, redirect to that page
  • If not:
    • Check if a 404.html exists in the root of the website →
      • If yes, redirect to that page
  • If none of the above:
    • Show the Netlify 404 page

So I know you’re not looking for a solution, but I think you could get it working instead of we trying to setup an example to replicate your use case. What you could do it:

Create a static HTML page for page-not-found route and once that page loads, you could fetch the data from Gather Content and render the page. However, if I may ask, why do you need a 404 page to be dynamic? It can simply be a static page, correct - in most cases, all it needs to do it say that a page doesn’t exist.

@coelmay i have added 404.html to my project but does not seems to be picked up. I have mirrored your example but still getting redirected to the default netlify 404page. A screenshot attached.

Not having used Stencil @Ivakaaaa I can’t say for certain, but based on these docs I suggest simply putting the 404 page in the root of your project is not the solution as it likely doesn’t copy it to the output directory.

Have you tested building locally? Does the 404.html file end up in the output directory?

If building on Netlify, download your deployed files and see what is in there. If there is no 404.html then that would explain why you continue to receive the default 404 page.

Edit: As I am unable to see your code, I am only able to make guesses. If you are using stencil-router, you might like to look at How to implement a fallback route for 404/NotFound · Issue #34 · stencil-community/stencil-router · GitHub. You might also find looking the the notfound-page component in the stencil-site repository.

@coelmay i have downloaded the deployed files and the 404.html was not there. Also we use stencil-router for all routes exactly as per the example you provided. I have implemented the notfound-page few weeks ago but it’ was working only locally, when deployed the default 404 netlify page was shown…

I have created coelmay/stencil-test based on ionic-team/stencil-app-starter.

I added the notfound-page component (along with associated code from other files) as found in the stencil website repository (previously linked.)

In src I added a _redirects file with

/*    /index.html    200

and a copy task to stencil.config.ts to ensure this file is copied to the www output directory.

The result is sharp-mcnulty-b189ff.netlify.app. If you navigate to any no-existent page (e.g. sharp-mcnulty-b189ff.netlify.app/about) you will see Uh oh! We can’t find the page you’re looking for.