[bugfix] Plugins: Add error handling. when error occurred while rendering a plugin, set status disabled and an error.

src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx

@@ -105,7 +105,12 @@ const PluginDownloadContainer = () => {
                         </div>
                         <div className={styles.plugin_info_wrapper}>
                             {plugin.is_error ? (
-                                <p style={{ color: "red" }}>Error: {plugin.error_message}</p>
+                                <div>
+                                    <p style={{ color: "red" }}>{t(`plugin_notifications.${plugin.error_message_type}`)}</p>
+                                    <p style={{ color: "red" }}>plugin_version: {plugin.downloaded_plugin_info.plugin_version}</p>
+                                    <p style={{ color: "red" }}>min_supported_vrct_version: {plugin.downloaded_plugin_info.min_supported_vrct_version}</p>
+                                    <p style={{ color: "red" }}>max_supported_vrct_version: {plugin.downloaded_plugin_info.max_supported_vrct_version}</p>
+                                </div>
                             ) : (
                                 <PluginsControlComponent
                                     variable_state={variable_state}

src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss

@@ -27,6 +27,7 @@
     flex-direction: column;
     gap: 0.4rem;
     max-width: 50%;
+    flex-shrink: 0;
 }
 
 .plugin_info_wrapper {

src-ui/app/main_page/main_section/PluginHost.jsx

@@ -1,14 +1,28 @@
-import React from "react";
+import { usePlugins } from "@logics_configs";
+import { ErrorBoundary } from "react-error-boundary";
 
-export const PluginHost = ({render_components}) => {
+export const PluginHost = ({ render_components }) => {
+    const { setErrorPlugin } = usePlugins();
 
     return (
         <>
-            {render_components
-                .map((plugin, index) => {
-                    const PluginComponent = plugin.component;
-                    return PluginComponent ? <PluginComponent key={index} /> : null;
-                })}
+            {render_components.map((plugin, index) => {
+                const PluginComponent = plugin.component;
+                const plugin_id = plugin.plugin_id;
+
+                return PluginComponent ? (
+                    <ErrorBoundary
+                        key={plugin_id || index}
+                        fallbackRender={() => null}
+                        onError={(_error, _info) => {
+                            // Disable the plugin on error
+                            setErrorPlugin(plugin_id, "disabled_due_to_an_error");
+                        }}
+                    >
+                        <PluginComponent />
+                    </ErrorBoundary>
+                ) : null;
+            })}
         </>
     );
 };

src-ui/app/others/snackbar_controller/SnackbarController.jsx

@@ -69,14 +69,14 @@ export const SnackbarController = () => {
             }, 100);
         };
 
-        setContainerKey(prevKey => prevKey + 1);
+        // setContainerKey(prevKey => prevKey + 1);
         asyncShowNotification();
 
     }, [settings]);
 
     return (
         <ToastContainer
-            key={containerKey}
+            // key={containerKey}
             position="bottom-left"
             transition={CustomTransition}
             hideProgressBar={false}