Node/Express doesn't load CSS on 500 error page

Question

For my error page, I use

// 500 error
app.use(function (err, req, res, next) {
    console.log(err);
    console.log(err.stack);
    res.render("error", {
        status: err.status || 500,
        error: err,
        title: config.pageTitles.error,
        ENV: app.get('ENV')
    });
});

My error page is a jade template that looks:

extends base
block body
    body(class="gray-bg")
        div(class="middle-box text-center animated fadeInDown")
            h1 500
            h3(class="font-bold") Internal Server Error
            div(class="error-desc")
                p   The server encountered something unexpected that didn't allow it to complete the request. We apologize.

My other normal pages are

extends base
block content
    #application

My problem is when I get 500 error, the CSS is not loaded; however, if I load the page error on a normal page, then the CSS IS loaded. It seems like the app.use for the error causes this.

Help is appreciated

Answer 1

Typically when assets aren't being loaded (eg server returns a 404 for the asset) the problem has to do with the use of (relative) paths.

Try either using an absolute path (in your template) for your CSS file and/or use your browser's web development tools to check what the requested asset path is and fix the appropriate relative path (eg adding .. where appropriate to get to the correct path).