@scm-manager/ui-components 4.0.0-REACT19-20251104-141645 → 4.0.0-REACT19-20251104-145242

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "4.0.0-REACT19-20251104-141645",
+  "version": "4.0.0-REACT19-20251104-145242",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -34,8 +34,8 @@
     "@scm-manager/eslint-config": "^2.18.2",
     "@scm-manager/prettier-config": "^2.12.0",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT19-20251104-141645",
-    "@scm-manager/ui-types": "4.0.0-REACT19-20251104-141645",
+    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT19-20251104-145242",
+    "@scm-manager/ui-types": "4.0.0-REACT19-20251104-145242",
     "@storybook/addon-actions": "^9.0.8",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -66,9 +66,9 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "4.0.0-REACT19-20251104-141645",
-    "@scm-manager/ui-core": "4.0.0-REACT19-20251104-141645",
-    "@scm-manager/ui-extensions": "4.0.0-REACT19-20251104-141645",
+    "@scm-manager/ui-api": "4.0.0-REACT19-20251104-145242",
+    "@scm-manager/ui-core": "4.0.0-REACT19-20251104-145242",
+    "@scm-manager/ui-extensions": "4.0.0-REACT19-20251104-145242",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "2.6.0",

package/src/ErrorBoundary.tsx

@@ -15,26 +15,34 @@
  */
 
 import React, { FC, ReactNode, useEffect } from "react";
-import { isRouteErrorResponse, useLocation, useRouteError } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { MissingLinkError, urls, useIndexLink } from "@scm-manager/ui-api";
-import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
+import { ErrorBoundary as ReactErrorBoundary, FallbackProps } from "react-error-boundary";
 import { useDocumentTitle } from "@scm-manager/ui-core";
 import ErrorNotification from "./ErrorNotification";
 import ErrorPage from "./ErrorPage";
 import { Subtitle, Title } from "./layout";
 import Icon from "./Icon";
 
-type ErrorDisplayProps = {
+type ErrorState = {
   error: Error;
-  errorInfo?: { componentStack?: string }; // Optional gemacht
-  fallback?: React.ComponentType<{ error: Error }>;
 };
 
-type GlobalErrorBoundaryProps = {
-  fallback?: React.ComponentType<{ error: Error }>;
+type ExportedProps = {
+  fallback?: React.ComponentType<ErrorState>;
+  children?: ReactNode;
+};
+
+type ErrorDisplayProps = {
+  error: Error;
+  // react-error-boundary does not pass errorInfo to the fallback component by default
+  // for performance reasons, but it can be logged via the `onError` prop.
+  // We keep it in the signature for compatibility with the custom fallback prop.
+  errorInfo?: { componentStack: string };
+  fallback?: React.ComponentType<ErrorState>;
 };
 
 const RedirectIconContainer = styled.div`
@@ -44,7 +52,6 @@ const RedirectIconContainer = styled.div`
 const RedirectPage: FC = () => {
   const [t] = useTranslation("commons");
   useDocumentTitle(t("errorNotification.prefix"));
-
   return (
     <section className="section">
       <div className="container">
@@ -65,7 +72,7 @@ const RedirectPage: FC = () => {
   );
 };
 
-const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, fallback: FallbackComponent }) => {
+const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: FallbackComponent }) => {
   const loginLink = useIndexLink("login");
   const [t] = useTranslation("commons");
   const location = useLocation();
@@ -80,47 +87,41 @@ const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, fallback: FallbackComponen
   if (isMissingLink) {
     if (loginLink) {
       return <RedirectPage />;
-    } else {
-      return (
-        <ErrorPage error={error} title={t("errorNotification.prefix")} subtitle={t("errorNotification.forbidden")} />
-      );
     }
+    return (
+      <ErrorPage error={error} title={t("errorNotification.prefix")} subtitle={t("errorNotification.forbidden")} />
+    );
   }
 
+  const fallbackProps = {
+    error,
+    errorInfo,
+  };
+
   if (FallbackComponent) {
-    return <FallbackComponent error={error} />;
+    return <FallbackComponent {...fallbackProps} />;
   }
-
   return <ErrorNotification error={error} />;
 };
 
-const ErrorBoundary: FC<GlobalErrorBoundaryProps & { children?: ReactNode }> = ({ fallback, children }) => {
-  const rawError = useRouteError();
+const ErrorBoundary: FC<ExportedProps> = ({ children, fallback }) => {
   const location = useLocation();
 
-  if (!rawError) {
-    const ErrorBoundaryFallback = ({ error }: { error: Error }) => (
-      <ErrorDisplay error={error} errorInfo={{ componentStack: "" }} fallback={fallback} />
-    );
-
-    return (
-      <ReactErrorBoundary resetKeys={[location.pathname]} FallbackComponent={ErrorBoundaryFallback}>
-        {children}
-      </ReactErrorBoundary>
-    );
-  }
-
-  let error: Error;
-
-  if (isRouteErrorResponse(rawError)) {
-    error = new Error(`${rawError.status} ${rawError.statusText}`);
-  } else if (rawError instanceof Error) {
-    error = rawError;
-  } else {
-    error = new Error(rawError ? String(rawError) : "Unknown Error");
-  }
+  const ErrorBoundaryFallback = ({ error }: FallbackProps) => (
+    <ErrorDisplay
+      error={error}
+      // For compatibility with potential custom fallbacks that expect errorInfo.
+      // The actual component stack is available in the `onError` callback below.
+      errorInfo={{ componentStack: "" }}
+      fallback={fallback}
+    />
+  );
 
-  return <ErrorDisplay error={error} errorInfo={{ componentStack: "Loader/Action Error" }} fallback={fallback} />;
+  return (
+    <ReactErrorBoundary resetKeys={[location.pathname]} FallbackComponent={ErrorBoundaryFallback}>
+      {children}
+    </ReactErrorBoundary>
+  );
 };
 
 export default ErrorBoundary;