feat(grid): adds "onError" prop to be able to call a function on grid…

src/index.tsx

@@ -6,7 +6,7 @@ import './test/theming-test.scss';
 import {
     config, enablePinnedToBodyConfig, disabledInitialFocusLocationConfig, enableAdditionalContentConfig,
     enableAdditionalContentWithFlexRowConfig, enableSymetric, enableTopLeftResponsiveSticky, enableTopLeftResponsiveStickyPinnedToBody,
-    enableBottomRightResponsiveSticky, enableBottomRightResponsiveStickyPinnedToBody, enableSpannedCells, disableVirtualScrolling
+    enableBottomRightResponsiveSticky, enableBottomRightResponsiveStickyPinnedToBody, enableSpannedCells, disableVirtualScrolling, errorHandler
 } from './test/testEnvConfig';
 
 let component = <ExtTestGrid
@@ -139,6 +139,14 @@ switch (window.location.pathname) {
         />;
         ExtTestGrid.displayName = 'DisabledVirtualScrolling';
         break;
+    case '/onErrorHandler':
+        component = <ExtTestGrid
+            component={ReactGrid}
+            config={errorHandler}
+            cellType={'header'}
+        />;
+        ExtTestGrid.displayName = 'onErrorHandler';
+        break;
     default:
         break;
 }

src/lib/Components/ErrorBoundary.tsx

@@ -1,12 +1,13 @@
-import React, { Component, ErrorInfo } from 'react';
+import React, { Component, ErrorInfo } from "react";
+import { GridErrorEventHandler } from "../Model/PublicModel";
 
 interface ErrorBoundaryState {
     error?: Error;
     errorInfo?: React.ErrorInfo;
     hasError: boolean;
 }
 
-export class ErrorBoundary extends Component<Record<string, unknown>, ErrorBoundaryState> {
+export class ErrorBoundary extends Component<Record<string, unknown> & { onError?: GridErrorEventHandler}, ErrorBoundaryState> {
 
     state: ErrorBoundaryState = {
         hasError: false,
@@ -22,15 +23,20 @@ export class ErrorBoundary extends Component<Record<string, unknown>, ErrorBound
 
     render(): React.ReactNode {
         const { hasError, errorInfo, error } = this.state;
-
         if (hasError) {
-            return (<>
-                <h1>{error?.message}</h1> <br /><br />
-                <details>
-                    {error?.stack}
-                    {errorInfo?.componentStack}
-                </details>
-            </>)
+            const errorHandlerResult = this.props.onError?.({ error, errorInfo } as { error: Error; errorInfo: ErrorInfo });
+            return errorHandlerResult ? (
+              errorHandlerResult
+            ) : (
+              <>
+                  <h1>{error?.message}</h1> <br />
+                  <br />
+                  <details>
+                      {error?.stack}
+                      {errorInfo?.componentStack}
+                  </details>
+              </>
+            );
         } else {
             return this.props.children;
         }

src/lib/Components/GridRenderer.tsx

@@ -6,13 +6,13 @@ import { useReactGridState } from './StateProvider';
 import { isBrowserFirefox } from '../Functions/firefox';
 
 export const GridRenderer: React.FC<GridRendererProps> = ({ eventHandlers, children }) => {
-    const { cellMatrix, props } = useReactGridState();
+    const { cellMatrix, props, onError } = useReactGridState();
     const sharedStyles = {
         width: props?.enableFullWidthHeader ? '100%' : cellMatrix.width,
         height: cellMatrix.height,
     };
     return (
-        <ErrorBoundary>
+        <ErrorBoundary onError={onError}>
             <div
                 className="reactgrid"
                 style={{

src/lib/Functions/getDerivedStateFromProps.ts

@@ -51,7 +51,9 @@ export function getDerivedStateFromProps(
     }
 
     state = stateDeriverWithProps(state)(appendStateFields);
-
+
+    state = stateDeriverWithProps(state)(onError);
+
     return state;
 }
 
@@ -83,6 +85,11 @@ function appendStateFields(
       enableRowSelection: !!props.enableRowSelection,
     };
   }
+
+  function onError(props: ReactGridProps,
+                   state: State): State {
+    return {...state, onError: props.onError};
+  }
 
 
 export const areFocusesDiff = (props: ReactGridProps, state: State): boolean => {

src/lib/Model/PublicModel.ts

@@ -11,6 +11,7 @@ import {
 } from './../CellTemplates';
 
 import { Range } from './Range';
+import { ErrorInfo, ReactNode } from "react";
 
 /**
  * `Range` is a class. This class represents a rectangular area with a width, height, upper-left position, and lower-right position.
@@ -27,6 +28,9 @@ export type SelectionMode =
     | 'column'
     | 'range'
 
+
+export type GridErrorEventHandler = ({error, errorInfo}:{error: Error, errorInfo: ErrorInfo}) => ReactNode | undefined | void | null;
+
 /**
  * `ReactGrid`'s component props
  * 
@@ -224,6 +228,8 @@ export interface ReactGridProps {
      * @returns {boolean} Return `true` to allow droping column at specific column
      */
     readonly canReorderRows?: (targetRowId: Id, rowIds: Id[], dropPosition: DropPosition) => boolean;
+
+    readonly onError?: GridErrorEventHandler
 }
 
 

src/lib/Model/State.ts

@@ -1,4 +1,4 @@
-import { CellTemplates, Cell, ReactGridProps, Compatible, Highlight, CellChange, Id, SelectionMode } from './PublicModel';
+import { CellTemplates, Cell, ReactGridProps, Compatible, Highlight, CellChange, Id, SelectionMode, GridErrorEventHandler } from './PublicModel';
 import { isBrowserIE } from '../Functions/internetExplorer';
 import { isBrowserEdge } from '../Functions/microsoftEdge';
 import { DefaultBehavior } from '../Behaviors/DefaultBehavior';
@@ -64,6 +64,7 @@ export interface State<TCellMatrix extends CellMatrix = CellMatrix, TBehavior ex
     readonly copyRange?: Range;
     readonly rightStickyColumns: number | undefined;
     readonly bottomStickyRows: number | undefined;
+    readonly onError?: GridErrorEventHandler;
 }
 
 export const defaultStateFields = {

src/test/TestGrid.tsx

@@ -546,7 +546,7 @@ export const TestGrid: React.FC<TestGridProps> = (props) => {
               <button onClick={handleClearSelections}>Clear Selections</button>
               {render && <Component
                   ref={reactGridRef}
-                  rows={rows}
+                  rows={config.rowsOverride ?? rows}
                   columns={columns}
                   initialFocusLocation={config.initialFocusLocation}
                   enableColumnResizeOnAllHeaders={config.enableColumnResizeOnAllHeaders}
@@ -581,6 +581,7 @@ export const TestGrid: React.FC<TestGridProps> = (props) => {
                   onSelectionChanged={handleSelectionChanged}
                   onSelectionChanging={handleSelectionChanging}
                   moveRightOnEnter={config.moveRightOnEnter}
+                  onError={config.onError}
               />}
               {config.additionalContent &&
                   <div style={{ height: `${config.rgViewportHeight}px`, backgroundColor: '#fafff3' }}>
@@ -673,6 +674,9 @@ export const TestGridOptionsSelect: React.FC = () => {
         <option value="/disableVirtualScrolling">
           Disable virtual scrolling
         </option>
+        <option value="/onErrorHandler">
+          onErrorHandler
+        </option>
       </select>
     </form>
   );

src/test/testEnvConfig.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CellLocation, Highlight, TextLabels } from '../core';
+import { CellLocation, Highlight, Row, TextLabels } from "../core";
 
 /**
  * All of the properties that cypress tests files can read
@@ -240,5 +240,12 @@ export interface TestConfig {
 
     fillViewport?: boolean;
     withDivComponentStyles: React.CSSProperties;
+    onError?: (context: {error:Error, errorInfo:React.ErrorInfo}) => void | React.ReactNode | undefined;
+    rowsOverride?: Row[]
+}
 
+export const errorHandler = {
+    ...config,
+    onError: (context: {error:Error, errorInfo:React.ErrorInfo}): string => `This could be custom: ${context?.error?.message}`,
+    rowsOverride: [{ rowId: 1, cells: [{type:'text'}]  }], //it causes grid to throw missing 'text' property
 }