无SSR的React+NodeJS项目如何在控制台手动模拟输出404状态码错误

架构老林

2026-10-11

解决方案

你要的浏览器原生404错误日志是网络请求层级的输出，普通`console.error`只能输出自定义日志，没办法直接生成原生样式的网络错误日志，你可以用以下两种方案实现需求：

方案1：发起极小的无效请求触发原生404日志（最贴近你要的效果）

因为你项目是非SSR架构，后端本身就没有匹配前端路由的接口，你只需要在404页面挂载时，发起一个几乎无负载的HEAD请求，浏览器就会自动输出原生的404错误日志，完全匹配你要的效果。
React代码示例：

import { useEffect } from 'react'

function NotFoundPage() {
  useEffect(() => {
    // 发起HEAD请求，仅获取响应头，几乎不占用带宽，catch吞掉报错避免影响其他逻辑
    fetch(window.location.pathname, { method: 'HEAD' }).catch(() => {})
  }, [])

  // 你的404页面原有逻辑
  return <div>404 页面不存在</div>
}

export default NotFoundPage

方案2：自定义`console.error`模拟样式（无需发起额外请求）

如果不想发额外请求，可以用控制台支持的%c占位符添加样式，模拟原生404日志的样式：

import { useEffect } from 'react'

function NotFoundPage() {
  useEffect(() => {
    console.error(
      'GET %c%s%c 404 (Not Found)',
      'color: #ff4d4f; font-weight: bold;',
      window.location.href,
      'color: inherit; font-weight: normal;'
    )
  }, [])

  return <div>404 页面不存在</div>
}

export default NotFoundPage