feat: configure sentry with SDK

Author: slawomirzaba

jest-setup.ts

@@ -11,3 +11,19 @@ jest.mock('react-native-encrypted-storage', () => ({
   removeItem: jest.fn(() => Promise.resolve()),
   clear: jest.fn(() => Promise.resolve()),
 }));
+
+jest.mock('@sentry/react-native', () => ({
+  ReactNativeClient: jest.fn().mockReturnValue({
+    init: jest.fn(),
+  }),
+  Scope: jest.fn().mockReturnValue({
+    setClient: jest.fn(),
+    setExtra: jest.fn(),
+    addBreadcrumb: jest.fn(),
+    captureException: jest.fn(),
+  }),
+}));
+
+jest.mock('@sentry/react-native/dist/js/integrations/default', () => ({
+  getDefaultIntegrations: jest.fn().mockReturnValue([]),
+}));

package.json

@@ -141,6 +141,7 @@
     "version": "0.44.1"
   },
   "dependencies": {
+    "@sentry/react-native": "^6.3.0",
     "lodash": "^4.17.21"
   }
 }

src/Contentpass.test.ts

@@ -7,6 +7,7 @@ import type { ContentpassState } from './types/ContentpassState';
 import OidcAuthStateStorage from './OidcAuthStateStorage';
 import * as FetchContentpassTokenModule from './utils/fetchContentpassToken';
 import { SCOPES } from './consts/oidcConsts';
+import * as SentryScopeModule from './sentryScope';
 
 const config: ContentpassConfig = {
   propertyId: 'propertyId-1',
@@ -39,6 +40,7 @@ describe('Contentpass', () => {
   let contentpass: Contentpass;
   let authorizeSpy: jest.SpyInstance;
   let refreshSpy: jest.SpyInstance;
+  let reportErrorSpy: jest.SpyInstance;
   let fetchContentpassTokenSpy: jest.SpyInstance;
   let oidcAuthStorageMock: OidcAuthStateStorage;
 
@@ -50,6 +52,9 @@ describe('Contentpass', () => {
     refreshSpy = jest
       .spyOn(AppAuthModule, 'refresh')
       .mockResolvedValue(EXAMPLE_REFRESH_RESULT);
+    reportErrorSpy = jest
+      .spyOn(SentryScopeModule, 'reportError')
+      .mockReturnValue(undefined);
 
     oidcAuthStorageMock = {
       storeOidcAuthState: jest.fn(),
@@ -166,13 +171,18 @@ describe('Contentpass', () => {
 
     it('should change contentpass state to error when authorize throws an error', async () => {
       const contentpassStates: ContentpassState[] = [];
-      authorizeSpy.mockRejectedValue(new Error('Authorize error'));
+      const error = new Error('Authorize error');
+      authorizeSpy.mockRejectedValue(error);
       contentpass.registerObserver((state) => {
         contentpassStates.push(state);
       });
 
       await contentpass.authenticate();
 
+      expect(reportErrorSpy).toHaveBeenCalledWith(error, {
+        msg: 'Failed to authorize',
+      });
+
       expect(contentpassStates).toHaveLength(2);
       expect(contentpassStates[1]).toEqual({
         state: 'ERROR',
@@ -291,7 +301,8 @@ describe('Contentpass', () => {
       ).getTime();
       const expectedDelay = expirationDate - NOW;
 
-      refreshSpy.mockRejectedValue(new Error('Refresh error'));
+      const refreshError = new Error('Refresh error');
+      refreshSpy.mockRejectedValue(refreshError);
 
       await jest.advanceTimersByTimeAsync(expectedDelay);
       expect(contentpassStates).toHaveLength(2);
@@ -308,7 +319,11 @@ describe('Contentpass', () => {
       });
 
       // after 6 retries the state should change to error
-      await jest.advanceTimersByTimeAsync(180001);
+      await jest.advanceTimersByTimeAsync(120001);
+      expect(reportErrorSpy).toHaveBeenCalledTimes(7);
+      expect(reportErrorSpy).toHaveBeenCalledWith(refreshError, {
+        msg: 'Failed to refresh token after 6 retries',
+      });
       expect(contentpassStates).toHaveLength(3);
       expect(contentpassStates[2]).toEqual({
         state: 'UNAUTHENTICATED',

src/Contentpass.ts

@@ -16,6 +16,7 @@ import { RefreshTokenStrategy } from './types/RefreshTokenStrategy';
 import fetchContentpassToken from './utils/fetchContentpassToken';
 import validateSubscription from './utils/validateSubscription';
 import type { ContentpassConfig } from './types/ContentpassConfig';
+import sentryScope, { reportError } from './sentryScope';
 
 export type ContentpassObserver = (state: ContentpassState) => void;
 
@@ -33,6 +34,7 @@ export default class Contentpass {
   constructor(config: ContentpassConfig) {
     this.authStateStorage = new OidcAuthStateStorage(config.propertyId);
     this.config = config;
+    sentryScope.setExtra('propertyId', config.propertyId);
     this.initialiseAuthState();
   }
 
@@ -52,7 +54,7 @@ export default class Contentpass {
         },
       });
     } catch (err: any) {
-      // FIXME: logger for error
+      reportError(err, { msg: 'Failed to authorize' });
 
       this.changeContentpassState({
         state: ContentpassStateType.ERROR,
@@ -166,7 +168,7 @@ export default class Contentpass {
 
   private refreshToken = async (counter: number) => {
     if (!this.oidcAuthState?.refreshToken) {
-      // FIXME: logger for error
+      reportError(new Error('No Refresh Token in oidcAuthState provided'));
       return;
     }
 
@@ -183,17 +185,17 @@ export default class Contentpass {
         }
       );
       await this.onNewAuthState(refreshResult);
-    } catch (err) {
+    } catch (err: any) {
       await this.onRefreshTokenError(counter, err);
     }
   };
 
-  // @ts-expect-error remove when err starts being used
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  private onRefreshTokenError = async (counter: number, err: unknown) => {
-    // FIXME: logger for error
+  private onRefreshTokenError = async (counter: number, err: Error) => {
+    reportError(err, {
+      msg: `Failed to refresh token after ${counter} retries`,
+    });
     // FIXME: add handling for specific error to not retry in every case
-    if (counter <= REFRESH_TOKEN_RETRIES) {
+    if (counter < REFRESH_TOKEN_RETRIES) {
       const delay = counter * 1000 * 10;
       await new Promise((resolve) => setTimeout(resolve, delay));
       await this.refreshToken(counter + 1);

src/index.test.tsx

@@ -0,0 +1,79 @@
+// src/sentryScope.test.ts
+import * as Sentry from '@sentry/react-native';
+import sentryScope, { reportError } from './sentryScope';
+import { defaultStackParser, makeFetchTransport } from '@sentry/react';
+
+jest.mock('@sentry/react-native', () => {
+  return {
+    ReactNativeClient: jest.fn().mockImplementation(() => ({
+      init: jest.fn(),
+      captureException: jest.fn(),
+    })),
+    Scope: jest.fn().mockImplementation(() => ({
+      setClient: jest.fn(),
+      addBreadcrumb: jest.fn(),
+      captureException: jest.fn(),
+    })),
+  };
+});
+
+describe('sentryScope', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+    jest.resetAllMocks();
+  });
+
+  it('should initialise sentry scope with correct options', () => {
+    expect(Sentry.ReactNativeClient).toHaveBeenCalledWith({
+      attachStacktrace: true,
+      autoInitializeNativeSdk: false,
+      dsn: 'https://[email protected]/8',
+      enableAppStartTracking: false,
+      enableAutoPerformanceTracing: false,
+      enableCaptureFailedRequests: false,
+      enableNative: false,
+      enableNativeCrashHandling: false,
+      enableNativeFramesTracking: false,
+      enableNativeNagger: false,
+      enableNdk: false,
+      enableStallTracking: true,
+      enableUserInteractionTracing: false,
+      enableWatchdogTerminationTracking: false,
+      maxQueueSize: 30,
+      parentSpanIsAlwaysRootSpan: true,
+      patchGlobalPromise: true,
+      sendClientReports: true,
+      integrations: [],
+      stackParser: defaultStackParser,
+      transport: makeFetchTransport,
+    });
+  });
+});
+
+describe('reportError', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+    jest.resetAllMocks();
+  });
+
+  it('should add a breadcrumb if message is provided', () => {
+    const error = new Error('Test error');
+    const msg = 'Test message';
+    reportError(error, { msg });
+
+    expect(sentryScope.addBreadcrumb).toHaveBeenCalledWith({
+      category: 'Error',
+      message: msg,
+      level: 'log',
+    });
+    expect(sentryScope.captureException).toHaveBeenCalledWith(error);
+  });
+
+  it('should capture exception without breadcrumb if no message is provided', () => {
+    const error = new Error('Test error');
+    reportError(error);
+
+    expect(sentryScope.addBreadcrumb).not.toHaveBeenCalled();
+    expect(sentryScope.captureException).toHaveBeenCalledWith(error);
+  });
+});

src/sentryScope.test.ts

@@ -0,0 +1,57 @@
+import * as Sentry from '@sentry/react-native';
+import { defaultStackParser, makeFetchTransport } from '@sentry/react';
+import { getDefaultIntegrations } from '@sentry/react-native/dist/js/integrations/default';
+
+// as it's only the open source package, we want to have minimal sentry configuration here to not override sentry instance,
+// which can be used in the application
+const options = {
+  attachStacktrace: true,
+  autoInitializeNativeSdk: false,
+  dsn: 'https://[email protected]/8',
+  enableAppStartTracking: false,
+  enableAutoPerformanceTracing: false,
+  enableCaptureFailedRequests: false,
+  enableNative: false,
+  enableNativeCrashHandling: false,
+  enableNativeFramesTracking: false,
+  enableNativeNagger: false,
+  enableNdk: false,
+  enableStallTracking: true,
+  enableUserInteractionTracing: false,
+  enableWatchdogTerminationTracking: false,
+  maxQueueSize: 30,
+  parentSpanIsAlwaysRootSpan: true,
+  patchGlobalPromise: true,
+  sendClientReports: true,
+  stackParser: defaultStackParser,
+  transport: makeFetchTransport,
+  integrations: [],
+};
+
+const sentryClient = new Sentry.ReactNativeClient({
+  ...options,
+  integrations: getDefaultIntegrations(options),
+});
+
+const sentryScope = new Sentry.Scope();
+sentryScope.setClient(sentryClient);
+
+sentryClient.init();
+
+type ReportErrorOptions = {
+  msg?: string;
+};
+
+export const reportError = (err: Error, { msg }: ReportErrorOptions = {}) => {
+  if (msg) {
+    sentryScope.addBreadcrumb({
+      category: 'Error',
+      message: msg,
+      level: 'log',
+    });
+  }
+
+  sentryScope.captureException(err);
+};
+
+export default sentryScope;

src/sentryScope.ts

@@ -36,6 +36,6 @@ describe('parseContentpassToken', () => {
 
     expect(() => {
       parseContentpassToken(invalidToken);
-    }).toThrow('Invalid token');
+    }).toThrow('Invalid token, token should have at least 3 parts');
   });
 });

src/utils/parseContentpassToken.test.ts

@@ -18,7 +18,7 @@ export default function parseContentpassToken(
 ): ParsedToken {
   const tokenParts = contentpassToken.split('.');
   if (tokenParts.length < 3) {
-    throw new Error('Invalid token');
+    throw new Error('Invalid token, token should have at least 3 parts');
   }
 
   const header = JSON.parse(atob(tokenParts[0]!));

src/utils/parseContentpassToken.ts

@@ -1,4 +1,5 @@
 import parseContentpassToken, * as ParseContentpassTokenModule from './parseContentpassToken';
+import * as SentryScopeModule from '../sentryScope';
 import validateSubscription from './validateSubscription';
 
 const EXAMPLE_CONTENTPASS_TOKEN: ReturnType<typeof parseContentpassToken> = {
@@ -18,10 +19,16 @@ const EXAMPLE_CONTENTPASS_TOKEN: ReturnType<typeof parseContentpassToken> = {
 
 describe('validateSubscription', () => {
   let parseContentpassTokenSpy: jest.SpyInstance;
+  let reportErrorSpy: jest.SpyInstance;
+
   beforeEach(() => {
     parseContentpassTokenSpy = jest
       .spyOn(ParseContentpassTokenModule, 'default')
       .mockReturnValue(EXAMPLE_CONTENTPASS_TOKEN);
+
+    reportErrorSpy = jest
+      .spyOn(SentryScopeModule, 'reportError')
+      .mockReturnValue(undefined);
   });
 
   afterEach(() => {
@@ -36,13 +43,17 @@ describe('validateSubscription', () => {
     expect(result).toBe(true);
   });
 
-  it('should return false if the token is invalid', () => {
+  it('should return false and report error if the token is invalid', () => {
+    const error = new Error('Invalid token');
     parseContentpassTokenSpy.mockImplementation(() => {
-      throw new Error('Invalid token');
+      throw error;
     });
     const result = validateSubscription('example_contentpass_token');
 
     expect(result).toBe(false);
+    expect(reportErrorSpy).toHaveBeenCalledWith(error, {
+      msg: 'Failed to validate subscription',
+    });
   });
 
   it('should return false if the user is not authenticated', () => {