Customizing the error pages in Yesod is as simple as writing a function to display the custom template when an error happens.

To customize the 404 error page we need to create the following function:

errorHandler NotFound = fmap toTypedContent $ do
  master <- getYesod
  defaultLayout $ do
    setTitleI MsgTitle
    $(widgetFile "404")
errorHandler other = defaultErrorHandler other

The fmap toTypedContent is required to satisfy type constraints, other than that, the function is just a typical handler that injects the 404.hamlet template into the default layout.

Note that we are pattern matching the error type to decide what template to use for each type of error. In our case we defined a custom template for errors of type NotFound only. Any other error will be handled by the defaultErrorHandler.

You can find more info about custom error pages here and the commit implementing the changes on github.

Start the application and access http://localhost:3000/invalid and you should see the following page: