Added error boundary to the ByAsset page. Added useRef to the SimpleTable utility.

imports/ui/pages/Assignments/ByAsset.jsx

@@ -30,6 +30,7 @@ import Tab from '@mui/material/Tab';
 import TabContext from '@mui/lab/TabContext';
 import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
+import {ErrorBoundary} from "react-error-boundary";
 
 const cssTwoColumnContainer = {
 	display: 'grid',
@@ -174,7 +175,8 @@ const AssignmentsByAsset = () => {
 		return (
 			<>
 				<ul>
-					{data.map((next, i) => (
+					<ErrorBoundary fallback={<li>Error</li>}>
+						{data && data.map && data.map((next, i) => (
 							<li key={next._id}>
 								{next.person && (
 									<>
@@ -198,6 +200,7 @@ const AssignmentsByAsset = () => {
 								{/*)}*/}
 							</li>
 						))}
+					</ErrorBoundary>
 				</ul>
 			</>
 		)

imports/ui/util/SimpleTable.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useRef, useState} from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -48,6 +48,7 @@ const cssTopControls = {
  */
 export default ({columns, rows, options}) => {
 	const [selected, setSelected] = useState(undefined);
+	const tableContainer = useRef(null)
 
 	let selectRow = (e, row) => {
 		setSelected(row);
@@ -67,6 +68,7 @@ export default ({columns, rows, options}) => {
 	
 	const addRow = () => {
 		setEdited({});
+		setTimeout(() => tableContainer.current.scrollTo({top: 0, left: 0, behavior: "smooth"}),0)
 	}
 	
 	let containerStyle = options.maxHeight ? {maxHeight: options.maxHeight} : {}
@@ -131,7 +133,7 @@ export default ({columns, rows, options}) => {
 				{options.add && <Button variant="text" className="button" onClick={addRow}>Add</Button>}
 				{options.remove && _.isFunction(options.remove) && <Button disabled={!selected} variant='text' className='button' onClick={() => {selected && options.remove(selected)}}>Remove</Button>}
 			</div>
-			<TableContainer className="simpleTable" component={Paper} style={containerStyle}>
+			<TableContainer ref={tableContainer} className="simpleTable" component={Paper} style={containerStyle}>
 				<Table size="small" aria-label="Table" tabIndex="0" onKeyDown={keyHandler}>
 					<TableHead className="sticky">
 						<TableRow>

package.json

@@ -30,6 +30,7 @@
     "mongodb": "^4.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "react-router-dom": "^6.3.0",
     "typescript": "^4.8.4",
     "umbrellajs": "^3.3.1",