Server side rendering fails, if react rendering fails. #1317

New Issue

fergalmoran · 2025-08-09T17:19:40Z

fergalmoran commented

2025-08-09 17:19:40 +00:00

Originally created by @knuterik91 on 10/14/2016

Hi, @SteveSandersonMS
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
}
Child.propTypes = {
    someProp: React.PropTypes.object.isRequired
};

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.

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 ? as a quick fix I have also added a possibilty to turn of server rendering during development.

Is this the expected behavior, or have i missed something ?

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

*Originally created by @knuterik91 on 10/14/2016* Hi, @SteveSandersonMS 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 } Child.propTypes = { someProp: React.PropTypes.object.isRequired }; ``` 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. > 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 ? as a quick fix I have also added a possibilty to turn of server rendering during development. Is this the expected behavior, or have i missed something ? 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 }); ```

fergalmoran closed this issue

2025-08-09 17:19:40 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1317