fix(trading): update async renderer on error (#2842)

libs/orders/src/lib/components/order-list-manager/order-list-manager.spec.tsx

@@ -19,56 +19,58 @@ const generateJsx = () => {
   );
 };
 
-it('Renders a loading state while awaiting orders', async () => {
+describe('OrderListManager', () => {
-  jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
+  it('should render a loading state while awaiting orders', async () => {
-    data: [],
+    jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
-    loading: true,
+      data: [],
-    error: undefined,
+      loading: true,
-    flush: jest.fn(),
+      error: undefined,
-    reload: jest.fn(),
+      flush: jest.fn(),
-    load: jest.fn(),
+      reload: jest.fn(),
-    totalCount: 0,
+      load: jest.fn(),
+      totalCount: 0,
+    });
+    await act(async () => {
+      render(generateJsx());
+    });
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
   });
-  await act(async () => {
-    render(generateJsx());
-  });
-  expect(screen.getByText('Loading...')).toBeInTheDocument();
-});
 
-it('Renders an error state', async () => {
+  it('should render an error state', async () => {
-  const errorMsg = 'Oops! An Error';
+    const errorMsg = 'Oops! An Error';
-  jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
+    jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
-    data: [],
+      data: null,
-    loading: false,
+      loading: false,
-    error: new Error(errorMsg),
+      error: new Error(errorMsg),
-    flush: jest.fn(),
+      flush: jest.fn(),
-    reload: jest.fn(),
+      reload: jest.fn(),
-    load: jest.fn(),
+      load: jest.fn(),
-    totalCount: undefined,
+      totalCount: undefined,
+    });
+    await act(async () => {
+      render(generateJsx());
+    });
+    expect(
+      screen.getByText(`Something went wrong: ${errorMsg}`)
+    ).toBeInTheDocument();
   });
-  await act(async () => {
-    render(generateJsx());
-  });
-  expect(
-    screen.getByText(`Something went wrong: ${errorMsg}`)
-  ).toBeInTheDocument();
-});
 
-it('Renders the order list if orders provided', async () => {
+  it('should render the order list if orders provided', async () => {
-  // @ts-ignore Orderlist is read only but we need to override with the forwardref to
+    // @ts-ignore OrderList is read only but we need to override with the forwardRef to
-  // avoid warnings about padding refs
+    // avoid warnings about padding refs
-  orderListMock.OrderListTable = forwardRef(() => <div>OrderList</div>);
+    orderListMock.OrderListTable = forwardRef(() => <div>OrderList</div>);
-  jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
+    jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
-    data: [{ id: '1' } as OrderFieldsFragment],
+      data: [{ id: '1' } as OrderFieldsFragment],
-    loading: false,
+      loading: false,
-    error: undefined,
+      error: undefined,
-    flush: jest.fn(),
+      flush: jest.fn(),
-    reload: jest.fn(),
+      reload: jest.fn(),
-    load: jest.fn(),
+      load: jest.fn(),
-    totalCount: undefined,
+      totalCount: undefined,
+    });
+    await act(async () => {
+      render(generateJsx());
+    });
+    expect(await screen.findByText('OrderList')).toBeInTheDocument();
   });
-  await act(async () => {
-    render(generateJsx());
-  });
-  expect(await screen.findByText('OrderList')).toBeInTheDocument();
 });

libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx

@@ -1,6 +1,7 @@
 import { Splash } from '../splash';
 import type { ReactNode } from 'react';
 import { t } from '@vegaprotocol/react-helpers';
+import * as Sentry from '@sentry/react';
 
 interface AsyncRendererProps<T> {
   loading: boolean;
@@ -26,13 +27,16 @@ export function AsyncRenderer<T = object>({
   render,
 }: AsyncRendererProps<T>) {
   if (error) {
-    return (
+    Sentry.captureException(`Error rendering data: ${error.message}`);
-      <Splash>
+    if (!data) {
-        {errorMessage
+      return (
-          ? errorMessage
+        <Splash>
-          : t(`Something went wrong: ${error.message}`)}
+          {errorMessage
-      </Splash>
+            ? errorMessage
-    );
+            : t(`Something went wrong: ${error.message}`)}
+        </Splash>
+      );
+    }
   }
 
   if (loading) {