diff --git a/frontend/app/components/Session/PlayerContent.js b/frontend/app/components/Session/PlayerContent.js
index 15187d15d..64d896455 100644
--- a/frontend/app/components/Session/PlayerContent.js
+++ b/frontend/app/components/Session/PlayerContent.js
@@ -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',
diff --git a/frontend/app/components/Session_/Exceptions/Exceptions.js b/frontend/app/components/Session_/Exceptions/Exceptions.js
deleted file mode 100644
index 2b0c206b4..000000000
--- a/frontend/app/components/Session_/Exceptions/Exceptions.js
+++ /dev/null
@@ -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>
-      </>
-    );
-  }
-}
diff --git a/frontend/app/components/Session_/Exceptions/Exceptions.tsx b/frontend/app/components/Session_/Exceptions/Exceptions.tsx
new file mode 100644
index 000000000..e263c9106
--- /dev/null
+++ b/frontend/app/components/Session_/Exceptions/Exceptions.tsx
@@ -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));
diff --git a/frontend/app/components/Session_/Fetch/Fetch.js b/frontend/app/components/Session_/Fetch/Fetch.DEPRECATED.js
similarity index 100%
rename from frontend/app/components/Session_/Fetch/Fetch.js
rename to frontend/app/components/Session_/Fetch/Fetch.DEPRECATED.js
diff --git a/frontend/app/components/Session_/LongTasks/LongTasks.js b/frontend/app/components/Session_/LongTasks/LongTasks.DEPRECATED.js
similarity index 100%
rename from frontend/app/components/Session_/LongTasks/LongTasks.js
rename to frontend/app/components/Session_/LongTasks/LongTasks.DEPRECATED.js
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.DEPRECATED.js
similarity index 100%
rename from frontend/app/components/Session_/Player/Controls/Controls.js
rename to frontend/app/components/Session_/Player/Controls/Controls.DEPRECATED.js
diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js
index 4af1be29e..b8d295361 100644
--- a/frontend/app/components/Session_/Player/Player.js
+++ b/frontend/app/components/Session_/Player/Player.js
@@ -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>
         )}
diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.DEPRECATED.js
similarity index 100%
rename from frontend/app/components/Session_/Storage/Storage.js
rename to frontend/app/components/Session_/Storage/Storage.DEPRECATED.js
diff --git a/frontend/app/player/player/Animator.ts b/frontend/app/player/player/Animator.ts
index 83e10f098..787df725b 100644
--- a/frontend/app/player/player/Animator.ts
+++ b/frontend/app/player/player/Animator.ts
@@ -182,7 +182,7 @@ export default class Animator {
       return this.jump(
         Math.max(
           0,
-          time - interval
+          time + interval
         )
       );
     }