mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 12:45:23 +02:00
fix: resolve black screen caused by React hooks violation in WaterfallModal
Move useMemo before early return in WaterfallModal to comply with Rules of Hooks. Wrap App with ErrorBoundary so future render crashes show an error panel instead of a silent black screen. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
753b312412
commit
845a8e0ae6
@@ -11,9 +11,8 @@ interface WaterfallModalProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const WaterfallModal: React.FC<WaterfallModalProps> = ({ product, includeCOGS, onClose }) => {
|
export const WaterfallModal: React.FC<WaterfallModalProps> = ({ product, includeCOGS, onClose }) => {
|
||||||
if (!product) return null;
|
|
||||||
|
|
||||||
const data = useMemo(() => {
|
const data = useMemo(() => {
|
||||||
|
if (!product) return [];
|
||||||
const metrics = calculateProductMetrics(product, includeCOGS);
|
const metrics = calculateProductMetrics(product, includeCOGS);
|
||||||
|
|
||||||
let currentTotal = product.grossSales;
|
let currentTotal = product.grossSales;
|
||||||
@@ -67,6 +66,8 @@ export const WaterfallModal: React.FC<WaterfallModalProps> = ({ product, include
|
|||||||
}));
|
}));
|
||||||
}, [product, includeCOGS]);
|
}, [product, includeCOGS]);
|
||||||
|
|
||||||
|
if (!product) return null;
|
||||||
|
|
||||||
const metrics = calculateProductMetrics(product, includeCOGS);
|
const metrics = calculateProductMetrics(product, includeCOGS);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
|
import ErrorBoundary from './components/ErrorBoundary';
|
||||||
|
|
||||||
const rootElement = document.getElementById('root');
|
const rootElement = document.getElementById('root');
|
||||||
if (!rootElement) {
|
if (!rootElement) {
|
||||||
@@ -10,6 +11,8 @@ if (!rootElement) {
|
|||||||
const root = ReactDOM.createRoot(rootElement);
|
const root = ReactDOM.createRoot(rootElement);
|
||||||
root.render(
|
root.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
|
<ErrorBoundary>
|
||||||
<App />
|
<App />
|
||||||
|
</ErrorBoundary>
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
Reference in New Issue
Block a user