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

回答1:

I have had similar experience working with Visual Studio 2017. I eventually realized that the diagnostic information for the original error(s) was actually in the Output window.

回答2:

I have done som research and have come to the conclusion that is not possible for the time beeing to debug the initial server rendered code.

what i have done instead is to implement logic, so that i can disable server rendering.

this is how it looks like:

public async Task<IActionResult> Index(string id, string userLocale = "en", bool server = true)
{ 
    Guid positionId;
    if (!Guid.TryParse(id, out positionId))
    {
        throw new Exception("Invalid position id");        
    }

    var token = await _apiClient.GetToken();

    var formData = new ApplicationFormViewModel()
    {
        Id = positionId,
        UserLocale = userLocale,
        AuthenticationToken = token.AccessToken,
        Server = server
    };
    return View(formData);
}

view.cshtml:

@{if (@Model.Server) {
    <div 
    class="container"
    id="react-app"
    asp-prerender-module="ClientApp/src/boot-server"
    asp-prerender-data="new {
        Id = @Model.Id, 
        UserLocale = @Model.UserLocale, 
        AuthenticationToken = @Model.AuthenticationToken, 
        Config = new { 
            ApplicationPostUrl = @Url.Action("SaveApplication"),
            AttachmentPostUrl = @Url.Action("UploadAttachment"),
            FormGetUrl = @Url.Action("GetForm")
        }
     }" 
     asp-prerender-webpack-config="webpack.config.js" >
        Loading...
</div>
}
else {
    <script>
        var id= '@Model.Id'; 
        var config= {
            applicationPostUrl: '@Url.Action("SaveApplication")',
            attachmentPostUrl: '@Url.Action("UploadAttachment")',
            formGetUrl: '@Url.Action("GetForm")'
        };
        var userLocale='@Model.UserLocale'; 
        var authenticationToken='@Model.AuthenticationToken'; 
        var server = false;
    </script>
    <div class="container" id="react-app">loading</div>

}
}



@section scripts {

    <script src="~/dist/main.js" asp-append-version="true"></script>
}

boot-server.jsx:

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,
                server: true
            }
        });
        }, reject); // Also propagate any errors back into the host application
});
}

boot-client.jsx:

// Grab the state from a global injected into server-generated HTML
const {id, initialReduxState, authenticationToken, config, server, userLocale } = window;

if (server) {


// Get the application-wide store instance, prepopulating with state from the server where available.
const store = configureStore(initialReduxState);
// This code starts up the React app when it runs in a browser.
ReactDOM.render(
    <Provider store={ store }>
        <FormResponder authenticationToken={authenticationToken} config={config} />
    </Provider>,
    document.getElementById('react-app')
);


}
else {

    const store = configureStore();
    store.dispatch(getFormById(id, config, authenticationToken));
    store.dispatch(updateUserLocale(userLocale));

    render(
        <Provider store ={store}>
            <FormResponder authenticationToken={authenticationToken} config={config} />
        </Provider>,
        document.getElementById('react-app')
    ); // Take our FormBuilder component and attach it with DOM element "app"
}

so now i can simply turn of server rendering by adding a ?server=false at the end of the url, and start debugging :)

回答3:

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