mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2024-12-24 10:11:53 +01:00
Catch component level errors at high level
This commit is contained in:
parent
62ad253c09
commit
6b2486f80d
@ -4,7 +4,7 @@ import './style/style.css';
|
||||
import './style/mobile.css';
|
||||
|
||||
import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
|
||||
import React from "react";
|
||||
import React, {useCallback} from "react";
|
||||
import {NightModeCss, ThemeContextProvider, ThemeCss} from "./hooks/themeHook";
|
||||
import axios from "axios";
|
||||
import ErrorView from "./views/ErrorView";
|
||||
@ -15,6 +15,7 @@ import {NavigationContextProvider} from "./hooks/navigationHook";
|
||||
import MainPageRedirect from "./components/navigation/MainPageRedirect";
|
||||
import {baseAddress, staticSite} from "./service/backendConfiguration";
|
||||
import {PageExtensionContextProvider} from "./hooks/pageExtensionHook";
|
||||
import ErrorBoundary from "./components/ErrorBoundary";
|
||||
|
||||
const PlayerPage = React.lazy(() => import("./views/layout/PlayerPage"));
|
||||
const PlayerOverview = React.lazy(() => import("./views/player/PlayerOverview"));
|
||||
@ -79,11 +80,16 @@ const ContextProviders = ({children}) => (
|
||||
</AuthenticationContextProvider>
|
||||
)
|
||||
|
||||
const Lazy = ({children}) => (
|
||||
<React.Suspense fallback={<></>}>
|
||||
{children}
|
||||
</React.Suspense>
|
||||
)
|
||||
const Lazy = ({children}) => {
|
||||
const fallbackFunction = useCallback((error) => <ErrorView error={error}/>, []);
|
||||
return (
|
||||
<React.Suspense fallback={<></>}>
|
||||
<ErrorBoundary fallbackFunction={fallbackFunction}>
|
||||
{children}
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
const getBasename = () => {
|
||||
if (baseAddress) {
|
||||
|
25
Plan/react/dashboard/src/components/ErrorBoundary.js
Normal file
25
Plan/react/dashboard/src/components/ErrorBoundary.js
Normal file
@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
|
||||
class ErrorBoundary extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
error: undefined,
|
||||
errorInfo: undefined
|
||||
};
|
||||
}
|
||||
|
||||
componentDidCatch(error, errorInfo) {
|
||||
this.setState({error, errorInfo})
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.error && this.props.fallbackFunction) {
|
||||
return this.props.fallbackFunction(this.state.error, this.state.errorInfo);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export default ErrorBoundary;
|
@ -1,10 +1,12 @@
|
||||
import React, {useState} from 'react';
|
||||
import React, {useCallback, useState} from 'react';
|
||||
import GroupTable from "../table/GroupTable";
|
||||
import GroupPie from "./GroupPie";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {faBarChart, faChartColumn, faPieChart, faTable} from "@fortawesome/free-solid-svg-icons";
|
||||
import {Col, Row} from "react-bootstrap";
|
||||
import GroupBarGraph from "./GroupBarGraph";
|
||||
import ErrorBoundary from "../ErrorBoundary";
|
||||
import {ErrorViewText} from "../../views/ErrorView";
|
||||
|
||||
const options = {
|
||||
BAR: 'bar',
|
||||
@ -47,15 +49,23 @@ const GroupVisualizer = ({groups, colors, name, horizontal}) => {
|
||||
right: "0",
|
||||
top: "0.5rem"
|
||||
};
|
||||
|
||||
const changeViewToPie = useCallback(() => setVisualization(options.PIE), [setVisualization, options])
|
||||
const changeViewToTable = useCallback(() => setVisualization(options.TABLE), [setVisualization, options])
|
||||
const changeViewToBar = useCallback(() => setVisualization(horizontal ? options.BAR : options.COLUMN), [setVisualization, horizontal, options])
|
||||
|
||||
const fallbackFunction = useCallback((error) => <ErrorViewText error={error}/>, []);
|
||||
|
||||
return <Row>
|
||||
<Col md={12} style={selectorFloatStyle}>
|
||||
<VisualizerSelector icon={faPieChart} onClick={() => setVisualization(options.PIE)}/>
|
||||
<VisualizerSelector icon={faTable} onClick={() => setVisualization(options.TABLE)}/>
|
||||
<VisualizerSelector icon={horizontal ? faBarChart : faChartColumn}
|
||||
onClick={() => setVisualization(horizontal ? options.BAR : options.COLUMN)}/>
|
||||
<VisualizerSelector icon={faPieChart} onClick={changeViewToPie}/>
|
||||
<VisualizerSelector icon={faTable} onClick={changeViewToTable}/>
|
||||
<VisualizerSelector icon={horizontal ? faBarChart : faChartColumn} onClick={changeViewToBar}/>
|
||||
</Col>
|
||||
<Col md={12}>
|
||||
<Visualizer option={visualization} groups={groups} colors={colors} name={name}/>
|
||||
<ErrorBoundary fallbackFunction={fallbackFunction}>
|
||||
<Visualizer option={visualization} groups={groups} colors={colors} name={name}/>
|
||||
</ErrorBoundary>
|
||||
</Col>
|
||||
</Row>
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user