CODEWITHSUNDEEP
reactjsexpressreduxreact-routerreact-redux
pizzarob
pizzarob

Reputation: 12029

Server Side Redux/React. Express not throwing error

The initial response from my server was not being served and it was due to an error in my React component, however Express did not throw any error. Here is a snippet of what is happening server side. The code got to this point and then silently failed:

res.status(200).send(html(renderToString(
    <Provider store={store}>
        <RouterContext {...renderProps} />
    </Provider>
), store.getState()));

But there was an error in the component render method. this.props.ui is no longer defined, so an error should've been thrown. Instead of throwing an error it said nothing and just wouldn't load the page. 

return (
    <div className={`full-width full-height ${this.props.ui.showBgImage ? 'bg' : ''}`}>
)

Any ideas as to how to get my server to throw an error instead of fail silently?

Upvotes: 0

Views: 72

Answers (1)

Thaadikkaaran
Thaadikkaaran

Reputation: 5226

When you render your page on Server, you have to wrap try catch around renderToString function to catch the errors.

For example,

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import Home from './home';
import { RouterContext } from 'react-router';
import { Provider } from 'react-redux';

export default function render(renderProps, store, res, next) {

    try {
        const markup = ReactDOMServer.renderToString(
            <Provider store={store}>
                <RouterContext {...renderProps} />
            </Provider>
        );

        const html = ReactDOMServer.renderToStaticMarkup(
            <HtmlDocument
                markup={markup}
                params={renderProps.params}
            />
        );

        res.send(`<!DOCTYPE html>${html}`);
    }
    catch (err) {
        next(err);
    }
}

Upvotes: 1

Related Questions