5

aspnet prerendering を使用してサーバー側のレンダリングを使用して、aspnet コアで実行されている react-redux アプリがあります。

愚かなタイプミスのために、子コンポーネントで未定義の小道具にアクセスしようとするプログラミングエラーを犯したとしましょう。

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
}

サーバー レンダリングがなければ、次のようなエラーが発生します: cannot access something of undefined at line x:yy しかし、サーバー レンダリングを使用すると、次のようになります。

リクエストの処理中に未処理の例外が発生しました。

例外: ノード モジュールの呼び出しが次のエラーで失敗しました: 'ClientApp/src/boot-server' のブート関数が解決または拒否しない promise を返したため、30000 ミリ秒後に事前レンダリングがタイムアウトしました。ブート関数が常にその promise を解決または拒否することを確認してください。「asp-prerender-timeout」タグ ヘルパーを使用して、タイムアウト値を変更できます。

これにより、何がうまくいかなかったのかについてフィードバックが得られない場合、デバッグが非常に難しくなります。何かが失敗した場合に拒否を設定する方法を知っている人はいますか? または、サーバー側でレンダリングされたコードをデバッグすることさえ可能ですか?

これが私のブートサーバーファイルです。さらにファイルが必要な場合は教えてください。 

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

3 に答える 3

2

私はいくつかの調査を行い、最初のサーバーでレンダリングされたコードをデバッグすることは当面不可能であるという結論に達しました。

私が代わりに行ったのは、サーバーのレンダリングを無効にできるようにロジックを実装することです。

これは次のようになります。

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

ビュー.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>
}

ブートサーバー.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
});
}

ブートクライアント.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"
}

これで、URL の最後に ?server=false を追加してサーバー レンダリングを無効にし、デバッグを開始できます :)

于 2016-10-11T09:34:47.250 に答える
2

私のために働く解決策を見つけました: 最終的な renderToString に try/catch を挿入しました。catch で、エラーを含むディスパッチを送信します。

更新された 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
    });
于 2016-10-14T13:19:14.150 に答える