ArgsTable: Gracefully handle conditional args failures

lib/components/src/blocks/ArgsTable/ArgsTable.tsx

@@ -3,6 +3,7 @@ import pickBy from 'lodash/pickBy';
 import { styled, ignoreSsrWarning } from '@storybook/theming';
 import { opacify, transparentize, darken, lighten } from 'polished';
 import { includeConditionalArg } from '@storybook/csf';
+import { once } from '@storybook/client-logger';
 import { Icons } from '../../icon/icon';
 import { ArgRow } from './ArgRow';
 import { SectionRow } from './SectionRow';
@@ -372,6 +373,22 @@ const groupRows = (rows: ArgType, sort: SortType) => {
   return sorted;
 };
 
+/**
+ * Wrap CSF's `includeConditionalArg` in a try catch so that invalid
+ * conditionals don't break the entire UI. We can safely swallow the
+ * error because `includeConditionalArg` is also called in the preview
+ * in `prepareStory`, and that exception will be bubbled up into the
+ * UI in a red screen. Nevertheless, we log the error here just in case.
+ */
+const safeIncludeConditionalArg = (row: ArgType, args: Args, globals: Globals) => {
+  try {
+    return includeConditionalArg(row, args, globals);
+  } catch (err) {
+    once.warn(err.message);
+    return false;
+  }
+};
+
 /**
  * Display the props for a component as a props table. Each row is a collection of
  * ArgDefs, usually derived from docgen info for the component.
@@ -402,7 +419,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   const groups = groupRows(
     pickBy(
       rows,
-      (row) => !row?.table?.disable && includeConditionalArg(row, args || {}, globals || {})
+      (row) => !row?.table?.disable && safeIncludeConditionalArg(row, args || {}, globals || {})
     ),
     sort
   );