fix: handle a case when error has exotic shape and name is an object

lib/static/components/details.jsx

@@ -3,7 +3,8 @@
 import React, {useContext, useLayoutEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {isEmpty, isFunction} from 'lodash';
+import stringify from 'json-stringify-safe';
+import {isEmpty, isFunction, isPlainObject} from 'lodash';
 import {Disclosure} from '@gravity-ui/uikit';
 import {MeasurementContext} from './measurement-context';
 
@@ -28,8 +29,10 @@ export default function Details(props) {
             return null;
         }
 
-        const children = props.asHtml ? null : getContent();
-        const extraProps = props.asHtml ? {dangerouslySetInnerHTML: {__html: getContent()}} : {};
+        const content = getContent();
+        const isObjectContent = isPlainObject(content) && !React.isValidElement(content);
+        const children = props.asHtml ? null : isObjectContent ? stringify(content) : content;
+        const extraProps = props.asHtml ? {dangerouslySetInnerHTML: {__html: content}} : {};
 
         return <div className='details__content' {...extraProps}>
             {children}

lib/static/new-ui/components/ErrorInfo/index.tsx

@@ -4,9 +4,10 @@ import escapeHtml from 'escape-html';
 import React, {ReactNode} from 'react';
 
 import styles from './index.module.css';
+import stringify from 'json-stringify-safe';
 
 interface ErrorInfoProps {
-    name: string;
+    name: unknown;
     stack?: string;
     className?: string;
     style?: React.CSSProperties;
@@ -17,5 +18,15 @@ export function ErrorInfo(props: ErrorInfoProps): ReactNode {
         reset: ['eee', '00000000']
     });
 
-    return <div className={classNames(styles.code, props.className)} style={props.style} dangerouslySetInnerHTML={{__html: ansiHtml(escapeHtml(props.name + '\n' + props.stack))}}></div>;
+    let errorName = props.name;
+
+    if (typeof errorName !== 'string') {
+        try {
+            errorName = stringify(errorName);
+        } catch {
+            errorName = String(errorName);
+        }
+    }
+
+    return <div className={classNames(styles.code, props.className)} style={props.style} dangerouslySetInnerHTML={{__html: ansiHtml(escapeHtml(errorName + '\n' + props.stack))}}></div>;
 }

test/unit/lib/static/components/details.jsx

@@ -78,4 +78,32 @@ describe('<Details />', () => {
         const expectedHtml = '<div class="details__content">' + props.content + '</div>';
         assert.equal(component.container.querySelector('.details__content').parentNode.innerHTML, expectedHtml);
     });
+
+    it('should stringify plain object content', async () => {
+        const user = userEvent.setup();
+        const content = {foo: 'bar'};
+        content.self = content;
+        const props = {
+            title: 'some-title',
+            content: () => content
+        };
+
+        const component = render(<Details {...props} />);
+        await user.click(component.container.querySelector('.details__summary'));
+
+        assert.equal(component.container.querySelector('.details__content').textContent, '{"foo":"bar","self":"[Circular ~]"}');
+    });
+
+    it('should render react node content as is', async () => {
+        const user = userEvent.setup();
+        const props = {
+            title: 'some-title',
+            content: () => <span className="some-content">some content</span>
+        };
+
+        const component = render(<Details {...props} />);
+        await user.click(component.container.querySelector('.details__summary'));
+
+        assert.equal(component.container.querySelector('.some-content').textContent, 'some content');
+    });
 });