diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png
index c91ec8b5f49c0..b73c6bd9d0ab3 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png differ
diff --git a/frontend/src/layout/ErrorBoundary/ErrorBoundary.tsx b/frontend/src/layout/ErrorBoundary/ErrorBoundary.tsx
index 6ebefbbffa167..cb3212d21ab1e 100644
--- a/frontend/src/layout/ErrorBoundary/ErrorBoundary.tsx
+++ b/frontend/src/layout/ErrorBoundary/ErrorBoundary.tsx
@@ -5,7 +5,7 @@ import { ErrorBoundary as SentryErrorBoundary, getCurrentHub } from '@sentry/rea
import { HelpButton } from 'lib/components/HelpButton/HelpButton'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
-export function ErrorBoundary({ children }: { children: React.ReactElement }): JSX.Element {
+export function ErrorBoundary({ children }: { children?: React.ReactNode }): JSX.Element {
const isSentryInitialized = !!getCurrentHub().getClient()
return (
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
index 06a06efbe3ef1..bb076ad83273e 100644
--- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
+++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
@@ -23,6 +23,12 @@
z-index: var(--z-content-overlay);
content: '';
}
+
+ .ErrorBoundary {
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ }
}
.InsightCard__viz {
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
index b5f28aecac73f..ac78461acfccc 100644
--- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
+++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
@@ -27,6 +27,7 @@ import { Paths } from 'scenes/paths/Paths'
import { RetentionContainer } from 'scenes/retention/RetentionContainer'
import { ActionsHorizontalBar, ActionsLineGraph, ActionsPie } from 'scenes/trends/viz'
+import { ErrorBoundary } from '~/layout/ErrorBoundary'
import { themeLogic } from '~/layout/navigation-3000/themeLogic'
import { dataNodeLogic, DataNodeLogicProps } from '~/queries/nodes/DataNode/dataNodeLogic'
import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
@@ -296,65 +297,69 @@ function InsightCardInternal(
style={{ ...(divProps?.style ?? {}), ...(theme?.boxStyle ?? {}) }}
ref={ref}
>
-
-
- {legacyInsight.query || useQueryDashboardCards ? (
-
-
-
- ) : (
-
+
+
+ {legacyInsight.query || useQueryDashboardCards ? (
+
+
+
+ ) : (
+
+ )}
+
+ {showResizeHandles && (
+ <>
+ {canResizeWidth ? : null}
+
+ {canResizeWidth ? : null}
+ >
)}
-
- {showResizeHandles && (
- <>
- {canResizeWidth ? : null}
-
- {canResizeWidth ? : null}
- >
- )}
- {children /* Extras, such as resize handles */}
+ {children /* Extras, such as resize handles */}
+
)
}