feat(insights): add error boundary to insight card (#22949)

PostHog · Jun 13, 2024 · 86080cf · 86080cf
1 parent 2fa4482
commit 86080cf
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 57 deletions.
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png
diff --git 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
@@ -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
@@ -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}
         >
-            <BindLogic logic={insightLogic} props={insightLogicProps}>
-                <InsightMeta
-                    insight={insight}
-                    ribbonColor={ribbonColor}
-                    dashboardId={dashboardId}
-                    updateColor={updateColor}
-                    removeFromDashboard={removeFromDashboard}
-                    deleteWithUndo={deleteWithUndo}
-                    refresh={refresh}
-                    loading={loadingQueued || loading}
-                    rename={rename}
-                    duplicate={duplicate}
-                    moveToDashboard={moveToDashboard}
-                    areDetailsShown={areDetailsShown}
-                    setAreDetailsShown={setAreDetailsShown}
-                    showEditingControls={showEditingControls}
-                    showDetailsControls={showDetailsControls}
-                    moreButtons={moreButtons}
-                />
-                {legacyInsight.query || useQueryDashboardCards ? (
-                    <div className="InsightCard__viz">
-                        <Query
-                            query={insight.query}
-                            cachedResults={legacyInsight}
-                            context={{
-                                insightProps: insightLogicProps,
-                            }}
-                            stale={stale}
-                            readOnly
-                            embedded
-                        />
-                    </div>
-                ) : (
-                    <FilterBasedCardContent
-                        insight={legacyInsight}
-                        insightProps={insightLogicProps}
-                        loading={loading}
-                        stale={stale}
+            <ErrorBoundary>
+                <BindLogic logic={insightLogic} props={insightLogicProps}>
+                    <InsightMeta
+                        insight={insight}
+                        ribbonColor={ribbonColor}
+                        dashboardId={dashboardId}
+                        updateColor={updateColor}
+                        removeFromDashboard={removeFromDashboard}
+                        deleteWithUndo={deleteWithUndo}
+                        refresh={refresh}
+                        loading={loadingQueued || loading}
+                        rename={rename}
+                        duplicate={duplicate}
+                        moveToDashboard={moveToDashboard}
+                        areDetailsShown={areDetailsShown}
                         setAreDetailsShown={setAreDetailsShown}
-                        apiErrored={apiErrored}
-                        timedOut={timedOut}
-                        empty={
-                            legacyInsight.filters.insight === InsightType.FUNNELS && !hasFunnelResults && !apiErrored
-                        }
-                        tooFewFunnelSteps={
-                            legacyInsight.filters.insight === InsightType.FUNNELS && !isFunnelWithEnoughSteps
-                        }
-                        validationError={validationError}
+                        showEditingControls={showEditingControls}
+                        showDetailsControls={showDetailsControls}
+                        moreButtons={moreButtons}
                     />
+                    {legacyInsight.query || useQueryDashboardCards ? (
+                        <div className="InsightCard__viz">
+                            <Query
+                                query={insight.query}
+                                cachedResults={legacyInsight}
+                                context={{
+                                    insightProps: insightLogicProps,
+                                }}
+                                stale={stale}
+                                readOnly
+                                embedded
+                            />
+                        </div>
+                    ) : (
+                        <FilterBasedCardContent
+                            insight={legacyInsight}
+                            insightProps={insightLogicProps}
+                            loading={loading}
+                            stale={stale}
+                            setAreDetailsShown={setAreDetailsShown}
+                            apiErrored={apiErrored}
+                            timedOut={timedOut}
+                            empty={
+                                legacyInsight.filters.insight === InsightType.FUNNELS &&
+                                !hasFunnelResults &&
+                                !apiErrored
+                            }
+                            tooFewFunnelSteps={
+                                legacyInsight.filters.insight === InsightType.FUNNELS && !isFunnelWithEnoughSteps
+                            }
+                            validationError={validationError}
+                        />
+                    )}
+                </BindLogic>
+                {showResizeHandles && (
+                    <>
+                        {canResizeWidth ? <ResizeHandle1D orientation="vertical" /> : null}
+                        <ResizeHandle1D orientation="horizontal" />
+                        {canResizeWidth ? <ResizeHandle2D /> : null}
+                    </>
                 )}
-            </BindLogic>
-            {showResizeHandles && (
-                <>
-                    {canResizeWidth ? <ResizeHandle1D orientation="vertical" /> : null}
-                    <ResizeHandle1D orientation="horizontal" />
-                    {canResizeWidth ? <ResizeHandle2D /> : null}
-                </>
-            )}
-            {children /* Extras, such as resize handles */}
+                {children /* Extras, such as resize handles */}
+            </ErrorBoundary>
         </div>
     )
 }