components.common.Fallback.tsx Maven / Gradle / Ivy

Go to download
import Report, { ReportLevel } from 'helpers/report';
import { useNotifier } from 'hooks/notification';
import { useTranslator } from 'hooks/translator';
import React, { useEffect, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import StackTrace, { StackFrame } from 'stacktrace-js';
import { SetState } from 'types/react';

import CloseIcon from '@mui/icons-material/Close';
import { Box, Link, Stack, Table, TableBody, TableCell } from '@mui/material';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import IconButton from '@mui/material/IconButton';
import { styled } from '@mui/material/styles';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';

import Loader from './Loader';
import MuiIcon from './MuiIcon';

type FallbackType = "component" | "page"

const Fallback = ({children, name, type = 'component'}: {children: React.ReactNode, name: string, type?: FallbackType}) => {

  const errorHandler = (error: any) => console.error("A fontend issue occured: %o", error)

  const fallback = ({error}: {error: any}) => {
    return 
  }

  return (
    
      {children}
    
  )
}

const Issue = ({name, error, type}: {name: string, error?: any, type: FallbackType}) => {
  const [open, setOpen] = React.useState(false);
  const {translator}    = useTranslator()
  const notifier        = useNotifier()
  const { t }           = useTranslator()
  const detailReport    = Report.error(Report.frontend, Report.code.frontend.Broken, {component: name || "unknown"})
  const report          = Report.from(error, translator,
    {
      verbose: "component '" + (name || "unknown") + "': " + detailReport.message,
      options: {component: name || "unknown" }
    }
  )

  const handleClickOpen = () => {
    setOpen(true);
  };

  useEffect(() => { 
    report.addToNotifier(notifier) 
  },[])

  return (
    
      
        {/* @ts-ignore */}
         theme.palette?.error?.main}}/>
        {report.message}
      
      { error instanceof Error
        ? 
          
            
          
        : null
      }
    
  )
}

const BootstrapDialog = styled(Dialog)(({ theme }) => ({
  '& .MuiDialogContent-root': {
    padding: theme.spacing(2),
  },
  '& .MuiDialogActions-root': {
    padding: theme.spacing(1),
  },
}));

const IssueDialog = ({open, setOpen, title, error}: {open:boolean, setOpen: SetState, title: string, error:Error} ) => {
  const {t} = useTranslator()

  const handleClose = () => {
    setOpen(false);
  };

  return (
    
    
      
        
          {`${t('issues.issue')} : ${error.message}`}
        
         theme.palette.grey[500],
          }}
        >
          
        
        
          
        
        
          
        
      
    
  );
}

const StacktraceTable = ({error}: {error: Error}) => {
  const { t } = useTranslator()
  const [stackframes, setStackFrames] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    StackTrace
      .fromError(error)
      .then(stackFrames => setStackFrames(stackFrames))
      .catch(function(err: Error) {
        console.log(err.message);
      });
  },[])

  useEffect(() => {
    setTimeout(() => {
      if (stackframes.length != 0)
        setLoading(false)}, 1000)
  }, [stackframes])

  if (loading)
    return 

  return (
    
        {stackframes.map((sf, index) => (
          
            
              
                {`${t('issues.at')} ${sf.getFunctionName()}`}
              
            
            
              
                {sf.getFileName()?.split(/[\\/]/).pop()}
              
            
            
              
                {`${sf.getLineNumber()}:${sf.getColumnNumber()}`}
              
            
          
        )
        )}
      
      
    
  )

  return {t('issues.nostacktrace')}
}

export default Fallback