more defensive coding around dayjs (#18723)

Author: vogievetsky

web-console/src/utils/date.ts

@@ -106,5 +106,9 @@ export function formatDate(value: string) {
     LocalStorageKeys.WEB_CONSOLE_CONFIGS,
   );
   const showLocalTime = webConsoleConfig?.showLocalTime;
-  return showLocalTime ? dayjs(value).format(DATE_FORMAT) : dayjs(value).toISOString();
+  try {
+    return showLocalTime ? dayjs(value).format(DATE_FORMAT) : dayjs(value).toISOString();
+  } catch {
+    return value;
+  }
 }

web-console/src/views/segments-view/segments-view.tsx

@@ -168,12 +168,16 @@ function segmentFiltersToExpression(filters: Filter[]): SqlExpression {
         if (modeAndNeedle.mode === '~') {
           return sqlQueryCustomTableFilter(filter);
         }
-        const internalFilter = { ...filter };
-        const formattedDate = formatDate(modeAndNeedle.needle);
-        const filterDate = dayjs(formattedDate).toISOString();
-        filter.value = combineModeAndNeedle(modeAndNeedle.mode, formattedDate);
-        internalFilter.value = combineModeAndNeedle(modeAndNeedle.mode, filterDate);
-        return sqlQueryCustomTableFilter(internalFilter);
+        try {
+          const internalFilter = { ...filter };
+          const formattedDate = formatDate(modeAndNeedle.needle);
+          const filterDate = dayjs(formattedDate).toISOString();
+          filter.value = combineModeAndNeedle(modeAndNeedle.mode, formattedDate);
+          internalFilter.value = combineModeAndNeedle(modeAndNeedle.mode, filterDate);
+          return sqlQueryCustomTableFilter(internalFilter);
+        } catch {
+          return sqlQueryCustomTableFilter(filter);
+        }
       }
       if (filter.id === 'shard_type') {
         // Special handling for shard_type that needs to be searched for in the shard_spec
@@ -743,8 +747,13 @@ export class SegmentsView extends React.PureComponent<SegmentsViewProps, Segment
             show: visibleColumns.shown('Time span'),
             id: 'time_span',
             className: 'padded',
-            accessor: ({ start, end }) =>
-              computeSegmentTimeSpan(dayjs(start).toISOString(), dayjs(end).toISOString()),
+            accessor: ({ start, end }) => {
+              try {
+                return computeSegmentTimeSpan(dayjs(start).toISOString(), dayjs(end).toISOString());
+              } catch {
+                return 'Invalid start or end';
+              }
+            },
             width: 100,
             sortable: false,
             filterable: false,