74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import ErrorFrame from '../ErrorFrame/ErrorFrame';
|
|
import { Button, Icon } from 'UI';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { useStore } from 'App/mstore';
|
|
|
|
const docLink = 'https://docs.openreplay.com/deployment/upload-sourcemaps';
|
|
|
|
interface Props {
|
|
fetchErrorStackList: any;
|
|
sourcemapUploaded?: boolean;
|
|
errorStack?: any;
|
|
message?: string;
|
|
error: any;
|
|
}
|
|
function ErrorDetails(props: Props) {
|
|
const { errorStore, sessionStore } = useStore();
|
|
const sessionId = sessionStore.current.sessionId;
|
|
const errorStack = errorStore.instanceTrace;
|
|
const { error, message = '', sourcemapUploaded = false } = props;
|
|
const [showRaw, setShowRaw] = useState(false);
|
|
const firstFunc = errorStack[0] && errorStack[0].function;
|
|
|
|
const openDocs = () => {
|
|
window.open(docLink, '_blank');
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white p-5 h-screen">
|
|
{!sourcemapUploaded && (
|
|
<div
|
|
style={{ backgroundColor: 'rgba(204, 0, 0, 0.1)' }}
|
|
className="font-normal flex items-center text-sm font-regular color-red border p-2 rounded"
|
|
>
|
|
<Icon name="info" size="16" color="red" />
|
|
<div className="ml-2">
|
|
Source maps must be uploaded to OpenReplay to be able to see stack traces.{' '}
|
|
<a href="#" className="color-red font-medium underline" style={{ textDecoration: 'underline' }} onClick={openDocs}>
|
|
Learn more.
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center my-3">
|
|
<h3 className="text-xl mr-auto">Stacktrace</h3>
|
|
<div className="flex justify-end mr-2">
|
|
<Button variant={!showRaw ? 'text-primary' : 'text'} onClick={() => setShowRaw(false)}>
|
|
FULL
|
|
</Button>
|
|
<Button variant={showRaw ? 'text-primary' : 'text'} onClick={() => setShowRaw(true)}>
|
|
RAW
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="mb-6 code-font" data-hidden={showRaw}>
|
|
<div className="leading-relaxed font-weight-bold">{error.name}</div>
|
|
<div style={{ wordBreak: 'break-all' }}>{message}</div>
|
|
</div>
|
|
{showRaw && (
|
|
<div className="mb-3 code-font">
|
|
{error.name} : {firstFunc ? firstFunc : '?'}
|
|
</div>
|
|
)}
|
|
{errorStack.map((frame: any, i: any) => (
|
|
<div className="mb-3" key={frame.key}>
|
|
<ErrorFrame frame={frame} showRaw={showRaw} isFirst={i == 0} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ErrorDetails.displayName = 'ErrorDetails';
|
|
export default observer(ErrorDetails);
|