Add error boundary on widget renderer and minor widget seed fix (#17058)

closes https://github.com/twentyhq/twenty/issues/16896 and
https://github.com/twentyhq/core-team-issues/issues/2050

should error be Invalid Configuration or something else?

packages/twenty-front/src/modules/page-layout/widgets/components/PageLayoutWidgetInvalidConfigDisplay.tsx

@@ -0,0 +1,31 @@
+import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+import { AppTooltip, Status } from 'twenty-ui/display';
+
+const StyledInvalidConfigContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
+
+export const PageLayoutWidgetInvalidConfigDisplay = () => {
+  const widget = useCurrentWidget();
+  const tooltipId = `widget-invalid-config-tooltip-${widget.id}`;
+
+  const text = t`Invalid Configuration`;
+  const tooltipContent = t`Invalid configuration. Click edit to configure this widget.`;
+
+  return (
+    <StyledInvalidConfigContainer>
+      <div id={tooltipId}>
+        <Status color="red" text={text} />
+      </div>
+      <AppTooltip
+        anchorSelect={`#${tooltipId}`}
+        content={tooltipContent}
+        place="top"
+      />
+    </StyledInvalidConfigContainer>
+  );
+};

packages/twenty-front/src/modules/page-layout/widgets/components/PageLayoutWidgetNoDataDisplay.tsx

@@ -1,8 +1,14 @@
 import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
+import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { AppTooltip, Status } from 'twenty-ui/display';
 import { WidgetType } from '~/generated/graphql';
 
+const StyledNoDataContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
 export const PageLayoutWidgetNoDataDisplay = () => {
   const widget = useCurrentWidget();
   const tooltipId = `widget-incomplete-tooltip-${widget.id}`;
@@ -14,7 +20,7 @@ export const PageLayoutWidgetNoDataDisplay = () => {
       : t`No data available. Click edit to configure this widget.`;
 
   return (
-    <>
+    <StyledNoDataContainer>
       <div id={tooltipId}>
         <Status color="red" text={text} />
       </div>
@@ -23,6 +29,6 @@ export const PageLayoutWidgetNoDataDisplay = () => {
         content={tooltipContent}
         place="top"
       />
-    </>
+    </StyledNoDataContainer>
   );
 };

packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx

@@ -8,6 +8,7 @@ import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pa
 import { pageLayoutResizingWidgetIdComponentState } from '@/page-layout/states/pageLayoutResizingWidgetIdComponentState';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { PageLayoutWidgetForbiddenDisplay } from '@/page-layout/widgets/components/PageLayoutWidgetForbiddenDisplay';
+import { PageLayoutWidgetInvalidConfigDisplay } from '@/page-layout/widgets/components/PageLayoutWidgetInvalidConfigDisplay';
 import { WidgetContentRenderer } from '@/page-layout/widgets/components/WidgetContentRenderer';
 import { useIsCurrentWidgetLastOfTab } from '@/page-layout/widgets/hooks/useIsCurrentWidgetLastOfTab';
 import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
@@ -26,6 +27,7 @@ import { useSetRecoilComponentFamilyState } from '@/ui/utilities/state/component
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { type MouseEvent } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { IconLock } from 'twenty-ui/display';
 import { WidgetType } from '~/generated/graphql';
 
@@ -155,7 +157,13 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
         )}
 
         <WidgetCardContent variant={variant}>
-          {hasAccess && <WidgetContentRenderer widget={widget} />}
+          {hasAccess && (
+            <ErrorBoundary
+              FallbackComponent={PageLayoutWidgetInvalidConfigDisplay}
+            >
+              <WidgetContentRenderer widget={widget} />
+            </ErrorBoundary>
+          )}
           {!hasAccess && (
             <StyledNoAccessContainer>
               <IconLock

packages/twenty-server/src/engine/workspace-manager/dev-seeder/core/utils/get-page-layout-widget-data-seeds-v2.util.ts

@@ -182,6 +182,7 @@ export const getPageLayoutWidgetDataSeedsV2 = (
             aggregateFieldMetadataId: companyIdFieldId,
             aggregateOperation: AggregateOperations.COUNT,
             groupByFieldMetadataId: companyLinkedinLinkFieldId,
+            groupBySubFieldName: 'primaryLinkUrl',
             orderBy: GraphOrderBy.VALUE_DESC,
             displayDataLabel: true,
             timezone: 'UTC',