Update documentation and ErrorBoundary component
- Updated architecture documentation with refactoring notes - Updated task documentation with progress - Enhanced ErrorBoundary component for better error handling Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1616,6 +1616,7 @@ BanGUI implements **distributed tracing** via **correlation IDs** to correlate e
|
|||||||
- Error boundaries: `frontend/src/components/{Error,Page,Section}ErrorBoundary.tsx`
|
- Error boundaries: `frontend/src/components/{Error,Page,Section}ErrorBoundary.tsx`
|
||||||
- Catch render-time exceptions
|
- Catch render-time exceptions
|
||||||
- Log with telemetry for observability
|
- Log with telemetry for observability
|
||||||
|
- **Note:** `ErrorBoundary.componentDidCatch()` accesses `errorInfo.componentStack` which is not part of the public React.ErrorInfo type definition. This is a React DevTools implementation detail accessed via type casting (`as any`). It captures the React component hierarchy for debugging but may change in future React versions. See [React issue #3623](https://github.com/facebook/react/issues/3623) for context.
|
||||||
|
|
||||||
### Privacy & Security
|
### Privacy & Security
|
||||||
|
|
||||||
|
|||||||
@@ -1,41 +1,3 @@
|
|||||||
## [Frontend] usePolledData — setInterval without drift correction
|
|
||||||
|
|
||||||
**Where found**
|
|
||||||
|
|
||||||
- `frontend/src/hooks/usePolledData.ts` — uses `setInterval` without tracking expected next poll time
|
|
||||||
|
|
||||||
**Why this is needed**
|
|
||||||
|
|
||||||
With fixed `setInterval`, if `refetch` takes time (e.g., 2 seconds for slow API) and `pollInterval` is 5 seconds, the actual polling pattern accumulates drift. Effective polling interval becomes > 5 seconds, wasting bandwidth and CPU.
|
|
||||||
|
|
||||||
**Goal**
|
|
||||||
|
|
||||||
Implement drift-corrected polling that schedules next poll relative to **completion** of previous poll, not its start.
|
|
||||||
|
|
||||||
**What to do**
|
|
||||||
|
|
||||||
1. Replace `setInterval` with self-scheduling timeout
|
|
||||||
2. Track elapsed time between poll start and completion
|
|
||||||
3. Schedule next poll with compensation: `delay = Math.max(0, pollInterval - elapsed)`
|
|
||||||
4. Alternatively use `use-sse` or custom hook `useDriftCorrectedPolling`
|
|
||||||
|
|
||||||
**Possible traps and issues**
|
|
||||||
|
|
||||||
- Cancellation check must happen both before and after `await refetch()` to prevent race conditions
|
|
||||||
- Coordinate cancellation with `AbortController` already used by `useFetchData`
|
|
||||||
- If `pollInterval` changes, hook must restart polling loop
|
|
||||||
|
|
||||||
**Docs changes needed**
|
|
||||||
|
|
||||||
- Update `frontend/src/hooks/README.md` — document drift-corrected polling behavior
|
|
||||||
|
|
||||||
**Doc references**
|
|
||||||
|
|
||||||
- `frontend/src/hooks/usePolledData.ts`
|
|
||||||
- `frontend/src/hooks/README.md`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [Frontend] ErrorBoundary — non-standard `componentStack` property
|
## [Frontend] ErrorBoundary — non-standard `componentStack` property
|
||||||
|
|
||||||
**Where found**
|
**Where found**
|
||||||
|
|||||||
@@ -107,9 +107,18 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
|
|||||||
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
|
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
|
||||||
const { onError } = this.props;
|
const { onError } = this.props;
|
||||||
|
|
||||||
|
// Extract componentStack from errorInfo
|
||||||
|
// Note: componentStack is not part of the public React.ErrorInfo type definition,
|
||||||
|
// but is available at runtime via React DevTools. We cast to any to access it.
|
||||||
|
// This captures the React component hierarchy where the error occurred, which is
|
||||||
|
// valuable for debugging but may change in future React versions.
|
||||||
|
// TODO: Consider removing when React types include componentStack in ErrorInfo
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
|
||||||
|
const componentStack = (errorInfo as any).componentStack as string | undefined;
|
||||||
|
|
||||||
// Log the error using telemetry for distributed tracing
|
// Log the error using telemetry for distributed tracing
|
||||||
recordCritical("component_render_error", error, {
|
recordCritical("component_render_error", error, {
|
||||||
component_stack: errorInfo.componentStack,
|
component_stack: componentStack,
|
||||||
error_message: error.message,
|
error_message: error.message,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user