ASPNET服务器渲染调试 [英] Aspnet server rendering debugging

问题描述

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

I have a react-redux app running on aspnet core, with server side rendering using aspnet prerendering.

可以说我犯了一个编程错误，由于愚蠢的错字，我试图在子组件中尝试访问未定义的道具.

Lets say i make a programming error, where in child component I try to access a undefined prop because of a stupid typo.

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我得到了:

Without server rendering I would have got an error similar to this: cannot access something of undefined at line x:yy But with serverrendering i get a:

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

An unhandled exception occurred while processing the request.

异常:调用Node模块失败，并出现错误:30000毫秒后，预渲染超时，因为"ClientApp/src/boot-server"中的启动功能返回了无法解决或拒绝的承诺.确保您的启动功能始终能够解决或拒绝其承诺.您可以使用"asp-prerender-timeout"标签帮助程序来更改超时值.

Exception: Call to Node module failed with error: Prerendering timed out after 30000ms because the boot function in 'ClientApp/src/boot-server' returned a promise that did not resolve or reject. Make sure that your boot function always resolves or rejects its promise. You can change the timeout value using the 'asp-prerender-timeout' tag helper.

当您没有收到任何有关发生问题的反馈时，这会使调试变得非常困难. 任何人都知道如果出现故障如何设置拒绝?还是有可能调试服务器端渲染的代码?

this makes debugging quite hard, when you dont get any feedback on what went wrong. Any one knows how to setup a reject if something fails ? or is it even possible to debug a server side rendered code ?

这是我的引导服务器文件，告诉我是否需要更多文件.

here is my boot-server file, tell me if you need some more files.

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

推荐答案

找到了适合我的解决方案: 我在最后的renderToString上插入了try/catch. 在哪里我发送带有错误的调度.

Found a solution that works for me: I inserted a try/catch on final renderToString. where in catch i send a dispatch with the error.

更新了boot-server.jsx

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

这篇关于ASPNET服务器渲染调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！