diff --git a/frontend/src/metabase/query_builder/components/VisualizationError.jsx b/frontend/src/metabase/query_builder/components/VisualizationError.jsx
index 1e205899726b458edb1401847516ff75dcdbbe7e..09c7b2664a87753568812d219f2327a5685c435f 100644
--- a/frontend/src/metabase/query_builder/components/VisualizationError.jsx
+++ b/frontend/src/metabase/query_builder/components/VisualizationError.jsx
@@ -63,6 +63,16 @@ class VisualizationError extends Component {
           />
         );
       }
+    } else if (error instanceof Error) {
+      return (
+        <div className={cx(className, "QueryError2 flex justify-center")}>
+          <div className="QueryError-image QueryError-image--queryError mr4" />
+          <div className="QueryError2-details">
+            <h1 className="text-bold">{t`There was a problem with this visualization`}</h1>
+            <ErrorDetails className="pt2" details={error} />
+          </div>
+        </div>
+      );
     } else if (
       card &&
       card.dataset_query &&
diff --git a/frontend/src/metabase/visualizations/visualizations/Scalar.jsx b/frontend/src/metabase/visualizations/visualizations/Scalar.jsx
index 3e9fef1851c3d4be41666b2b477aacf83dd5d905..0434651a98a10e54c46cc34d33e3d7408e2ff15b 100644
--- a/frontend/src/metabase/visualizations/visualizations/Scalar.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Scalar.jsx
@@ -206,7 +206,9 @@ export default class Scalar extends Component {
     // use the compact version of formatting if the component is narrower than
     // the cutoff and the formatted value is longer than the cutoff
     const displayCompact =
-      fullScalarValue.length > COMPACT_MIN_LENGTH && width < COMPACT_MAX_WIDTH;
+      fullScalarValue !== null &&
+      fullScalarValue.length > COMPACT_MIN_LENGTH &&
+      width < COMPACT_MAX_WIDTH;
     const displayValue = displayCompact ? compactScalarValue : fullScalarValue;
 
     const clicked = {
diff --git a/frontend/test/metabase/visualizations/visualizations/Scalar.unit.spec.js b/frontend/test/metabase/visualizations/visualizations/Scalar.unit.spec.js
index 20f09a9de07608de3db0442b38224bc5c3025518..b2840574bfb242ff0e4089e39c782624897858d8 100644
--- a/frontend/test/metabase/visualizations/visualizations/Scalar.unit.spec.js
+++ b/frontend/test/metabase/visualizations/visualizations/Scalar.unit.spec.js
@@ -51,4 +51,16 @@ describe("MetricForm", () => {
     );
     getByText("12.3k");
   });
+
+  it("should render null", () => {
+    const { getByText } = render(
+      <Scalar
+        isDashboard // displays title
+        series={series(null)}
+        settings={settings}
+        visualizationIsClickable={() => false}
+      />,
+    );
+    getByText("Scalar Title"); // just confirms that it rendered
+  });
 });