How to customize default layouts in feathers.js

Question

I am using feathers.js v3.0.5 as my rest solution, created the application using feathers-cli

For each error code the framework has a specific html template including the feathers logo and styles:

• 401 Not Authenticated
• 403 Forbidden
• 404 Not Found

Is there a way to customize the default templates for errors?

I guess for index.html, I just can modify the index.html from /public/ folder but for errors I did not find any sensible advice.

Answer 1

I don't think the Feathers app should be responsible for rendering an error page. As you said, Feathers is your REST/WebSocket platform. Most people use it as a data-only backend for their frontend application, or even as an API server for a full fledged Express application.

In either case, you should handle the 404 error (for example) in code and redirect / display to your 404 "UI".

Since you didn't specify too much about your app, your setup, and so on, I can't give any specifics. Hope this helps.

Answer 2

You can set custom HTML pages as documented in the Feathers error handler documentation :

const { errorHandler } = require('@feathersjs/express');
const app = feathers();

// Just like Express your error middleware needs to be
// set up last in your middleware chain.
app.use(errorHandler({
    html: function(error, req, res, next) {
      // render your error view with the error object
      res.render('error', error);
    }
}));

// Set paths to custom HTML pages
app.use(errorHandler({
    html: {
      404: 'path/to/notFound.html',
      500: 'there/will/be/robots.html'
    }
}));

Answer 3

Another good solution is to just turn off html errors. This will return json responses which are more easily interpreted by software based consumers of your api.

Example

app.use(errorHandler({
    html: false
}));