Skip to content

DEV_FIXES.md

Latest commit

 

History

History
209 lines (170 loc) · 5.35 KB

DEV_FIXES.md

File metadata and controls

209 lines (170 loc) · 5.35 KB

seq-fetch-web 开发环境修复总结

问题诊断

  1. 前端无法启动 - localhost:3000 无法连接
  2. 后端只显示 demo.html - 没有 React 前端界面
  3. 网页空白 - React 应用渲染失败
  4. 搜索按钮禁用 - "Fetching data summary..." 一直加载

根本原因

  1. react-scripts 5.0.1 使用的 webpack dev server 与 HOST=localhost 环境变量不兼容
  2. 前端没有 build 目录，后端只能提供 demo.html
  3. 需要正确的 webpack 配置来允许所有主机访问
  4. 缺少 QueryClientProvider - @tanstack/react-query 需要 Provider 包裹
  5. useQuery 状态问题 - isLoading 在 React Query v4 中应改为 isPending

修复内容

1. 前端配置修复

新增文件

frontend/.env

PORT=3000
BROWSER=none
WDS_SOCKET_PORT=0

frontend/config-overrides.js

const path = require('path');

module.exports = {
  webpack: function (config, env) {
    return config;
  },
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      
      // 允许所有主机（修复 allowedHosts 问题）
      config.allowedHosts = 'all';
      config.hot = true;
      config.historyApiFallback = true;
      
      // 代理 API 请求到后端
      config.proxy = {
        '/api/v1': {
          target: 'http://localhost:8000',
          ws: true,
          changeOrigin: true,
        },
        '/ws': {
          target: 'ws://localhost:8000',
          ws: true,
        },
        '/health': {
          target: 'http://localhost:8000',
          changeOrigin: true,
        },
        '/docs': {
          target: 'http://localhost:8000',
          changeOrigin: true,
        },
      };
      
      return config;
    };
  },
};

2. 修复 React Query Provider（网页空白问题）

frontend/src/index.js - 添加 QueryClientProvider

import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';

// Create a QueryClient instance
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 1,
    },
  },
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

问题原因： HomePage 组件使用了 useQuery from @tanstack/react-query，但没有用 QueryClientProvider 包裹应用，导致错误：

No QueryClient set, use QueryClientProvider to set one

3. 修复搜索按钮一直禁用问题

frontend/src/pages/HomePage.js - 修复 useQuery 状态

// 修改前
const { data: summary, isLoading: searching, error } = useQuery({
  queryKey: ['summary', selectedAccession],
  queryFn: () => metadataAPI.getSummary(selectedAccession).then((res) => res.data),
  enabled: !!selectedAccession,
});

// 修改后
const { data: summary, isPending: searching, error, isError } = useQuery({
  queryKey: ['summary', selectedAccession],
  queryFn: () => metadataAPI.getSummary(selectedAccession).then((res) => res.data),
  enabled: selectedAccession ? selectedAccession.length > 0 : false,
  staleTime: 5 * 60 * 1000,
  retry: 1,
});

问题原因：

  1. React Query v4 中 isLoading 已弃用，应使用 isPending
  2. enabled 需要明确的布尔值，不能使用 !!selectedAccession

修改文件

frontend/package.json

  • 安装 react-app-rewired 来覆盖 webpack 配置
  • 修改 scripts 使用 react-app-rewired
{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

2. start-dev.sh 修复

# 使用正确的环境变量
BROWSER=none PORT=3000 npm start &

测试结果

虚拟环境隔离

Is Virtual Env: True
Venv Path: /home/zhujie/toolkits/ohalienzj/bioinfo/seq-fetch-web/venv
System Path: /usr

安装的本地包

seq-fetch         0.1.0  /home/zhujie/toolkits/ohalienzj/bioinfo/seq-fetch
seq-fetch-cli     0.1.0  /home/zhujie/toolkits/ohalienzj/bioinfo/seq-fetch-cli
seq-fetch-web     0.1.0  /home/zhujie/toolkits/ohalienzj/bioinfo/seq-fetch-web/backend

端点测试

端点 URL 状态
Frontend http://localhost:3000 ✅ 200 - 页面正常渲染
Backend http://127.0.0.1:8000/health ✅ 200
Proxy Health http://localhost:3000/health ✅ 200
Proxy Docs http://localhost:3000/docs ✅ 200
Proxy API http://localhost:3000/api/v1/metadata/detect-type/ERR000001 ✅ 200
Bundle.js http://localhost:3000/static/js/bundle.js ✅ 200 (7.8MB)

浏览器测试（Playwright）

✅ PAGE RENDERED SUCCESSFULLY
✅ Root innerHTML length: 8413
✅ No JavaScript errors
✅ All resources loaded successfully

使用方法

cd /home/zhujie/toolkits/ohalienzj/bioinfo/seq-fetch-web
./start-dev.sh

访问：

系统包保护

虚拟环境完全隔离，不会影响系统 Python 包。