react-i18n如果后端加载失败，则使用uspense永无止境

Question

在我的React应用程序中，我使用i18next-http-backend从后端响应加载翻译数据。当前我的应用程序在以下配置中正常工作：

config.js

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import HttpApi from 'i18next-http-backend';
import axios from "axios";

const backendOptions = {
    loadPath: 'http://localhost:3000/messages',

    request: async (options, url, payload, callback) => {
        try {
            const translation = await axios.get(url);
            callback(null,{
                status: 200,
                data: JSON.stringify(translation.data),
            });
        } catch (e) {
            callback(e);
        }
    },
};
const i18nextOptions = {
    debug:true,
    backend: backendOptions,
    fallbackLng: 'en',
    lng: 'en',
    load:"languageOnly",
    react: {
        useSuspense: true,
    },
    ns: ['translations'],
    defaultNS: 'translations'
}
i18n.use(initReactI18next)
    .use(HttpApi )
    .init(i18nextOptions);

i18n.languages = ['en', 'jp'];
i18n.on('failedLoading', function(lng, ns, msg) {
    console.log("backend error");
})
export default i18n;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import './i18n/config';
import {store} from "./app/store";
import {Provider} from "react-redux";
import {ErrorBoundary} from "react-error-boundary";
import {Suspense} from "react";
import RuntimeErrorPage from "./features/error/runtime-error-page";
import Spinner from "./components/common/Spinner";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <ErrorBoundary FallbackComponent={RuntimeErrorPage}>
            <Suspense fallback={<Spinner/>}>
                <Provider store={store}>
                    <App/>
                </Provider>
            </Suspense>
        </ErrorBoundary>
    </React.StrictMode>
);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

但是，如果存在任何后端错误，则该应用程序被卡在悬疑中。如果我禁用悬念，则没有任何资源的I18NEXT初始化。如何处理任何错误来自请求？我需要一种方法来调用errorboundary sholdback组件或重定向到任何错误页面。

Answer 1

i18next永远不会丢下错误...

在其他地方保存这些失败的加载： https://codesandbox.io/s/react-i18next-http-example-forked-9ted7y?file=/src/src/i18n.js:188-295-2955

然后创建自己的逻辑以显示内容： https://codesandbox.io/s/react-i18next-http-http-http-example-forked-9ted7y?file=/src/src/app/app/app.js:155-377

事件侦听器不是一个好主意

：当未加载翻译时，为什么要显示错误？为什么不显示后备文字？无论如何，该错误并非针对最终用户...