如何处理无法获取动态导入模块错误

Question

我在 React 应用程序中导入了这样的组件：

  <div id="editor" className={styles.editor}>
    <React.Suspense fallback={<div>Loading...</div>}>
      <CollarCodeEditor projectId={pid.toString()}></CollarCodeEditor>
    </React.Suspense>
  </div>

今天我遇到这样的错误：

Unexpected Application Error!
Failed to fetch dynamically imported module: https://tex.poemhub.top/assets/CollarCodeEditor-BHaZ2NgK.js
TypeError: Failed to fetch dynamically imported module: https://tex.poemhub.top/assets/CollarCodeEditor-BHaZ2NgK.js

我认为当客户端长时间保持打开状态，并且服务器更新网站并使旧版js丢失时，就会发生这种情况。当客户端下次请求js的时候。都会面临这个问题。可以处理这个错误吗？当我捕获此错误时，只需重定向到主页。我使用 vite 作为构建工具。

Answer 1

在这些情况下，缓存或预加载的文件可能会过时，并且当应用程序尝试访问它们时，会发生错误。要处理此错误，您可以使用错误边界来捕获错误并刷新应用程序或将用户重定向到主页。

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error("Error captured in ErrorBoundary:", error, info);
  }

  handleRetry = () => {
    this.setState({ hasError: false });
    window.location.reload(); 
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>Unexpected Application Error!</h2>
          <button onClick={this.handleRetry}>Reload</button>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

用 ErrorBoundary 包裹 CollarCodeEditor

import React, { Suspense } from 'react';
import CollarCodeEditor from './CollarCodeEditor';
import ErrorBoundary from './ErrorBoundary';

export default function EditorContainer({ pid }) {
  return (
    <div id="editor" className={styles.editor}>
      <Suspense fallback={<div>loading...</div>}>
        <ErrorBoundary>
          <CollarCodeEditor projectId={pid.toString()} />
        </ErrorBoundary>
      </Suspense>
    </div>
  );
} 

希望对你有帮助。