diff --git a/src/modules/core/components/placeholder/EmptyView.tsx b/src/modules/core/components/placeholder/EmptyView.tsx index 9f5c501a..827e414a 100644 --- a/src/modules/core/components/placeholder/EmptyView.tsx +++ b/src/modules/core/components/placeholder/EmptyView.tsx @@ -8,12 +8,13 @@ // adopted from: https://github.com/tachiyomiorg/tachiyomi/blob/master/app/src/main/java/eu/kanade/tachiyomi/widget/EmptyView.kt -import { useMemo } from 'react'; +import { useMemo, useState } from 'react'; import Typography from '@mui/material/Typography'; import { SxProps, Theme } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; +import Collapse from '@mui/material/Collapse'; const ERROR_FACES = ['(・o・;)', 'Σ(ಠ_ಠ)', 'ಥ_ಥ', '(˘・_・˘)', '(; ̄Д ̄)', '(・Д・。']; @@ -30,6 +31,82 @@ export interface EmptyViewProps { sx?: SxProps; } +const GRAPHQL_EXCEPTION_MESSAGE_REGEX = /(.*Exception while fetching data \(.*\) : .*)\r\n\r\n(.*)/s; + +const extractGraphqlExceptionInfo = ( + error: EmptyViewProps['messageExtra'], +): { + isGraphqlException: boolean; + graphqlError?: string; + graphqlStackTrace?: string; +} => { + if (typeof error !== 'string') { + return { isGraphqlException: false }; + } + + const regexMatch = error.match(GRAPHQL_EXCEPTION_MESSAGE_REGEX); + + const isGraphqlException = !!regexMatch; + if (!isGraphqlException) { + return { isGraphqlException: false }; + } + + const [, message, stackTrace] = regexMatch; + return { + isGraphqlException: true, + graphqlError: message, + graphqlStackTrace: stackTrace, + }; +}; + +const ExtraMessage = ({ messageExtra }: Pick) => { + const { t } = useTranslation(); + + const [showFullError, setShowFullError] = useState(false); + + const { isGraphqlException, graphqlError, graphqlStackTrace } = extractGraphqlExceptionInfo(messageExtra); + + if (!isGraphqlException) { + return ( + + {messageExtra} + + ); + } + + return ( + <> + + + {graphqlError}… + + + + + + {graphqlStackTrace} + + + + ); +}; + export function EmptyView({ message, messageExtra, retry, noFaces, sx }: EmptyViewProps) { const { t } = useTranslation(); @@ -57,9 +134,7 @@ export function EmptyView({ message, messageExtra, retry, noFaces, sx }: EmptyVi {message} - - {messageExtra} - + {retry && (