Boundary updates (#11794)

* Boundary updates

* Add error code

docs/docs/faq.md

@@ -195,3 +195,14 @@ This means that either:
 - The docker user does not have write permission to the specified directory
 
 In either case, ensure that the directory is available *on your local machine* and the user account has the required permissions.
+
+
+## Error Rendering Component
+
+Sometimes, following a software update, you may find that certain components of the web interface are not rendering correctly, and presented with a message similar to the screenshow below:
+
+{{ image("faq/boundary.png", "Error Rendering Component") }}
+
+This is often due to a caching issue with your web browser. Try performing a hard refresh of the page to clear the cache, this should resolve the issue in most cases.
+
+If the problem persists, refer to the [troubleshooting guide](./troubleshooting.md) for further assistance.

docs/docs/settings/error_codes.md

@@ -105,6 +105,11 @@ A potentially critical mismatch between the backup environment and the current r
 
 While using [invoke](../start/invoke.md), this can be overridden with the `--restore-allow-newer-version` flag.
 
+#### INVE-E17
+**Error rendering component**
+
+An error occurred while rendering a component in the frontend. Typically this is caused by a browser caching issue, and can be resolved by clearing the browser cache and refreshing the page. If the issue persists, check the browser console for more information about the error.
+
 ### INVE-W (InvenTree Warning)
 Warnings - These are non-critical errors which should be addressed when possible.
 

src/frontend/lib/components/Boundary.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { Alert } from '@mantine/core';
+import { Alert, Stack } from '@mantine/core';
 import { ErrorBoundary, type FallbackRender } from '@sentry/react';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { type ReactNode, useCallback } from 'react';
@@ -11,9 +11,12 @@ export function DefaultFallback({
     <Alert
       color='red'
       icon={<IconExclamationCircle />}
-      title={`${t`Error rendering component`}: ${title}`}
+      title={`INVE-E17: ${t`Error rendering component`}: ${title}`}
     >
-      {t`An error occurred while rendering this component. Refer to the console for more information.`}
+      <Stack gap='xs'>
+        {t`An error occurred while rendering this component. Refer to the console for more information.`}
+        {t`Try reloading the page, or contact your administrator if the problem persists.`}
+      </Stack>
     </Alert>
   );
 }