mirror of
https://github.com/clash-verge-rev/clash-verge-rev.git
synced 2026-01-29 08:45:41 +08:00
feat: migrate mihomo to use kode-bridge IPC on Windows and Unix (#4051)
* Refactor Mihomo API integration and remove crate_mihomo_api
- Removed the `mihomo_api` crate and its dependencies from the project.
- Introduced `IpcManager` for handling IPC communication with Mihomo.
- Implemented IPC methods for managing proxies, connections, and configurations.
- Updated `MihomoManager` to utilize `IpcManager` instead of the removed crate.
- Added platform-specific IPC socket path handling for macOS, Linux, and Windows.
- Cleaned up related tests and configuration files.
* fix: remove duplicate permission entry in desktop capabilities
* refactor: replace MihomoManager with IpcManager and remove Mihomo module
* fix: restore tempfile dependency in dev-dependencies
* fix: update kode-bridge dependency to use git source from the dev branch
* feat: migrate mihomo to use kode-bridge IPC on Windows
This commit implements a comprehensive migration from legacy service IPC to the kode-bridge library for Windows IPC communication. Key changes include:
Replace service_ipc with kode-bridge IpcManager for all mihomo communications
Simplify proxy commands using new caching mechanism with ProxyRequestCache
Add Windows named pipe (\.\pipe\mihomo) and Unix socket IPC endpoint configuration
Update Tauri permissions and dependencies (dashmap, tauri-plugin-notification)
Add IPC logging support and improve error handling
Fix Windows IPC path handling in directory utilities
This migration enables better cross-platform IPC support and improved performance for mihomo proxy core communication.
* doc: add IPC communication with Mihomo kernel, removing Restful API dependency
* fix: standardize logging type naming from IPC to Ipc for consistency
* refactor: clean up and optimize code structure across multiple components and services
- Removed unnecessary comments and whitespace in various files.
- Improved code readability and maintainability by restructuring functions and components.
- Updated localization files for consistency and accuracy.
- Enhanced performance by optimizing hooks and utility functions.
- General code cleanup in settings, pages, and services to adhere to best practices.
* fix: simplify URL formatting in test_proxy_delay method
* fix: update kode-bridge dependency to version 0.1.3 and change source to crates.io
* fix: update macOS target versions in development workflow
* Revert "fix: update macOS target versions in development workflow"
This reverts commit b9831357e4.
* feat: enhance IPC path handling for Unix systems and improve directory safety checks
* feat: add conditional compilation for Unix-specific IPC path handling
* chore: update cagro.lock
* feat: add external controller configuration and UI support
* Refactor proxy and connection management to use IPC-based commands
- Updated `get_proxies` function in `proxy.rs` to call the new IPC command.
- Renamed `get_refresh_proxies` to `get_proxies` in `ipc/general.rs` for consistency.
- Added new IPC commands for managing proxies, connections, and configurations in `cmds.ts`.
- Refactored API calls in various components to use the new IPC commands instead of HTTP requests.
- Improved error handling and response management in the new IPC functions.
- Cleaned up unused API functions in `api.ts` and redirected relevant calls to `cmds.ts`.
- Enhanced connection management features including health checks and updates for proxy providers.
* chore: update dependencies and improve error handling in IPC manager
* fix: downgrade zip dependency from 4.3.0 to 4.2.0
* feat: Implement traffic and memory data monitoring service
- Added `TrafficService` and `TrafficManager` to manage traffic and memory data collection.
- Introduced commands to get traffic and memory data, start and stop the traffic service.
- Integrated IPC calls for traffic and memory data retrieval in the frontend.
- Updated `AppDataProvider` and `EnhancedTrafficStats` components to utilize new data fetching methods.
- Removed WebSocket connections for traffic and memory data, replaced with IPC polling.
- Added logging for better traceability of data fetching and service status.
* refactor: unify external controller handling and improve IPC path resolution
* fix: replace direct IPC path retrieval with guard function for external controller
* fix: convert external controller IPC path to string for proper insertion in config map
* fix: update dependencies and improve IPC response handling
* fix: remove unnecessary unix conditional for ipc path import
* Refactor traffic and memory monitoring to use IPC stream; remove TrafficService and TrafficManager. Introduce new IPC-based data retrieval methods for traffic and memory, including formatted data and system overview. Update frontend components to utilize new APIs for enhanced data display and management.
* chore: bump crate rand version to 0.9.2
* feat: Implement enhanced traffic monitoring system with data compression and sampling
- Introduced `useTrafficMonitorEnhanced` hook for advanced traffic data management.
- Added `TrafficDataSampler` class for handling raw and compressed traffic data.
- Implemented reference counting to manage data collection based on component usage.
- Enhanced data validation with `SystemMonitorValidator` for API responses.
- Created diagnostic tools for monitoring performance and error tracking.
- Updated existing hooks to utilize the new enhanced monitoring features.
- Added utility functions for generating and formatting diagnostic reports.
* feat(ipc): improve URL encoding and error handling for IPC requests
- Add percent-encoding for URL paths to handle special characters properly
- Enhance error handling in update_proxy with proper logging
- Remove excessive debug logging to reduce noise
- Update kode-bridge dependency to v0.1.5
- Fix JSON parsing error handling in PUT requests
Changes include:
- Proper URL encoding for connection IDs, proxy names, and test URLs
- Enhanced error handling with fallback responses in updateProxy
- Comment out verbose debug logs in traffic monitoring and data validation
- Update dependency version for improved IPC functionality
* feat: major improvements in architecture, traffic monitoring, and data validation
* Refactor traffic graph components: Replace EnhancedTrafficGraph with EnhancedCanvasTrafficGraph, improve rendering performance, and enhance visual elements. Remove deprecated code and ensure compatibility with global data management.
* chore: update UPDATELOG.md for v2.4.0 release, refine traffic monitoring system details, and enhance IPC functionality
* chore: update UPDATELOG.md to reflect removal of deprecated MihomoManager and unify IPC control
* refactor: remove global traffic service testing method from cmds.ts
* Update src/components/home/enhanced-canvas-traffic-graph.tsx
* Update src/hooks/use-traffic-monitor-enhanced.ts
* Update src/components/layout/layout-traffic.tsx
* refactor: remove debug state management from LayoutTraffic component
---------
This commit is contained in:
Tunglies
342
src/components/common/traffic-error-boundary.tsx
Normal file
342
src/components/common/traffic-error-boundary.tsx
Normal file
@@ -0,0 +1,342 @@
|
||||
import React, { Component, ErrorInfo, ReactNode } from "react";
|
||||
import { Box, Typography, Button, Alert, Collapse } from "@mui/material";
|
||||
import {
|
||||
ErrorOutlineRounded,
|
||||
RefreshRounded,
|
||||
BugReportRounded,
|
||||
} from "@mui/icons-material";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
fallbackComponent?: ReactNode;
|
||||
onError?: (error: Error, errorInfo: ErrorInfo) => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
errorInfo: ErrorInfo | null;
|
||||
showDetails: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 流量统计专用错误边界组件
|
||||
* 处理图表和流量统计组件的错误，提供优雅的降级体验
|
||||
*/
|
||||
export class TrafficErrorBoundary extends Component<Props, State> {
|
||||
private retryCount = 0;
|
||||
private maxRetries = 3;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
errorInfo: null,
|
||||
showDetails: false,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): Partial<State> {
|
||||
// 更新状态以显示降级UI
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error("[TrafficErrorBoundary] 捕获到组件错误:", error, errorInfo);
|
||||
|
||||
this.setState({
|
||||
error,
|
||||
errorInfo,
|
||||
});
|
||||
|
||||
// 调用错误回调
|
||||
if (this.props.onError) {
|
||||
this.props.onError(error, errorInfo);
|
||||
}
|
||||
|
||||
// 发送错误到监控系统（如果有的话）
|
||||
this.reportError(error, errorInfo);
|
||||
}
|
||||
|
||||
private reportError = (error: Error, errorInfo: ErrorInfo) => {
|
||||
// 这里可以集成错误监控服务
|
||||
const errorReport = {
|
||||
message: error.message,
|
||||
stack: error.stack,
|
||||
componentStack: errorInfo.componentStack,
|
||||
timestamp: new Date().toISOString(),
|
||||
userAgent: navigator.userAgent,
|
||||
url: window.location.href,
|
||||
};
|
||||
|
||||
console.log("[TrafficErrorBoundary] 错误报告:", errorReport);
|
||||
|
||||
// TODO: 发送到错误监控服务
|
||||
// sendErrorReport(errorReport);
|
||||
};
|
||||
|
||||
private handleRetry = () => {
|
||||
if (this.retryCount < this.maxRetries) {
|
||||
this.retryCount++;
|
||||
console.log(
|
||||
`[TrafficErrorBoundary] 尝试重试 (${this.retryCount}/${this.maxRetries})`,
|
||||
);
|
||||
|
||||
this.setState({
|
||||
hasError: false,
|
||||
error: null,
|
||||
errorInfo: null,
|
||||
showDetails: false,
|
||||
});
|
||||
} else {
|
||||
console.warn("[TrafficErrorBoundary] 已达到最大重试次数");
|
||||
}
|
||||
};
|
||||
|
||||
private handleRefresh = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
private toggleDetails = () => {
|
||||
this.setState((prev) => ({ showDetails: !prev.showDetails }));
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
// 如果提供了自定义降级组件，使用它
|
||||
if (this.props.fallbackComponent) {
|
||||
return this.props.fallbackComponent;
|
||||
}
|
||||
|
||||
// 默认错误UI
|
||||
return (
|
||||
<TrafficErrorFallback
|
||||
error={this.state.error}
|
||||
errorInfo={this.state.errorInfo}
|
||||
showDetails={this.state.showDetails}
|
||||
canRetry={this.retryCount < this.maxRetries}
|
||||
retryCount={this.retryCount}
|
||||
maxRetries={this.maxRetries}
|
||||
onRetry={this.handleRetry}
|
||||
onRefresh={this.handleRefresh}
|
||||
onToggleDetails={this.toggleDetails}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 错误降级UI组件
|
||||
*/
|
||||
interface TrafficErrorFallbackProps {
|
||||
error: Error | null;
|
||||
errorInfo: ErrorInfo | null;
|
||||
showDetails: boolean;
|
||||
canRetry: boolean;
|
||||
retryCount: number;
|
||||
maxRetries: number;
|
||||
onRetry: () => void;
|
||||
onRefresh: () => void;
|
||||
onToggleDetails: () => void;
|
||||
}
|
||||
|
||||
const TrafficErrorFallback: React.FC<TrafficErrorFallbackProps> = ({
|
||||
error,
|
||||
errorInfo,
|
||||
showDetails,
|
||||
canRetry,
|
||||
retryCount,
|
||||
maxRetries,
|
||||
onRetry,
|
||||
onRefresh,
|
||||
onToggleDetails,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
minHeight: 200,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
border: "1px dashed",
|
||||
borderColor: "error.main",
|
||||
borderRadius: 2,
|
||||
bgcolor: "error.light",
|
||||
color: "error.contrastText",
|
||||
}}
|
||||
>
|
||||
<ErrorOutlineRounded sx={{ fontSize: 48, mb: 2, color: "error.main" }} />
|
||||
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{t("Traffic Statistics Error")}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
textAlign="center"
|
||||
sx={{ mb: 2 }}
|
||||
>
|
||||
{t(
|
||||
"The traffic statistics component encountered an error and has been disabled to prevent crashes.",
|
||||
)}
|
||||
</Typography>
|
||||
|
||||
<Alert severity="error" sx={{ mb: 2, maxWidth: 400 }}>
|
||||
<Typography variant="body2">
|
||||
<strong>Error:</strong> {error?.message || "Unknown error"}
|
||||
</Typography>
|
||||
{retryCount > 0 && (
|
||||
<Typography variant="caption" display="block" sx={{ mt: 1 }}>
|
||||
{t("Retry attempts")}: {retryCount}/{maxRetries}
|
||||
</Typography>
|
||||
)}
|
||||
</Alert>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 1, mb: 2 }}>
|
||||
{canRetry && (
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
startIcon={<RefreshRounded />}
|
||||
onClick={onRetry}
|
||||
size="small"
|
||||
>
|
||||
{t("Retry")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button variant="outlined" onClick={onRefresh} size="small">
|
||||
{t("Refresh Page")}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="text"
|
||||
startIcon={<BugReportRounded />}
|
||||
onClick={onToggleDetails}
|
||||
size="small"
|
||||
>
|
||||
{showDetails ? t("Hide Details") : t("Show Details")}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Collapse in={showDetails} sx={{ width: "100%", maxWidth: 600 }}>
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: 1,
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
}}
|
||||
>
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
Error Details:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
component="pre"
|
||||
sx={{
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
fontFamily: "monospace",
|
||||
fontSize: "0.75rem",
|
||||
color: "text.secondary",
|
||||
}}
|
||||
>
|
||||
{error?.stack}
|
||||
</Typography>
|
||||
|
||||
{errorInfo?.componentStack && (
|
||||
<>
|
||||
<Typography variant="subtitle2" gutterBottom sx={{ mt: 2 }}>
|
||||
Component Stack:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
component="pre"
|
||||
sx={{
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
fontFamily: "monospace",
|
||||
fontSize: "0.75rem",
|
||||
color: "text.secondary",
|
||||
}}
|
||||
>
|
||||
{errorInfo.componentStack}
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Collapse>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 轻量级流量统计错误边界
|
||||
* 用于小型流量显示组件，提供最小化的错误UI
|
||||
*/
|
||||
export const LightweightTrafficErrorBoundary: React.FC<{
|
||||
children: ReactNode;
|
||||
}> = ({ children }) => {
|
||||
return (
|
||||
<TrafficErrorBoundary
|
||||
fallbackComponent={
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
minHeight: 60,
|
||||
bgcolor: "error.light",
|
||||
borderRadius: 1,
|
||||
color: "error.contrastText",
|
||||
}}
|
||||
>
|
||||
<ErrorOutlineRounded sx={{ mr: 1, fontSize: 20 }} />
|
||||
<Typography variant="caption">Traffic data unavailable</Typography>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</TrafficErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* HOC：为任何组件添加流量错误边界
|
||||
*/
|
||||
export function withTrafficErrorBoundary<P extends object>(
|
||||
WrappedComponent: React.ComponentType<P>,
|
||||
options?: {
|
||||
lightweight?: boolean;
|
||||
onError?: (error: Error, errorInfo: ErrorInfo) => void;
|
||||
},
|
||||
) {
|
||||
const WithErrorBoundaryComponent = (props: P) => {
|
||||
const ErrorBoundaryComponent = options?.lightweight
|
||||
? LightweightTrafficErrorBoundary
|
||||
: TrafficErrorBoundary;
|
||||
|
||||
return (
|
||||
<ErrorBoundaryComponent onError={options?.onError}>
|
||||
<WrappedComponent {...props} />
|
||||
</ErrorBoundaryComponent>
|
||||
);
|
||||
};
|
||||
|
||||
WithErrorBoundaryComponent.displayName = `withTrafficErrorBoundary(${WrappedComponent.displayName || WrappedComponent.name})`;
|
||||
|
||||
return WithErrorBoundaryComponent;
|
||||
}
|
||||
Reference in New Issue
Block a user