fix(ui) - errors details trace is not showing

frontend/app/components/Dashboard/components/Errors/ErrorDetailsModal/ErrorDetailsModal.tsx

@@ -10,7 +10,7 @@ function ErrorDetailsModal(props: Props) {
             style={{ width: '85vw', maxWidth: '1200px' }}
             className="bg-white h-screen p-4 overflow-y-auto"
         >
-            <ErrorInfo errorId={props.errorId} list={[]} />
+            <ErrorInfo errorId={props.errorId} />
         </div>
     );
 }

frontend/app/components/Errors/Error/ErrorInfo.js

@@ -11,6 +11,7 @@ import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 @connect(
     (state) => ({
         errorIdInStore: state.getIn(['errors', 'instance']).errorId,
+        list: state.getIn(['errors', 'instanceTrace']),
         loading: state.getIn(['errors', 'fetch', 'loading']) || state.getIn(['errors', 'fetchTrace', 'loading']),
         errorOnFetch: state.getIn(['errors', 'fetch', 'errors']) || state.getIn(['errors', 'fetchTrace', 'errors']),
     }),

frontend/app/components/Errors/Error/MainSection.js

@@ -63,6 +63,7 @@ export default class MainSection extends React.PureComponent {
 
     render() {
         const { error, trace, sourcemapUploaded, ignoreLoading, resolveToggleLoading, toggleFavoriteLoading, className, traceLoading } = this.props;
+        const isPlayer = window.location.pathname.includes('/session/')
 
         return (
             <div className={cn(className, 'bg-white border-radius-3 thin-gray-border mb-6')}>
@@ -143,15 +144,17 @@ export default class MainSection extends React.PureComponent {
 					/>
 				</div> */}
                 <Divider />
-                <div className="m-4">
-                    <h3 className="text-xl inline-block mr-2">Last session with this error</h3>
-                    <span className="font-thin text-sm">{resentOrDate(error.lastOccurrence)}</span>
-                    <SessionBar className="my-4" session={error.lastHydratedSession} />
-                    <Button variant="text-primary" onClick={this.findSessions}>
-                        Find all sessions with this error
-                        <Icon className="ml-1" name="next1" color="teal" />
-                    </Button>
-                </div>
+                {!isPlayer && (
+                    <div className="m-4">
+                        <h3 className="text-xl inline-block mr-2">Last session with this error</h3>
+                        <span className="font-thin text-sm">{resentOrDate(error.lastOccurrence)}</span>
+                        <SessionBar className="my-4" session={error.lastHydratedSession} />
+                        <Button variant="text-primary" onClick={this.findSessions}>
+                            Find all sessions with this error
+                            <Icon className="ml-1" name="next1" color="teal" />
+                        </Button>    
+                    </div>
+                )}
                 <Divider />
                 <div className="m-4">
                     <Loader loading={traceLoading}>

frontend/app/components/Session_/Exceptions/Exceptions.js

@@ -140,7 +140,7 @@ export default class Exceptions extends React.PureComponent {
                     error={e}
                     key={e.key}
                     selected={lastIndex === index}
-                    inactive={index > lastIndex}
+                    // inactive={index > lastIndex}
                     onErrorClick={(jsEvent) => {
                       jsEvent.stopPropagation();
                       jsEvent.preventDefault();

frontend/app/components/ui/ErrorDetails/ErrorDetails.tsx

@@ -18,6 +18,7 @@ function ErrorDetails(props: Props) {
     const { error, sessionId, message = '', errorStack = [], sourcemapUploaded = false } = props;
     const [showRaw, setShowRaw] = useState(false);
     const firstFunc = errorStack.first() && errorStack.first().function;
+    
 
     const openDocs = () => {
         window.open(docLink, '_blank');
@@ -77,7 +78,8 @@ function ErrorDetails(props: Props) {
 ErrorDetails.displayName = 'ErrorDetails';
 export default connect(
     (state: any) => ({
-        errorStack: state.getIn(['sessions', 'errorStack']),
+        // errorStack: state.getIn(['sessions', 'errorStack']),
+        errorStack: state.getIn(['errors', 'instanceTrace']),
         sessionId: state.getIn(['sessions', 'current', 'sessionId']),
     }),
     { fetchErrorStackList }

frontend/app/components/ui/ErrorItem/ErrorItem.js

@@ -3,8 +3,15 @@ import cn from 'classnames';
 import { IconButton } from 'UI';
 import stl from './errorItem.module.css';
 import { Duration } from 'luxon';
+import { useModal } from 'App/components/Modal';
+import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorDetailsModal';
 
-function ErrorItem({ error = {}, onErrorClick, onJump, inactive, selected }) {
+function ErrorItem({ error = {}, onJump, inactive, selected }) {
+  const { showModal } = useModal();
+
+  const onErrorClick = () => {
+    showModal(<ErrorDetailsModal errorId={error.errorId} />, { right: true });
+  }
   return (
     <div
       className={cn(stl.wrapper, 'py-2 px-4 flex cursor-pointer', {