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`
|
||||
- Catch render-time exceptions
|
||||
- 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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
**Where found**
|
||||
|
||||
@@ -107,9 +107,18 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
|
||||
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
|
||||
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
|
||||
recordCritical("component_render_error", error, {
|
||||
component_stack: errorInfo.componentStack,
|
||||
component_stack: componentStack,
|
||||
error_message: error.message,
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user