From cf9f313e4c1722f25919a4e5c4ddae69a09420b9 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Wed, 6 Dec 2023 05:31:40 -0800
Subject: [PATCH] feat(trading): error boundaries for panes, sidebars, pages
 (#5438)

---
 .eslintrc.json                                |  1 +
 apps/trading/client-pages/fees/fees.tsx       | 17 ++--
 .../client-pages/liquidity/liquidity.tsx      | 28 ++++---
 .../client-pages/market/trade-grid.tsx        | 63 +++++++++++----
 .../client-pages/market/trade-panels.tsx      | 21 +++--
 .../client-pages/markets/markets-page.tsx     | 13 ++-
 .../client-pages/portfolio/portfolio.tsx      | 33 ++++++--
 .../client-pages/referrals/referrals.tsx      |  5 +-
 apps/trading/client-pages/rewards/rewards.tsx | 15 ++--
 .../error-boundary/error-boundary.spec.tsx    | 79 +++++++++++++++++++
 .../error-boundary/error-boundary.tsx         | 53 +++++++++++++
 .../components/error-boundary/index.ts        |  1 +
 apps/trading/components/sidebar/sidebar.tsx   | 35 +++++---
 libs/logger/src/hooks/use-logger.ts           |  1 +
 libs/logger/src/lib/local-logger.spec.ts      |  5 +-
 libs/logger/src/lib/local-logger.ts           |  4 +-
 16 files changed, 302 insertions(+), 72 deletions(-)
 create mode 100644 apps/trading/components/error-boundary/error-boundary.spec.tsx
 create mode 100644 apps/trading/components/error-boundary/error-boundary.tsx
 create mode 100644 apps/trading/components/error-boundary/index.ts

diff --git a/.eslintrc.json b/.eslintrc.json
index e58c2f737..a77e58402 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -77,6 +77,7 @@
             "fixStyle": "inline-type-imports"
           }
         ],
+        "@typescript-eslint/no-useless-constructor": 0,
         "curly": ["error", "multi-line"]
       }
     },
diff --git a/apps/trading/client-pages/fees/fees.tsx b/apps/trading/client-pages/fees/fees.tsx
index 134c26a1a..1cee72cba 100644
--- a/apps/trading/client-pages/fees/fees.tsx
+++ b/apps/trading/client-pages/fees/fees.tsx
@@ -1,8 +1,9 @@
+import { useEffect } from 'react';
+import { titlefy } from '@vegaprotocol/utils';
+import { ErrorBoundary } from '../../components/error-boundary';
 import { FeesContainer } from '../../components/fees-container';
 import { useT } from '../../lib/use-t';
 import { usePageTitleStore } from '../../stores';
-import { titlefy } from '@vegaprotocol/utils';
-import { useEffect } from 'react';
 
 export const Fees = () => {
   const t = useT();
@@ -10,13 +11,17 @@ export const Fees = () => {
   const { updateTitle } = usePageTitleStore((store) => ({
     updateTitle: store.updateTitle,
   }));
+
   useEffect(() => {
     updateTitle(titlefy([title]));
   }, [updateTitle, title]);
+
   return (
-    <div className="container p-4 mx-auto">
-      <h1 className="px-4 pb-4 text-2xl">{title}</h1>
-      <FeesContainer />
-    </div>
+    <ErrorBoundary feature="fees">
+      <div className="container p-4 mx-auto">
+        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
+        <FeesContainer />
+      </div>
+    </ErrorBoundary>
   );
 };
diff --git a/apps/trading/client-pages/liquidity/liquidity.tsx b/apps/trading/client-pages/liquidity/liquidity.tsx
index 2e4f98a7b..cf72e647c 100644
--- a/apps/trading/client-pages/liquidity/liquidity.tsx
+++ b/apps/trading/client-pages/liquidity/liquidity.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { LiquidityContainer } from '../../components/liquidity-container';
 import { useT } from '../../lib/use-t';
+import { ErrorBoundary } from '../../components/error-boundary';
 
 const enum LiquidityTabs {
   Active = 'active',
@@ -58,19 +59,28 @@ export const LiquidityViewContainer = ({
             name={t('My liquidity provision')}
             hidden={!pubKey}
           >
-            <LiquidityContainer
-              marketId={marketId}
-              filter={{ partyId: pubKey || undefined }}
-            />
+            <ErrorBoundary feature="liquidity-party">
+              <LiquidityContainer
+                marketId={marketId}
+                filter={{ partyId: pubKey || undefined }}
+              />
+            </ErrorBoundary>
           </Tab>
           <Tab id={LiquidityTabs.Active} name={t('Active')}>
-            <LiquidityContainer marketId={marketId} filter={{ active: true }} />
+            <ErrorBoundary feature="liquidity-active">
+              <LiquidityContainer
+                marketId={marketId}
+                filter={{ active: true }}
+              />
+            </ErrorBoundary>
           </Tab>
           <Tab id={LiquidityTabs.Inactive} name={t('Inactive')}>
-            <LiquidityContainer
-              marketId={marketId}
-              filter={{ active: false }}
-            />
+            <ErrorBoundary feature="liquidity-inactive">
+              <LiquidityContainer
+                marketId={marketId}
+                filter={{ active: false }}
+              />
+            </ErrorBoundary>
           </Tab>
         </Tabs>
       </div>
diff --git a/apps/trading/client-pages/market/trade-grid.tsx b/apps/trading/client-pages/market/trade-grid.tsx
index 91840752d..239791dec 100644
--- a/apps/trading/client-pages/market/trade-grid.tsx
+++ b/apps/trading/client-pages/market/trade-grid.tsx
@@ -20,6 +20,7 @@ import {
 } from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
+import { ErrorBoundary } from '../../components/error-boundary';
 
 interface TradeGridProps {
   market: Market | null;
@@ -62,28 +63,38 @@ const MainGrid = memo(
                     name={t('Chart')}
                     menu={<TradingViews.candles.menu />}
                   >
-                    <TradingViews.candles.component marketId={marketId} />
+                    <ErrorBoundary feature="chart">
+                      <TradingViews.candles.component marketId={marketId} />
+                    </ErrorBoundary>
                   </Tab>
                   <Tab id="depth" name={t('Depth')}>
-                    <TradingViews.depth.component marketId={marketId} />
+                    <ErrorBoundary feature="depth">
+                      <TradingViews.depth.component marketId={marketId} />
+                    </ErrorBoundary>
                   </Tab>
                   <Tab id="liquidity" name={t('Liquidity')}>
-                    <TradingViews.liquidity.component marketId={marketId} />
+                    <ErrorBoundary feature="liquidity">
+                      <TradingViews.liquidity.component marketId={marketId} />
+                    </ErrorBoundary>
                   </Tab>
                   {market &&
                   market.tradableInstrument.instrument.product.__typename ===
                     'Perpetual' ? (
                     <Tab id="funding-history" name={t('Funding history')}>
-                      <TradingViews.funding.component marketId={marketId} />
+                      <ErrorBoundary feature="funding-history">
+                        <TradingViews.funding.component marketId={marketId} />
+                      </ErrorBoundary>
                     </Tab>
                   ) : null}
                   {market &&
                   market.tradableInstrument.instrument.product.__typename ===
                     'Perpetual' ? (
                     <Tab id="funding-payments" name={t('Funding payments')}>
-                      <TradingViews.fundingPayments.component
-                        marketId={marketId}
-                      />
+                      <ErrorBoundary feature="funding-payments">
+                        <TradingViews.fundingPayments.component
+                          marketId={marketId}
+                        />
+                      </ErrorBoundary>
                     </Tab>
                   ) : null}
                 </Tabs>
@@ -96,10 +107,14 @@ const MainGrid = memo(
               <TradeGridChild>
                 <Tabs storageKey="console-trade-grid-main-right">
                   <Tab id="orderbook" name={t('Orderbook')}>
-                    <TradingViews.orderbook.component marketId={marketId} />
+                    <ErrorBoundary feature="orderbook">
+                      <TradingViews.orderbook.component marketId={marketId} />
+                    </ErrorBoundary>
                   </Tab>
                   <Tab id="trades" name={t('Trades')}>
-                    <TradingViews.trades.component marketId={marketId} />
+                    <ErrorBoundary feature="trades">
+                      <TradingViews.trades.component marketId={marketId} />
+                    </ErrorBoundary>
                   </Tab>
                 </Tabs>
               </TradeGridChild>
@@ -118,31 +133,43 @@ const MainGrid = memo(
                 name={t('Positions')}
                 menu={<TradingViews.positions.menu />}
               >
-                <TradingViews.positions.component />
+                <ErrorBoundary feature="positions">
+                  <TradingViews.positions.component />
+                </ErrorBoundary>
               </Tab>
               <Tab
                 id="open-orders"
                 name={t('Open')}
                 menu={<TradingViews.activeOrders.menu />}
               >
-                <TradingViews.activeOrders.component />
+                <ErrorBoundary feature="activeOrders">
+                  <TradingViews.activeOrders.component />
+                </ErrorBoundary>
               </Tab>
               <Tab id="closed-orders" name={t('Closed')}>
-                <TradingViews.closedOrders.component />
+                <ErrorBoundary feature="closedOrders">
+                  <TradingViews.closedOrders.component />
+                </ErrorBoundary>
               </Tab>
               <Tab id="rejected-orders" name={t('Rejected')}>
-                <TradingViews.rejectedOrders.component />
+                <ErrorBoundary feature="rejectedOrders">
+                  <TradingViews.rejectedOrders.component />
+                </ErrorBoundary>
               </Tab>
               <Tab
                 id="orders"
                 name={t('All')}
                 menu={<TradingViews.orders.menu />}
               >
-                <TradingViews.orders.component />
+                <ErrorBoundary feature="orders">
+                  <TradingViews.orders.component />
+                </ErrorBoundary>
               </Tab>
               {FLAGS.STOP_ORDERS ? (
                 <Tab id="stop-orders" name={t('Stop orders')}>
-                  <TradingViews.stopOrders.component />
+                  <ErrorBoundary feature="stop-orders">
+                    <TradingViews.stopOrders.component />
+                  </ErrorBoundary>
                 </Tab>
               ) : null}
               <Tab id="fills" name={t('Fills')}>
@@ -153,7 +180,11 @@ const MainGrid = memo(
                 name={t('Collateral')}
                 menu={<TradingViews.collateral.menu />}
               >
-                <TradingViews.collateral.component pinnedAsset={pinnedAsset} />
+                <ErrorBoundary feature="collateral">
+                  <TradingViews.collateral.component
+                    pinnedAsset={pinnedAsset}
+                  />
+                </ErrorBoundary>
               </Tab>
             </Tabs>
           </TradeGridChild>
diff --git a/apps/trading/client-pages/market/trade-panels.tsx b/apps/trading/client-pages/market/trade-panels.tsx
index 6e9849a8e..364365881 100644
--- a/apps/trading/client-pages/market/trade-panels.tsx
+++ b/apps/trading/client-pages/market/trade-panels.tsx
@@ -1,19 +1,20 @@
-import type { PinnedAsset } from '@vegaprotocol/accounts';
-import type { Market } from '@vegaprotocol/markets';
+import { type PinnedAsset } from '@vegaprotocol/accounts';
+import { type Market } from '@vegaprotocol/markets';
 import { OracleBanner } from '@vegaprotocol/markets';
-import type { TradingView } from './trade-views';
-import { TradingViews } from './trade-views';
 import { useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
+import { FLAGS } from '@vegaprotocol/environment';
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import { useT } from '../../lib/use-t';
 import {
   MarketSuccessorBanner,
   MarketSuccessorProposalBanner,
   MarketTerminationBanner,
 } from '../../components/market-banner';
-import { FLAGS } from '@vegaprotocol/environment';
-import { useT } from '../../lib/use-t';
-import { Splash } from '@vegaprotocol/ui-toolkit';
+import { ErrorBoundary } from '../../components/error-boundary';
+import { type TradingView } from './trade-views';
+import { TradingViews } from './trade-views';
 
 interface TradePanelsProps {
   market: Market | null;
@@ -34,7 +35,11 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
 
     // Watch out here, we don't know what component is being rendered
     // so watch out for clashes in props
-    return <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
+    return (
+      <ErrorBoundary feature={view}>
+        <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
+      </ErrorBoundary>
+    );
   };
 
   const renderMenu = () => {
diff --git a/apps/trading/client-pages/markets/markets-page.tsx b/apps/trading/client-pages/markets/markets-page.tsx
index f38924556..a39cf9a82 100644
--- a/apps/trading/client-pages/markets/markets-page.tsx
+++ b/apps/trading/client-pages/markets/markets-page.tsx
@@ -15,6 +15,7 @@ import {
   useLinks,
 } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
+import { ErrorBoundary } from '../../components/error-boundary';
 
 export const MarketsPage = () => {
   const t = useT();
@@ -34,7 +35,9 @@ export const MarketsPage = () => {
       <div className="h-full my-1 border rounded-sm border-default">
         <Tabs storageKey="console-markets">
           <Tab id="open-markets" name={t('Open markets')}>
-            <OpenMarkets />
+            <ErrorBoundary feature="markets-open">
+              <OpenMarkets />
+            </ErrorBoundary>
           </Tab>
           <Tab
             id="proposed-markets"
@@ -49,10 +52,14 @@ export const MarketsPage = () => {
               </TradingAnchorButton>
             }
           >
-            <Proposed />
+            <ErrorBoundary feature="markets-proposed">
+              <Proposed />
+            </ErrorBoundary>
           </Tab>
           <Tab id="closed-markets" name={t('Closed markets')}>
-            <Closed />
+            <ErrorBoundary feature="markets-closed">
+              <Closed />
+            </ErrorBoundary>
           </Tab>
         </Tabs>
       </div>
diff --git a/apps/trading/client-pages/portfolio/portfolio.tsx b/apps/trading/client-pages/portfolio/portfolio.tsx
index ad17b1cf5..a63f5af2f 100644
--- a/apps/trading/client-pages/portfolio/portfolio.tsx
+++ b/apps/trading/client-pages/portfolio/portfolio.tsx
@@ -25,6 +25,7 @@ import { DepositsMenu } from '../../components/deposits-menu';
 import { WithdrawalsMenu } from '../../components/withdrawals-menu';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
+import { ErrorBoundary } from '../../components/error-boundary';
 
 const WithdrawalsIndicator = () => {
   const { ready } = useIncompleteWithdrawals();
@@ -72,19 +73,29 @@ export const Portfolio = () => {
                 name={t('Positions')}
                 menu={<PositionsMenu />}
               >
-                <PositionsContainer allKeys />
+                <ErrorBoundary feature="portfolio-positions">
+                  <PositionsContainer allKeys />
+                </ErrorBoundary>
               </Tab>
               <Tab id="orders" name={t('Orders')}>
-                <OrdersContainer />
+                <ErrorBoundary feature="portfolio-orders">
+                  <OrdersContainer />
+                </ErrorBoundary>
               </Tab>
               <Tab id="fills" name={t('Fills')}>
-                <FillsContainer />
+                <ErrorBoundary feature="portfolio-fills">
+                  <FillsContainer />
+                </ErrorBoundary>
               </Tab>
               <Tab id="funding-payments" name={t('Funding payments')}>
-                <FundingPaymentsContainer />
+                <ErrorBoundary feature="portfolio-funding-payments">
+                  <FundingPaymentsContainer />
+                </ErrorBoundary>
               </Tab>
               <Tab id="ledger-entries" name={t('Ledger entries')}>
-                <LedgerContainer />
+                <ErrorBoundary feature="portfolio-ledger">
+                  <LedgerContainer />
+                </ErrorBoundary>
               </Tab>
             </Tabs>
           </PortfolioGridChild>
@@ -101,10 +112,14 @@ export const Portfolio = () => {
                 name={t('Collateral')}
                 menu={<AccountsMenu />}
               >
-                <AccountsContainer />
+                <ErrorBoundary feature="portfolio-accounts">
+                  <AccountsContainer />
+                </ErrorBoundary>
               </Tab>
               <Tab id="deposits" name={t('Deposits')} menu={<DepositsMenu />}>
-                <DepositsContainer />
+                <ErrorBoundary feature="portfolio-deposit">
+                  <DepositsContainer />
+                </ErrorBoundary>
               </Tab>
               <Tab
                 id="withdrawals"
@@ -112,7 +127,9 @@ export const Portfolio = () => {
                 indicator={<WithdrawalsIndicator />}
                 menu={<WithdrawalsMenu />}
               >
-                <WithdrawalsContainer />
+                <ErrorBoundary feature="portfolio-deposit">
+                  <WithdrawalsContainer />
+                </ErrorBoundary>
               </Tab>
             </Tabs>
           </PortfolioGridChild>
diff --git a/apps/trading/client-pages/referrals/referrals.tsx b/apps/trading/client-pages/referrals/referrals.tsx
index ac06f7257..19c530887 100644
--- a/apps/trading/client-pages/referrals/referrals.tsx
+++ b/apps/trading/client-pages/referrals/referrals.tsx
@@ -18,6 +18,7 @@ import { usePageTitleStore } from '../../stores';
 import { useEffect } from 'react';
 import { titlefy } from '@vegaprotocol/utils';
 import { useT } from '../../lib/use-t';
+import { ErrorBoundary } from '../../components/error-boundary';
 
 const Nav = () => {
   const t = useT();
@@ -65,7 +66,7 @@ export const Referrals = () => {
   }, [updateTitle, t]);
 
   return (
-    <>
+    <ErrorBoundary feature="referrals">
       <LandingBanner />
 
       {showNav && <Nav />}
@@ -107,6 +108,6 @@ export const Referrals = () => {
           </TradingAnchorButton>
         </div>
       </div>
-    </>
+    </ErrorBoundary>
   );
 };
diff --git a/apps/trading/client-pages/rewards/rewards.tsx b/apps/trading/client-pages/rewards/rewards.tsx
index 0daf75611..3b0c67145 100644
--- a/apps/trading/client-pages/rewards/rewards.tsx
+++ b/apps/trading/client-pages/rewards/rewards.tsx
@@ -1,8 +1,9 @@
+import { useEffect } from 'react';
+import { titlefy } from '@vegaprotocol/utils';
 import { useT } from '../../lib/use-t';
 import { RewardsContainer } from '../../components/rewards-container';
 import { usePageTitleStore } from '../../stores';
-import { titlefy } from '@vegaprotocol/utils';
-import { useEffect } from 'react';
+import { ErrorBoundary } from '../../components/error-boundary';
 
 export const Rewards = () => {
   const t = useT();
@@ -14,9 +15,11 @@ export const Rewards = () => {
     updateTitle(titlefy([title]));
   }, [updateTitle, title]);
   return (
-    <div className="container mx-auto p-4">
-      <h1 className="px-4 pb-4 text-2xl">{title}</h1>
-      <RewardsContainer />
-    </div>
+    <ErrorBoundary feature="rewards">
+      <div className="container mx-auto p-4">
+        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
+        <RewardsContainer />
+      </div>
+    </ErrorBoundary>
   );
 };
diff --git a/apps/trading/components/error-boundary/error-boundary.spec.tsx b/apps/trading/components/error-boundary/error-boundary.spec.tsx
new file mode 100644
index 000000000..cd9590bdc
--- /dev/null
+++ b/apps/trading/components/error-boundary/error-boundary.spec.tsx
@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react';
+import { ErrorBoundary } from './error-boundary';
+import { localLoggerFactory } from '@vegaprotocol/logger';
+
+jest.mock('@vegaprotocol/logger', () => ({
+  localLoggerFactory: jest.fn(),
+}));
+
+describe('ErrorBoundary', () => {
+  const mockLogError = jest.fn();
+  const originalConsoleError = console.error;
+  const mockLoggerFactory = localLoggerFactory as jest.Mock;
+
+  beforeAll(() => {
+    console.error = () => {};
+  });
+
+  afterAll(() => {
+    console.error = originalConsoleError;
+  });
+
+  beforeEach(() => {
+    mockLoggerFactory.mockImplementation(() => ({
+      error: mockLogError,
+    }));
+  });
+
+  afterEach(() => {
+    mockLogError.mockClear();
+  });
+
+  it('renders children', () => {
+    render(
+      <ErrorBoundary feature="feature">
+        <div data-testid="child" />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('renders fallback ui and logs an error', () => {
+    const error = new Error('bork!');
+    const BorkedComponent = () => {
+      throw error;
+    };
+
+    render(
+      <ErrorBoundary feature="test-feature">
+        <BorkedComponent />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    expect(mockLogError).toHaveBeenCalledTimes(1);
+    expect(mockLogError).toHaveBeenCalledWith(
+      error.message,
+      expect.stringContaining('componentStack')
+    );
+  });
+
+  it('renders fallback render prop if error', () => {
+    const error = new Error('bork!');
+    const BorkedComponent = () => {
+      throw error;
+    };
+
+    render(
+      <ErrorBoundary
+        feature="test-feature"
+        fallback={<div data-testid="custom-ui" />}
+      >
+        <BorkedComponent />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByTestId('custom-ui')).toBeInTheDocument();
+  });
+});
diff --git a/apps/trading/components/error-boundary/error-boundary.tsx b/apps/trading/components/error-boundary/error-boundary.tsx
new file mode 100644
index 000000000..e3c5f7b36
--- /dev/null
+++ b/apps/trading/components/error-boundary/error-boundary.tsx
@@ -0,0 +1,53 @@
+import { localLoggerFactory, type LocalLogger } from '@vegaprotocol/logger';
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+import { useT } from '../../lib/use-t';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  feature: string;
+  fallback?: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  logger: LocalLogger | null = null;
+
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+
+    this.logger = localLoggerFactory({ application: props.feature });
+
+    this.state = {
+      hasError: false,
+    };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    if (this.logger) {
+      this.logger.error(error.message, JSON.stringify(info));
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || <DefaultFallback />;
+    }
+
+    return this.props.children;
+  }
+}
+
+const DefaultFallback = () => {
+  const t = useT();
+  return <p className="text-xs">{t('Something went wrong')}</p>;
+};
diff --git a/apps/trading/components/error-boundary/index.ts b/apps/trading/components/error-boundary/index.ts
new file mode 100644
index 000000000..538d0b512
--- /dev/null
+++ b/apps/trading/components/error-boundary/index.ts
@@ -0,0 +1 @@
+export { ErrorBoundary } from './error-boundary';
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx
index 8827e131b..b54854ae0 100644
--- a/apps/trading/components/sidebar/sidebar.tsx
+++ b/apps/trading/components/sidebar/sidebar.tsx
@@ -16,6 +16,7 @@ import { GetStarted } from '../welcome-dialog';
 import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
+import { ErrorBoundary } from '../error-boundary';
 
 export enum ViewType {
   Order = 'Order',
@@ -163,12 +164,14 @@ export const SidebarContent = () => {
     if (params.marketId) {
       return (
         <ContentWrapper>
-          <DealTicketContainer
-            marketId={params.marketId}
-            onDeposit={(assetId) =>
-              setViews({ type: ViewType.Deposit, assetId }, currentRouteId)
-            }
-          />
+          <ErrorBoundary feature="deal-ticket">
+            <DealTicketContainer
+              marketId={params.marketId}
+              onDeposit={(assetId) =>
+                setViews({ type: ViewType.Deposit, assetId }, currentRouteId)
+              }
+            />
+          </ErrorBoundary>
           <GetStarted />
         </ContentWrapper>
       );
@@ -181,7 +184,9 @@ export const SidebarContent = () => {
     if (params.marketId) {
       return (
         <ContentWrapper>
-          <MarketInfoAccordionContainer marketId={params.marketId} />
+          <ErrorBoundary feature="market-info">
+            <MarketInfoAccordionContainer marketId={params.marketId} />
+          </ErrorBoundary>
         </ContentWrapper>
       );
     } else {
@@ -192,7 +197,9 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Deposit) {
     return (
       <ContentWrapper title={t('Deposit')}>
-        <DepositContainer assetId={view.assetId} />
+        <ErrorBoundary feature="deposit">
+          <DepositContainer assetId={view.assetId} />
+        </ErrorBoundary>
       </ContentWrapper>
     );
   }
@@ -200,7 +207,9 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Withdraw) {
     return (
       <ContentWrapper title={t('Withdraw')}>
-        <WithdrawContainer assetId={view.assetId} />
+        <ErrorBoundary feature="withdraw">
+          <WithdrawContainer assetId={view.assetId} />
+        </ErrorBoundary>
       </ContentWrapper>
     );
   }
@@ -208,7 +217,9 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Transfer) {
     return (
       <ContentWrapper title={t('Transfer')}>
-        <TransferContainer assetId={view.assetId} />
+        <ErrorBoundary feature="transfer">
+          <TransferContainer assetId={view.assetId} />
+        </ErrorBoundary>
       </ContentWrapper>
     );
   }
@@ -216,7 +227,9 @@ export const SidebarContent = () => {
   if (view.type === ViewType.Settings) {
     return (
       <ContentWrapper title={t('Settings')}>
-        <Settings />
+        <ErrorBoundary feature="settings">
+          <Settings />
+        </ErrorBoundary>
       </ContentWrapper>
     );
   }
diff --git a/libs/logger/src/hooks/use-logger.ts b/libs/logger/src/hooks/use-logger.ts
index f8c35e32f..54390ff06 100644
--- a/libs/logger/src/hooks/use-logger.ts
+++ b/libs/logger/src/hooks/use-logger.ts
@@ -10,6 +10,7 @@ export interface LoggerProps extends LoggerConf {
 
 export const useLogger = ({ dsn, env, ...props }: LoggerProps) => {
   const logger = useRef<LocalLogger | null>(null);
+
   if (!logger.current) {
     logger.current = localLoggerFactory(props);
     if (dsn) {
diff --git a/libs/logger/src/lib/local-logger.spec.ts b/libs/logger/src/lib/local-logger.spec.ts
index 8932c8580..ac5ebaab8 100644
--- a/libs/logger/src/lib/local-logger.spec.ts
+++ b/libs/logger/src/lib/local-logger.spec.ts
@@ -25,6 +25,7 @@ describe('LocalLogger', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
+
   it('logger should be properly instantiate', () => {
     const logger = localLoggerFactory({});
     expect(logger).toBeInstanceOf(LocalLogger);
@@ -50,7 +51,7 @@ describe('LocalLogger', () => {
       logger[method]('test', 'test2');
       // eslint-disable-next-line no-console
       expect(console[consoleMethod]).toHaveBeenCalledWith(
-        `trading:${methodToLevel[i]}: `,
+        `trading:${methodToLevel[i]}:`,
         'test',
         'test2'
       );
@@ -110,7 +111,7 @@ describe('LocalLogger', () => {
 
     // eslint-disable-next-line no-console
     expect(console.debug).toHaveBeenCalledWith(
-      'trading:debug: ',
+      'trading:debug:',
       'test',
       'test1'
     );
diff --git a/libs/logger/src/lib/local-logger.ts b/libs/logger/src/lib/local-logger.ts
index 6086d843b..2c27f6679 100644
--- a/libs/logger/src/lib/local-logger.ts
+++ b/libs/logger/src/lib/local-logger.ts
@@ -62,6 +62,7 @@ export class LocalLogger {
   }
   private tags: string[] = [];
   private _application = 'trading';
+
   constructor(conf: LoggerConf) {
     if (conf.application) {
       this._application = conf.application;
@@ -69,6 +70,7 @@ export class LocalLogger {
     this.tags = [...(conf.tags || [])];
     this._logLevel = conf.logLevel || this._logLevel;
   }
+
   public debug(...args: ConsoleArg[]) {
     this._log('debug', 'debug', args);
   }
@@ -101,7 +103,7 @@ export class LocalLogger {
     ) {
       // eslint-disable-next-line no-console
       console[logMethod].apply(console, [
-        `${this._application}:${level}: `,
+        `${this._application}:${level}:`,
         ...args,
       ]);
     }