服务器端 Redux/React。表示不抛错

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。表示不抛错

Server Side Redux/React. Express not throwing error

express

reactjs

react-router

redux

react-redux