Error Handling

When you encounter an error, Rasengan.js will throw an error message specifying the error type and the line number where the error occurred.

It's important for debugging purposes to know where the error occurred, but in production the error details should be hidden from the user.

By default, Rasengan.js will throw a 404 error if the page is not found by providing a predifined 404 page.

You can customize the 404 page by creating a simple React Component and passing it to the AppRouter configuration.

tsximport { Link } from "rasengan";
 
export default function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <Link to="/">Go to Home</Link>
    </div>
  );
}

You now have to pass the 404 page component to the AppRouter configuration.

typescriptimport { RouterComponent, defineRouter } from "rasengan";
import Home from "@/app/home.page";
import AppLayout from "@/app/app.layout";
import NotFound from "@/app/_404";
 
class AppRouter extends RouterComponent {}
 
export default defineRouter({
  import: [],
  layout: AppLayout,
  pages: [Home],
  notFoundComponent: NotFound // set the 404 page here
})(AppRouter);

Now, if you navigate to a page that doesn't exist, you should see the 404 page you created.

With some simple styling, here is the result:

You can provide a better UI for the 404 page by adding some CSS to the page.