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 */} + ) }