updated the trackError method and updated the components by using it …

…instead of throwing the error

assets/js/src/core/app/api/pimcore/tags.ts

@@ -107,6 +107,4 @@ const getElementDetailTag = (elementType: ElementType, id: number): Tag | undefi
   }
 
   trackError(new GeneralError(`Unknown element type: ${elementType}`))
-
-  return undefined
 }

assets/js/src/core/components/drag-and-drop/draggable.tsx

@@ -16,13 +16,14 @@ import { useDraggable } from '@dnd-kit/core'
 import { type DragAndDropInfo } from './context-provider'
 import { uuid } from '@Pimcore/utils/uuid'
 import { GlobalStyle } from './draggable.styles'
+import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
 
 interface DraggableProps {
   children: React.ReactNode
   info: DragAndDropInfo
 }
 
-function Draggable (props: DraggableProps): React.JSX.Element {
+function Draggable (props: DraggableProps): React.JSX.Element | null {
   const [id] = useState(uuid())
   const { attributes, listeners, setNodeRef } = useDraggable({
     id,
@@ -32,7 +33,9 @@ function Draggable (props: DraggableProps): React.JSX.Element {
   const Child = Children.only(props.children)
 
   if (!isValidElement(Child)) {
-    throw new Error('Children must be a valid react component')
+    trackError(new GeneralError('Children must be a valid react component'))
+
+    return null
   }
 
   const Component = Child.type

assets/js/src/core/components/drag-and-drop/droppable.tsx

@@ -18,6 +18,7 @@ import { useStyle } from './droppable.styles'
 import { DroppableContextProvider } from './droppable-context-provider'
 import { uuid } from '@Pimcore/utils/uuid'
 import cn from 'classnames'
+import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
 
 export interface DroppableContentProps {
   isDragActive: boolean
@@ -35,7 +36,7 @@ export interface DroppableProps {
   onDrop: (info: DragAndDropInfo) => void
 }
 
-export const Droppable = (props: DroppableProps): React.JSX.Element => {
+export const Droppable = (props: DroppableProps): React.JSX.Element | null => {
   const { styles } = useStyle()
   const context = useContext(DragAndDropInfoContext)
   const [isValidContext, setIsValidContext] = useState(false)
@@ -77,7 +78,9 @@ export const Droppable = (props: DroppableProps): React.JSX.Element => {
   const Child = Children.only(props.children)
 
   if (!isValidElement(Child)) {
-    throw new Error('Children must be a valid react component')
+    trackError(new GeneralError('Children must be a valid react component'))
+
+    return null
   }
 
   const Component = Child.type

assets/js/src/core/components/grid/columns/default-cell.tsx

@@ -23,6 +23,7 @@ import { useKeyboardNavigation } from '../keyboard-navigation/use-keyboard-navig
 import { usePrevious } from '@Pimcore/utils/hooks/use-previous'
 import { type ExtendedCellContext } from '../grid'
 import { useDynamicTypeResolver } from '@Pimcore/modules/element/dynamic-types/resolver/hooks/use-dynamic-type-resolver'
+import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
 
 export interface DefaultCellProps extends ExtendedCellContext {}
 
@@ -102,7 +103,7 @@ export const DefaultCell = ({ ...props }: DefaultCellProps): React.JSX.Element =
     }
 
     if (isEditable && table.options.meta?.onUpdateCellData === undefined) {
-      throw new Error('onUpdateCellData is required when using editable cells')
+      trackError(new GeneralError('onUpdateCellData is required when using editable cells'))
     }
 
     setIsInEditMode(true)

assets/js/src/core/components/grid/grid.tsx

@@ -37,6 +37,7 @@ import { GridRow } from './grid-cell/grid-row'
 import { SortButton, type SortDirection, SortDirections } from '../sort-button/sort-button'
 import { DynamicTypeRegistryProvider } from '@Pimcore/modules/element/dynamic-types/registry/provider/dynamic-type-registry-provider'
 import { type GridProps } from '@Pimcore/types/components/types'
+import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
 
 declare module '@tanstack/react-table' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -170,7 +171,7 @@ export const Grid = ({ enableMultipleRowSelection = false, modifiedCells = [], s
       for (const column of columns) {
         if (column.meta?.autoWidth === true) {
           if (autoWidthColumnFound) {
-            throw new Error('Only one column can have autoWidth set to true')
+            trackError(new GeneralError('Only one column can have autoWidth set to true'))
           }
           autoWidthColumnFound = true
         }

assets/js/src/core/components/sidebar/sidebar.tsx

@@ -14,6 +14,7 @@
 import { useStyle } from './sidebar.styles'
 import React, { isValidElement, useState } from 'react'
 import { type ISidebarButton, type ISidebarEntry } from '@Pimcore/modules/element/sidebar/sidebar-manager'
+import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
 
 interface SidebarProps {
   entries: ISidebarEntry[]
@@ -89,11 +90,11 @@ export const Sidebar = ({ entries, buttons = [], sizing = 'default', highlights
               const { component, key, ...props } = button
 
               if (!isValidElement(component)) {
-                throw new Error('SidebarButton must be a valid react component')
+                trackError(new GeneralError('SidebarButton must be a valid react component'))
               }
 
               const SidebarButton = component.type
-              const sidebarButtonProps = component.props as any
+              const sidebarButtonProps = component.props
 
               return (
                 <SidebarButton

assets/js/src/core/modules/app/component-registry/component-registry.ts

@@ -13,6 +13,7 @@
 
 import { injectable } from 'inversify'
 import type React from 'react'
+import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
 
 interface ComponentRegistryEntry<T> {
   name: string
@@ -33,7 +34,7 @@ export class ComponentRegistry implements ComponentRegistryInterface {
 
   register (component: ComponentRegistryEntry<any>): void {
     if (this.has(component.name)) {
-      throw new Error(`Component with the name "${component.name}" already exists. Use the override method to override it`)
+      trackError(new GeneralError(`Component with the name "${component.name}" already exists. Use the override method to override it`))
     }
 
     this.registry[component.name] = component
@@ -45,7 +46,7 @@ export class ComponentRegistry implements ComponentRegistryInterface {
 
   get<T>(name: string): ComponentRegistryEntry<T>['component'] {
     if (!this.has(name)) {
-      throw new Error(`No component with the name "${name}" found`)
+      trackError(new GeneralError(`No component with the name "${name}" found`))
     }
 
     return this.registry[name].component
@@ -57,7 +58,7 @@ export class ComponentRegistry implements ComponentRegistryInterface {
 
   override <T>(name: string, component: ComponentRegistryEntry<T>): void {
     if (!this.has(name)) {
-      throw new Error(`No component named "${name}" found to override`)
+      trackError(new GeneralError(`No component named "${name}" found to override`))
     }
 
     this.registry[name] = component

assets/js/src/core/modules/app/error-handler/error-handler.ts

@@ -17,10 +17,12 @@ interface IErrorContentProvider {
   getContent: () => string
 }
 
-const trackError = (data: IErrorContentProvider): void => {
+const trackError = (data: IErrorContentProvider): never => {
   const errorContent = data.getContent()
 
   ErrorModalService.showError(errorContent)
+
+  throw new Error(errorContent)
 }
 
 export default trackError

assets/js/src/core/modules/app/error-handler/index.ts

@@ -12,5 +12,6 @@
 */
 
 export { default } from './error-handler'
+
 export { default as ApiError } from './classes/api-error'
 export { default as GeneralError } from './classes/general-error'

assets/js/src/core/utils/date-time.ts

@@ -12,6 +12,7 @@
 */
 
 import i18n from 'i18next'
+import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
 
 interface IFormatDateTimeProps {
   timestamp: number | null
@@ -44,7 +45,9 @@ export function formatDateTime ({ timestamp, lng, timeStyle, dateStyle, options
       }
     )
   } catch (error) {
-    throw new Error(`Failed to format date time: ${error}`)
+    trackError(new GeneralError(`Failed to format date time: ${error}`))
+
+    return ''
   }
 }