当前位置：首页 > news >正文

React SSR Setup错误处理：构建健壮的React SSR应用的错误边界策略

news 2026/6/23 17:18:04

React SSR Setup错误处理：构建健壮的React SSR应用的错误边界策略

【免费下载链接】react-ssr-setupReact Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties项目地址: https://gitcode.com/gh_mirrors/re/react-ssr-setup

在React服务端渲染(SSR)应用开发中，错误处理是确保应用稳定性和用户体验的关键环节。React SSR Setup作为一个集成了Webpack 4、Babel 7、TypeScript和CSS Modules的现代化React启动项目，提供了多种错误处理机制，帮助开发者构建更健壮的应用。本文将详细介绍如何利用React SSR Setup中的错误处理策略，有效捕获和处理客户端与服务端的各类错误。

服务端错误处理中间件

React SSR Setup在服务端实现了专门的错误处理中间件，位于src/server/middleware/errorHandler.ts。这个中间件采用Express标准的错误处理函数格式，能够捕获并处理服务端渲染过程中发生的错误。

const errorHandler = (err: Error, _req: any, res: Response, _next: any) => res.status(404).json({ status: 'error', message: err.message, stack: process.env.NODE_ENV === 'development' && (err.stack || '').split('\n') .map((line: string) => line.trim()) .map((line: string) => line.split(path.sep).join('/')) .map((line: string) => line.replace(process.cwd().split(path.sep).join('/'), '.')), });

该中间件的主要功能包括：

统一返回错误状态码和消息
在开发环境下提供格式化的错误堆栈信息
对路径进行标准化处理，使错误信息更易读

要使用这个中间件，只需在Express应用中通过app.use(errorHandler)进行注册，如src/server/index.ts中所示。

客户端错误边界实现

虽然React SSR Setup项目中没有专门的ErrorBoundary组件文件，但我们可以基于React的错误边界API，在应用中实现客户端错误捕获。建议在src/shared/components/目录下创建一个ErrorBoundary组件，用于捕获并处理React组件渲染过程中的错误。

import React, { Component, ErrorInfo, ReactNode } from 'react'; interface Props { children: ReactNode; fallback?: ReactNode; } interface State { hasError: boolean; error?: Error; } class ErrorBoundary extends Component<Props, State> { public state: State = { hasError: false }; public static getDerivedStateFromError(error: Error): State { return { hasError: true, error }; } public componentDidCatch(error: Error, errorInfo: ErrorInfo): void { // 可以在这里记录错误日志 console.error("Error caught by ErrorBoundary:", error, errorInfo); } public render(): ReactNode { if (this.state.hasError) { return this.props.fallback || <div>Something went wrong.</div>; } return this.props.children; } } export default ErrorBoundary;

创建完成后，可以在src/shared/App.tsx中使用这个错误边界组件包裹整个应用，以捕获应用中任何地方的渲染错误。