Knut Erik Lødding Knut Erik Lødding - 1 month ago 32
ASP.NET (C#) Question

Aspnet server rendering debugging

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
}




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 ?

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



Answer

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.

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