diff --git a/web/src/components/dashboards/perses/variable-dropdowns.tsx b/web/src/components/dashboards/perses/variable-dropdowns.tsx
index 9d2b75d6..ea4b92b2 100644
--- a/web/src/components/dashboards/perses/variable-dropdowns.tsx
+++ b/web/src/components/dashboards/perses/variable-dropdowns.tsx
@@ -19,6 +19,7 @@ import {
   useVariableDefinitions,
 } from '@perses-dev/dashboards';
 import { useListVariablePluginValues, VariableOption } from '@perses-dev/plugin-system';
+import ErrorBoundary from '../../console/console-shared/error/error-boundary';
 
 /**
  * This file is approximately the equal of `perses/ui/dashboards/src/components/Variables/Variable`
@@ -108,8 +109,8 @@ function ListVariable({ name, id }: VariableDropdownProps) {
       children: string;
     }
   >(viewOptions, (option: VariableOption) => ({
-    value: option.label,
-    children: option.label,
+    value: option?.label,
+    children: option?.label,
   }));
 
   const title = definition?.spec.display?.name ?? name;
@@ -154,12 +155,19 @@ export const AllVariableDropdowns: React.FC = () => {
 export function VariableComponent({ name }: VariableProps) {
   const ctx = useVariableDefinitionAndState(name);
   const kind = ctx.definition?.kind;
+
+  let variableComponent = null;
+
   switch (kind) {
     // Openshift doesn't support this, so ignore for now
     // case 'TextVariable':
     // return <TextVariable name={name} source={source} />;
     case 'ListVariable':
-      return <ListVariable id={name} name={name} />;
+      variableComponent = <ListVariable id={name} name={name} />;
+  }
+
+  if (variableComponent) {
+    return <ErrorBoundary>{variableComponent}</ErrorBoundary>;
   }
 
   return <div>Unsupported Variable Kind: ${kind}</div>;