125 lines
4.1 KiB
TypeScript
125 lines
4.1 KiB
TypeScript
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"
|
|
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));
|