jd-opensource/joyagent-jdgenie · error · Error

Network response was not ok

Error message

Network response was not ok

What it means

FileRenderer fetches fileUrl and explicitly throws Error('Network response was not ok') when response.ok is false (any non-2xx status). useRequest captures it into `error`, which the component should render. It signals the file content could not be downloaded.

Solutions

  1. Verify fileUrl is correct and the file still exists on the server
  2. Re-generate the presigned/authenticated URL and retry the fetch
  3. Render the useRequest `error` state with a retry button instead of blank content
  4. Check server logs for the failing status code
  5. Handle 401/403 by refreshing credentials before fetching

Example fix

// before
const res = await fetch(fileUrl);
if (!res.ok) throw new Error('Network response was not ok');
// after
const res = await fetch(fileUrl);
if (!res.ok) {
  throw new Error(`Failed to load file (HTTP ${res.status}): ${fileUrl}`);
}
return await res.text();
Defensive patterns

Strategy: try-catch

Validate before calling

// before rendering, verify the URL is reachable
async function checkUrl(url: string): Promise<boolean> {
  try {
    const res = await fetch(url, { method: 'HEAD' });
    return res.ok;
  } catch { return false; }
}

Type guard

function isHttpOk(res: Response): boolean {
  return res.ok && res.status >= 200 && res.status < 300;
}

Try / catch

const { data, error, run } = useRequest(() => loadFile(fileUrl), {
  refreshDeps: [fileUrl],
  onError: (e) => message.error(`文件加载失败：${e.message}`),
});
if (error) return <Button onClick={run}>重试</Button>;

Prevention

When it happens

Trigger: The file URL returns 404 (file deleted or expired), 401/403 (auth missing/expired presigned URL), or 500 from the file server; CORS-blocked or unreachable host also yields failed fetches.

Common situations: Expired pre-signed S3/MinIO links; files removed after upload; wrong fileUrl built by the backend; viewer opened before the file finished uploading.

Understand the failure class

Background: "API error: {status}" and "HTTP 401/403/404/429/5xx" errors: non-2xx HTTP responses explained — this error's family across 27 libraries.

Related errors

AI-assisted analysis of jd-opensource/joyagent-jdgenie@2417e0b8b6 (2026-09-08). Data as JSON: /api/errors/ce1d1c0742dadb0e. Report an issue: GitHub.

Appendix: source

Thrown at ui/src/components/ActionPanel/FileRenderer.tsx:47

 * @param data 文件内容
 * @returns 格式化后的文件内容
 */
const formatFileContent = (ext: string | undefined, data: string | undefined): string => {
  if (ext === 'md' || ext === 'txt') {
    return data || '';
  }
  return `\`\`\`${ext}\n${data || ''}\n\`\`\``;
};

const FileRenderer: GenieType.FC<FileRendererProps> = React.memo((props) => {
  const { fileUrl, fileName, className } = props;

  const ext = useMemo(() => getFileExtension(fileName), [fileName]);

  const { data, loading, error } = useRequest(async () => {
    const response = await fetch(fileUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return await response.text();
  }, { refreshDeps: [fileUrl] });

  const markStr = useMemo(() => formatFileContent(ext, data), [ext, data]);

  if (loading) {
    return <Loading className={LOADING_CLASS} />;
  }

  if (error) {
    return (
      <Alert
        type="error"
        message="加载失败"
        description={error.message}
        showIcon
        className={ERROR_CLASS}

View on GitHub (pinned to 2417e0b8b6)