Question

我的服务器的初始响应未被提供，这是由于我的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' : ''}`}>
)

关于如何让我的服务器抛出错误而不是无声地失败的任何想法？

Answer 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);
    }
}

服务器端Redux / React。表达不丢错误

1 个答案: