Aspnet服务器渲染调试

Question

我有一个在aspnet核心上运行的react-redux应用程序,使用aspnet prerendering进行服务器端渲染.

让我说我做了一个编程错误,在子组件中我试图访问一个未定义的道具因为一个愚蠢的错字.

import {Child} from './child'
export class Parent extends React.Component {
  render () {
    const someProp = {
      something: "something"
    };
    return <Child someProp={someProp} />;
  }
}

export class Child extends React.Component {
  render() {
    return <div>this.props.someprop.something</div>;
         //typo: should be someProp instead of someprop
}

没有服务器渲染我会得到一个类似于这样的错误:无法访问第x行的未定义的东西:yy但是使用serverrendering我得到一个:

处理请求时发生未处理的异常.

例外:调用节点模块失败并显示错误:由于"ClientApp/src/boot-server"中的启动功能返回了未解析或拒绝的承诺,因此预渲染在30000ms后超时.确保您的启动功能始终解析或拒绝其承诺.您可以使用'asp-prerender-timeout'标记帮助程序更改超时值.

这使得调试非常困难,当你没有得到任何关于出错的反馈.如果出现故障,任何人都知道如何设置拒绝？或者甚至可以调试服务器端呈现的代码？

这是我的启动服务器文件,告诉我你是否需要更多的文件.

import * as React from 'react';
import { Provider } from 'react-redux';
import { renderToString } from 'react-dom/server';
import configureStore from './store/configureStore';
import {getFormById} from './actions/getFormActions';
import {updateUserLocale} from './actions/userLocaleActions';
import FormResponder from './components/mainComponents/formResponder';

export default function renderApp (params) {

    return new Promise((resolve, reject) => {

        const store = configureStore();
        store.dispatch(getFormById(params.data.id, params.data.config, params.data.authenticationToken));
        store.dispatch(updateUserLocale(params.data.userLocale));
        const app = (
            <Provider store={ store }>
                <FormResponder />
            </Provider>
        );

    // Perform an initial render that will cause any async tasks (e.g., data access) to begin
    renderToString(app);

    // Once the tasks are done, we can perform the final render
    // We also send the redux store state, so the client can continue execution where the server left off
    params.domainTasks.then(() => {
        resolve({
            html: renderToString(app),
            globals: {
                initialReduxState: store.getState(), 
                authenticationToken: params.data.authenticationToken, 
                config: params.data.config
            }
        });
    }, reject); // Also propagate any errors back into the host application
});
}

Answer 1

我有使用Visual Studio 2017的类似经验.我最终意识到原始错误的诊断信息实际上是在"输出"窗口中.

Answer 2

找到了一个适合我的解决方案：我在最终的 renderToString 上插入了一个 try/catch 。在 catch 中我发送了一个带有错误的调度。

更新了 boot-server.jsx

params.domainTasks.then(() => {
        let html;
        try {
            html = renderToString(app);
        }
        catch (err) {
            store.dispatch(loadFormFailed( {message: err.toString() } ));
        }

        resolve({
            html: html,
            globals: {
                initialReduxState: store.getState(), 
                authenticationToken: params.data.authenticationToken, 
                config: params.data.config,
                disableReactServerRendring: false
            }
        });
        }, reject);
        // Also propagate any errors back into the host application
    });