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

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-162002",
   "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-162002",
+    "@scm-manager/ui-types": "4.0.0-REACT19-20251104-162002",
     "@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-162002",
+    "@scm-manager/ui-core": "4.0.0-REACT19-20251104-162002",
+    "@scm-manager/ui-extensions": "4.0.0-REACT19-20251104-162002",
     "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;

package/src/layout/Page.tsx

@@ -19,7 +19,6 @@ import classNames from "classnames";
 import styled from "styled-components";
 import Loading from "./../Loading";
 import { ErrorNotification, Subtitle, Title } from "@scm-manager/ui-core";
-import ErrorBoundary from "../ErrorBoundary";
 import PageActions from "./PageActions";
 
 type Props = {
@@ -118,10 +117,8 @@ const Page: FC<Props> = ({ title, afterTitle, subtitle, loading, error, showCont
     <section className="section">
       <div className="container">
         {renderPageHeader()}
-        <ErrorBoundary>
-          <ErrorNotification error={error} />
-          {renderContent()}
-        </ErrorBoundary>
+        <ErrorNotification error={error} />
+        {renderContent()}
       </div>
     </section>
   );

package/src/markdown/LazyMarkdownView.tsx

@@ -23,7 +23,6 @@ import remark2rehype from "remark-rehype";
 import rehype2react from "rehype-react";
 import gfm from "remark-gfm";
 import { BinderContext } from "@scm-manager/ui-extensions";
-import ErrorBoundary from "../ErrorBoundary";
 import { create as createMarkdownHeadingRenderer } from "./MarkdownHeadingRenderer";
 import { create as createMarkdownLinkRenderer } from "./MarkdownLinkRenderer";
 import { create as createMarkdownImageRenderer } from "./MarkdownImageRenderer";
@@ -74,7 +73,7 @@ const xmlMarkupSample = `\`\`\`xml
 </your>
 \`\`\``;
 
-const MarkdownErrorNotification: FC = () => {
+export const MarkdownErrorNotification: FC = () => {
   const [t] = useTranslation("commons");
   return (
     <Notification type="danger">
@@ -182,14 +181,14 @@ class LazyMarkdownView extends React.Component<Props, State> {
     if (!remarkRendererList.link) {
       // @ts-ignore
       const extensionPoints = this.context.getExtensions(
-        "markdown-renderer.link.protocol"
+        "markdown-renderer.link.protocol",
       ) as ProtocolLinkRendererExtension[];
       protocolLinkRendererExtensions = extensionPoints.reduce<ProtocolLinkRendererExtensionMap>(
         (prev, { protocol, renderer }) => {
           prev[protocol] = renderer;
           return prev;
         },
-        {}
+        {},
       );
       remarkRendererList.link = createMarkdownLinkRenderer(basePath, protocolLinkRendererExtensions);
     }
@@ -199,7 +198,7 @@ class LazyMarkdownView extends React.Component<Props, State> {
     }
 
     const remarkPlugins = [...mdastPlugins, createChangesetShortlinkParser(t), createValuelessTextAdapter()].map(
-      createMdastPlugin
+      createMdastPlugin,
     );
 
     let processor = unified()
@@ -224,7 +223,7 @@ class LazyMarkdownView extends React.Component<Props, State> {
           protocols: {
             href: Object.keys(protocolLinkRendererExtensions),
           },
-        })
+        }),
       )
       .use(rehype2react, {
         createElement: React.createElement,
@@ -235,14 +234,9 @@ class LazyMarkdownView extends React.Component<Props, State> {
     const renderedMarkdown: any = processor.processSync(content).result;
 
     return (
-      <ErrorBoundary fallback={MarkdownErrorNotification}>
-        <HorizontalScrollDiv
-          ref={(el) => this.setState({ contentRef: el })}
-          className={classNames("content", className)}
-        >
-          {renderedMarkdown}
-        </HorizontalScrollDiv>
-      </ErrorBoundary>
+      <HorizontalScrollDiv ref={(el) => this.setState({ contentRef: el })} className={classNames("content", className)}>
+        {renderedMarkdown}
+      </HorizontalScrollDiv>
     );
   }
 }