refactor(ui/player): deprecate unused devtools tabs, refactor exceptions
This commit is contained in:
sylenien
parent
d37f81190d
commit
aa8c3ebbbc
9 changed files with 127 additions and 149 deletions
|
|
@ -7,7 +7,6 @@ import RightBlock from './RightBlock';
|
|||
import { PlayerContext } from 'App/components/Session/playerContext';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
|
||||
|
||||
const TABS = {
|
||||
EVENTS: 'User Steps',
|
||||
HEATMAPS: 'Click Map',
|
||||
|
|
|
|||
|
|
@ -1,145 +0,0 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { getRE } from 'App/utils';
|
||||
import {
|
||||
NoContent,
|
||||
Loader,
|
||||
Input,
|
||||
ErrorItem,
|
||||
SlideModal,
|
||||
ErrorDetails,
|
||||
Link,
|
||||
QuestionMarkHint,
|
||||
} from 'UI';
|
||||
import { fetchErrorStackList } from 'Duck/sessions';
|
||||
import { connectPlayer, jump } from 'Player';
|
||||
import { error as errorRoute } from 'App/routes';
|
||||
import Autoscroll from '../Autoscroll';
|
||||
import BottomBlock from '../BottomBlock';
|
||||
|
||||
@connectPlayer((state) => ({
|
||||
logs: state.logListNow,
|
||||
exceptions: state.exceptionsList,
|
||||
// exceptionsNow: state.exceptionsListNow,
|
||||
}))
|
||||
@connect(
|
||||
(state) => ({
|
||||
session: state.getIn(['sessions', 'current']),
|
||||
errorStack: state.getIn(['sessions', 'errorStack']),
|
||||
sourcemapUploaded: state.getIn(['sessions', 'sourcemapUploaded']),
|
||||
loading: state.getIn(['sessions', 'fetchErrorStackList', 'loading']),
|
||||
}),
|
||||
{ fetchErrorStackList }
|
||||
)
|
||||
export default class Exceptions extends React.PureComponent {
|
||||
state = {
|
||||
filter: '',
|
||||
currentError: null,
|
||||
};
|
||||
|
||||
onFilterChange = ({ target: { value } }) => this.setState({ filter: value });
|
||||
|
||||
setCurrentError = (err) => {
|
||||
const { session } = this.props;
|
||||
this.props.fetchErrorStackList(session.sessionId, err.errorId);
|
||||
this.setState({ currentError: err });
|
||||
};
|
||||
closeModal = () => this.setState({ currentError: null });
|
||||
|
||||
render() {
|
||||
const { exceptions, loading, errorStack, sourcemapUploaded } = this.props;
|
||||
const { filter, currentError } = this.state;
|
||||
const filterRE = getRE(filter, 'i');
|
||||
|
||||
const filtered = exceptions.filter((e) => filterRE.test(e.name) || filterRE.test(e.message));
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlideModal
|
||||
title={
|
||||
currentError && (
|
||||
<div className="mb-4">
|
||||
<div className="text-xl mb-2">
|
||||
<Link to={errorRoute(currentError.errorId)}>
|
||||
<span className="font-bold">{currentError.name}</span>
|
||||
</Link>
|
||||
<span className="ml-2 text-sm color-gray-medium">{currentError.function}</span>
|
||||
</div>
|
||||
<div>{currentError.message}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
isDisplayed={currentError != null}
|
||||
content={
|
||||
currentError && (
|
||||
<div className="px-4">
|
||||
<Loader loading={loading}>
|
||||
<NoContent show={!loading && errorStack.size === 0} title="Nothing found!">
|
||||
<ErrorDetails
|
||||
error={currentError}
|
||||
errorStack={errorStack}
|
||||
sourcemapUploaded={sourcemapUploaded}
|
||||
/>
|
||||
</NoContent>
|
||||
</Loader>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
onClose={this.closeModal}
|
||||
/>
|
||||
<BottomBlock>
|
||||
<BottomBlock.Header>
|
||||
<div className="flex items-center">
|
||||
<span className="font-semibold color-gray-medium mr-4">Exceptions</span>
|
||||
</div>
|
||||
|
||||
<div className={'flex items-center justify-between'}>
|
||||
<Input
|
||||
className="input-small"
|
||||
placeholder="Filter by name or message"
|
||||
icon="search"
|
||||
iconPosition="left"
|
||||
name="filter"
|
||||
onChange={this.onFilterChange}
|
||||
height={28}
|
||||
/>
|
||||
<QuestionMarkHint
|
||||
className={'mx-4'}
|
||||
content={
|
||||
<>
|
||||
<a
|
||||
className="color-teal underline"
|
||||
target="_blank"
|
||||
href="https://docs.openreplay.com/installation/upload-sourcemaps"
|
||||
>
|
||||
Upload Source Maps{' '}
|
||||
</a>
|
||||
and see source code context obtained from stack traces in their original form.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</BottomBlock.Header>
|
||||
<BottomBlock.Content>
|
||||
<NoContent size="small" show={filtered.length === 0} title="No recordings found">
|
||||
<Autoscroll>
|
||||
{filtered.map((e, index) => (
|
||||
<ErrorItem
|
||||
onJump={() => jump(e.time)}
|
||||
error={e}
|
||||
key={e.key}
|
||||
onErrorClick={(jsEvent) => {
|
||||
jsEvent.stopPropagation();
|
||||
jsEvent.preventDefault();
|
||||
this.setCurrentError(e);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Autoscroll>
|
||||
</NoContent>
|
||||
</BottomBlock.Content>
|
||||
</BottomBlock>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
126
frontend/app/components/Session_/Exceptions/Exceptions.tsx
Normal file
126
frontend/app/components/Session_/Exceptions/Exceptions.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { getRE } from 'App/utils';
|
||||
import {
|
||||
NoContent,
|
||||
Loader,
|
||||
Input,
|
||||
ErrorItem,
|
||||
SlideModal,
|
||||
ErrorDetails,
|
||||
Link,
|
||||
QuestionMarkHint,
|
||||
} from 'UI';
|
||||
import { error as errorRoute } from 'App/routes';
|
||||
import Autoscroll from '../Autoscroll';
|
||||
import BottomBlock from '../BottomBlock';
|
||||
import { PlayerContext } from 'App/components/Session/playerContext';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
|
||||
interface IProps {
|
||||
loading: boolean;
|
||||
sourcemapUploaded: boolean;
|
||||
errorStack: Record<string, any>;
|
||||
}
|
||||
|
||||
function Exceptions({ errorStack, sourcemapUploaded, loading }: IProps) {
|
||||
const { player, store } = React.useContext(PlayerContext);
|
||||
const { logListNow: logs, exceptionsList: exceptions } = store.get();
|
||||
const [filter, setFilter] = React.useState('');
|
||||
const [currentError, setCurrentErrorVal] = React.useState(null);
|
||||
|
||||
const onFilterChange = ({ target: { value } }: any) => setFilter(value);
|
||||
const closeModal = () => setCurrentErrorVal(null);
|
||||
|
||||
const filterRE = getRE(filter, 'i');
|
||||
const filtered = exceptions.filter((e: any) => filterRE.test(e.name) || filterRE.test(e.message));
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlideModal
|
||||
title={
|
||||
currentError && (
|
||||
<div className="mb-4">
|
||||
<div className="text-xl mb-2">
|
||||
<Link to={errorRoute(currentError.errorId)}>
|
||||
<span className="font-bold">{currentError.name}</span>
|
||||
</Link>
|
||||
<span className="ml-2 text-sm color-gray-medium">{currentError.function}</span>
|
||||
</div>
|
||||
<div>{currentError.message}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
isDisplayed={currentError != null}
|
||||
content={
|
||||
currentError && (
|
||||
<div className="px-4">
|
||||
<Loader loading={loading}>
|
||||
<NoContent show={!loading && errorStack.size === 0} title="Nothing found!">
|
||||
<ErrorDetails
|
||||
error={currentError}
|
||||
// @ts-ignore
|
||||
errorStack={errorStack}
|
||||
sourcemapUploaded={sourcemapUploaded}
|
||||
/>
|
||||
</NoContent>
|
||||
</Loader>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
onClose={closeModal}
|
||||
/>
|
||||
<BottomBlock>
|
||||
<BottomBlock.Header>
|
||||
<div className="flex items-center">
|
||||
<span className="font-semibold color-gray-medium mr-4">Exceptions</span>
|
||||
</div>
|
||||
|
||||
<div className={'flex items-center justify-between'}>
|
||||
<Input
|
||||
className="input-small"
|
||||
placeholder="Filter by name or message"
|
||||
icon="search"
|
||||
iconPosition="left"
|
||||
name="filter"
|
||||
onChange={onFilterChange}
|
||||
height={28}
|
||||
/>
|
||||
<QuestionMarkHint
|
||||
className={'mx-4'}
|
||||
content={
|
||||
<>
|
||||
<a
|
||||
className="color-teal underline"
|
||||
target="_blank"
|
||||
href="https://docs.openreplay.com/installation/upload-sourcemaps"
|
||||
>
|
||||
Upload Source Maps{' '}
|
||||
</a>
|
||||
and see source code context obtained from stack traces in their original form.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</BottomBlock.Header>
|
||||
<BottomBlock.Content>
|
||||
<NoContent size="small" show={filtered.length === 0} title="No recordings found">
|
||||
<Autoscroll>
|
||||
{filtered.map((e: any, index) => (
|
||||
<React.Fragment key={e.key}>
|
||||
<ErrorItem onJump={() => player.jump(e.time)} error={e} />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Autoscroll>
|
||||
</NoContent>
|
||||
</BottomBlock.Content>
|
||||
</BottomBlock>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect((state: any) => ({
|
||||
errorStack: state.getIn(['sessions', 'errorStack']),
|
||||
sourcemapUploaded: state.getIn(['sessions', 'sourcemapUploaded']),
|
||||
loading: state.getIn(['sessions', 'fetchErrorStackList', 'loading']),
|
||||
}))(observer(Exceptions));
|
||||
|
|
@ -15,7 +15,6 @@ import {
|
|||
PERFORMANCE,
|
||||
GRAPHQL,
|
||||
EXCEPTIONS,
|
||||
LONGTASKS,
|
||||
INSPECTOR,
|
||||
OVERVIEW,
|
||||
} from 'Duck/components/player';
|
||||
|
|
@ -93,7 +92,6 @@ function Player(props) {
|
|||
{bottomBlock === PERFORMANCE && <ConnectedPerformance />}
|
||||
{bottomBlock === GRAPHQL && <GraphQL />}
|
||||
{bottomBlock === EXCEPTIONS && <Exceptions />}
|
||||
{bottomBlock === LONGTASKS && <LongTasks />}
|
||||
{bottomBlock === INSPECTOR && <Inspector />}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@ export default class Animator {
|
|||
return this.jump(
|
||||
Math.max(
|
||||
0,
|
||||
time - interval
|
||||
time + interval
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue