Adjust error stack formatting (#6448)

* Adjust error stack formatting

* linting

packages/react-components/src/ErrorBoundary.tsx

@@ -20,6 +20,14 @@ interface State {
   prevTrigger: string | null;
 }
 
+function formatStack (stack = '<unknown>'): React.ReactElement | null {
+  return (
+    <>{stack.split('\n').map((line, index) =>
+      <div key={index}>{line}</div>
+    )}</>
+  );
+}
+
 // NOTE: This is the only way to do an error boundary, via extend
 class ErrorBoundary extends React.Component<Props> {
   public override state: State = { error: null, prevTrigger: null };
@@ -56,7 +64,7 @@ class ErrorBoundary extends React.Component<Props> {
         <article className='error extraMargin'>
           <p>{t<string>('Uncaught error. Something went wrong with the query and rendering of this component. Please supply all the details below when logging an issue, it may help in tracing the cause.')}</p>
           <p>{displayError.message}</p>
-          <p>{displayError.stack}</p>
+          {formatStack(displayError.stack)}
         </article>
       )
       : children;

packages/react-hooks/src/useNamedHook.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2021 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export function useNamedHook <T> (name: string, fn: (...args: any[]) => T, ...args: unknown[]): T {
+export function useNamedHook <T, F extends (...args: any[]) => T> (name: string, fn: F, ...args: Parameters<F>): T {
   try {
     return fn(...args);
   } catch (error) {