feat(web): render React component stack when available

packages/nextclade-web/src/components/Error/ErrorBoundary.tsx

@@ -1,16 +1,39 @@
-import React, { ReactNode } from 'react'
-
+import React, { ReactNode, useState, useCallback, useMemo, ErrorInfo } from 'react'
 import { ErrorBoundary as ErrorBoundaryBase, FallbackProps } from 'react-error-boundary'
 import ErrorPage from 'src/pages/_error'
 
-export function ErrorFallback({ error }: FallbackProps) {
-  return <ErrorPage error={error} />
+export interface ExtendedFallbackProps extends FallbackProps {
+  errorInfo?: ErrorInfo
+}
+
+export function ErrorFallback({ error, errorInfo }: ExtendedFallbackProps) {
+  return <ErrorPage error={error} errorInfo={errorInfo} />
 }
 
 export interface ErrorBoundaryProps {
   children?: ReactNode
 }
 
 export function ErrorBoundary({ children }: ErrorBoundaryProps) {
-  return <ErrorBoundaryBase FallbackComponent={ErrorFallback}>{children}</ErrorBoundaryBase>
+  const [errorInfo, setErrorInfo] = useState<ErrorInfo | undefined>(undefined)
+
+  const FallbackComponent = useMemo(() => {
+    return function ErrorFallbackMemoized(props: FallbackProps) {
+      return <ErrorFallback {...props} errorInfo={errorInfo} />
+    }
+  }, [errorInfo])
+
+  const handleError = useCallback((_: Error, info: ErrorInfo) => {
+    setErrorInfo(info)
+  }, [])
+
+  const handleReset = useCallback(() => {
+    setErrorInfo(undefined)
+  }, [])
+
+  return (
+    <ErrorBoundaryBase FallbackComponent={FallbackComponent} onError={handleError} onReset={handleReset}>
+      {children}
+    </ErrorBoundaryBase>
+  )
 }

packages/nextclade-web/src/components/Error/ErrorContent.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { ErrorInfo, useCallback, useMemo, useState } from 'react'
 import { Button, Col, Row } from 'reactstrap'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import styled from 'styled-components'
@@ -56,7 +56,7 @@ export function ErrorContentMessage({ error }: { error: Error }) {
   return <ErrorGeneric error={error} />
 }
 
-export function ErrorContent(props: { error?: unknown; detailed?: boolean }) {
+export function ErrorContent(props: { error?: unknown; errorInfo?: ErrorInfo; detailed?: boolean }) {
   const { t } = useTranslationSafe()
   const error = useMemo(() => sanitizeError(props.error), [props.error])
 

packages/nextclade-web/src/components/Error/ErrorContentExplanation.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { ErrorInfo, useMemo } from 'react'
 
 import styled from 'styled-components'
 import { useTranslationSafe as useTranslation } from 'src/helpers/useTranslationSafe'
@@ -18,11 +18,15 @@ const ExplanationText = styled.section`
   hyphens: auto;
 `
 
-export function getErrorStackText(error: Error) {
+export function getErrorStackText(error?: Error) {
   return error?.stack?.replace(/webpack-internal:\/{3}\.\//g, '')?.replace(/https?:\/\/(.+):\d+\//g, '')
 }
 
-export function getErrorReportText(error: Error) {
+export function getComponentStackText(errorInfo?: ErrorInfo) {
+  return errorInfo?.componentStack.replace(/webpack-internal:\/{3}\.\//g, '')?.replace(/https?:\/\/(.+):\d+\//g, '')
+}
+
+export function getErrorReportText(error: Error, errorInfo?: ErrorInfo) {
   const bowser = typeof window !== 'undefined' ? Bowser.parse(window?.navigator?.userAgent) : 'N/A'
 
   return `
@@ -39,6 +43,10 @@ Browser details: ${JSON.stringify(bowser)}
 Call stack:
 
 ${getErrorStackText(error) ?? 'N/A'}
+
+Component stack:
+
+${getComponentStackText(errorInfo) ?? 'N/A'}
   `
 }
 

packages/nextclade-web/src/pages/_error.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { ErrorInfo, useMemo } from 'react'
 import type { NextPageContext } from 'next'
 import { Col, Container as ContainerBase, Row } from 'reactstrap'
 import get from 'lodash/get'
@@ -39,10 +39,11 @@ export const MainContent = styled.main`
 export interface ErrorPageProps {
   statusCode?: number
   title?: string
-  error?: Error | undefined
+  error?: Error
+  errorInfo?: ErrorInfo
 }
 
-function ErrorPage({ statusCode, title, error }: ErrorPageProps) {
+function ErrorPage({ statusCode, title, error, errorInfo }: ErrorPageProps) {
   const { t } = useTranslationSafe()
 
   const titleText = useMemo(() => {
@@ -64,11 +65,11 @@ function ErrorPage({ statusCode, title, error }: ErrorPageProps) {
     return (
       <Row noGutters>
         <Col>
-          <ErrorContent error={error} detailed />
+          <ErrorContent error={error} errorInfo={errorInfo} detailed />
         </Col>
       </Row>
     )
-  }, [error])
+  }, [error, errorInfo])
 
   return (
     <Layout>