notify sentry within the hook

src/hooks.spec.tsx

@@ -0,0 +1,53 @@
+import { render } from '@testing-library/react';
+import { useSetAppError } from './hooks';
+import sentryTestkit from 'sentry-testkit';
+import * as Sentry from '@sentry/react';
+import { ErrorContext } from './contexts';
+
+const { testkit, sentryTransport } = sentryTestkit();
+
+describe('useSetAppError', () => {
+  let setErrorMock: jest.Mock;
+
+  beforeEach(() => {
+    Sentry.init({
+      dsn: 'https://[email protected]/0',
+      transport: sentryTransport,
+    });
+    setErrorMock = jest.fn();
+    testkit.reset();
+  });
+
+  it('should capture exception with Sentry and set error', () => {
+    const ErrorComponent = () => {
+      useSetAppError()(new Error('test'));
+      return null;
+    };
+
+    render(
+      <ErrorContext.Provider value={{ error: null, setError: setErrorMock }}>
+        <ErrorComponent />
+      </ErrorContext.Provider>
+    )
+    expect(testkit.reports()).toHaveLength(1);
+    expect(setErrorMock).toHaveBeenCalledWith({
+      error: new Error('test'),
+      type: 'Error'
+     });
+  });
+
+  it('should clear error when called with null', () => {
+    const ResetComponent = () => {
+      useSetAppError()(null);
+      return null;
+    }
+    render(
+      <ErrorContext.Provider value={{ error: null, setError: setErrorMock }}>
+        <ResetComponent />
+      </ErrorContext.Provider>
+    )
+
+    expect(testkit.reports()).toHaveLength(0);
+    expect(setErrorMock).toHaveBeenCalledWith(null);
+  });
+});

src/hooks.ts

@@ -1,13 +1,17 @@
 import React from 'react';
 import { ErrorContext } from './contexts';
 import { getTypeFromError } from './utils';
+import * as Sentry from '@sentry/react';
 
-// Convenience hook for manually displaying an app-level error screen.
+// Convenience hook for manually displaying an app-level error screen and notifying Sentry.
 // Takes a plain error object, or null to clear the error.
 export const useSetAppError = () => {
   const { setError } = React.useContext(ErrorContext);
 
   return React.useCallback((error: Error | null) => {
+    if (error) {
+      Sentry.captureException(error);
+    }
     setError(
       // ErrorBoundary expects a wrapped SentryError
       error ? {