Первоначальный ответ от моего сервера не обслуживается, и это произошло из-за ошибки в моем компоненте React, однако Express не выдает никаких ошибок. Вот фрагмент того, что происходит на стороне сервера. Код дошел до этой точки, а затем молча потерпел неудачу:

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

Но произошла ошибка в методе компонента render. this.props.ui больше не определен, поэтому должна была возникнуть ошибка. Вместо того, чтобы выдать ошибку, он ничего не сказал и просто не загрузил страницу.

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

Любые идеи относительно того, как заставить мой сервер выдавать ошибку вместо тихого сбоя?

0
pizzarob 19 Дек 2016 в 09:34

1 ответ

Лучший ответ

При рендеринге страницы на сервере вы должны заключить try catch в функцию renderToString, чтобы отловить ошибки.

Например,

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);
    }
}
1
Thaadikkaaran 19 Дек 2016 в 09:43