Knut Erik Lødding Knut Erik Lødding - 1 year ago 334
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();
const app = (
<Provider store={ store }>
<FormResponder />

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

// 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(() => {
html: renderToString(app),
globals: {
initialReduxState: store.getState(),
}, reject); // Also propagate any errors back into the host application

Answer Source

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

            html: html,
            globals: {
                initialReduxState: store.getState(), 
                disableReactServerRendring: false
        }, reject);
        // Also propagate any errors back into the host application
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download