Implement flipper pluggin (#14)

* IM-0 - readapt reactotron + bump version

* IM-0 - cleaning

* IM-0 - add tealium and adobbe

* IM-0 - add travis and improve docs

* IM-0 - imrove readme

* IM-0 - add exclusion feature and update docs

* IM-0 - clean

* IM-0 - small clean

* IM-0 - improve docs

* IM-0 - improve docs

* Update REFERENCE_API.md

* Update README.md

* IM-0 - upgrade package

* IM-0 - implement flipper plugin

* IM-0 - update docs + bump version

* IM-0 - fix test

* IM-0 - fix jest timezone

Co-authored-by: Imran Mentese <imran.mentese@arhs-spikeseed.com>

Author: imranMnts

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+### Version 1.2.0
+    
+- News
+    - Can be plugged to Flipper with `flipper-plugin-react-native-logging-tools` to display all events sent to different service.
+
 ### Version 1.1.0
 
 - News

README.md

@@ -9,6 +9,7 @@ A react native module that lets you:
  - Send logs to multiple services in one time
  - Send crash/error reports to multiple services in one time
  - Register a global error handler which will capture fatal JS exceptions and send a report to your crash reporter libraries
+ - Can be plugged to Flipper to display all events sent to different service.
 
 and all this, as easily as possible
 
@@ -23,6 +24,7 @@ and all this, as easily as possible
             - [Error Events](#error-events)
         - [Reactotron](#reactotron)
         - [JS Error handler](#js-error-handler)
+        - [Flipper](#flipper)
 
 ---
 
@@ -94,7 +96,7 @@ init({
 });
 ```
 
-:information_source: Documentation and example about initialization steps can be found [here](./REFERENCE_API.md).
+:information_source: Documentation and example about initialization steps can be found [here](./REFERENCE_API.md#init).
 
 ### Features
 
@@ -112,7 +114,7 @@ logNetworkEvent('EVENT_NAME', { your_key: 'value', ... });
 logErrorEvent('EVENT_NAME', { your_key: 'value', ... });
 ```
 
-:information_source: Documentation and example about logging event can be found [here](./REFERENCE_API.md).
+:information_source: Documentation and example about logging event can be found [here](./REFERENCE_API.md#logEvent).
 
 If you use `react-navigation` and you want send to analytics navigation events e.g, you can add `logEvent` to his event handler [(React-navigation docs)](https://reactnavigation.org/docs/navigation-events/)
 
@@ -125,12 +127,17 @@ You can call this function where do you want/need to send logs to each plugged l
 recordError('EVENT_NAME', { your_key: 'value', ... });
 ```
 
-:information_source: Documentation and example about error reporting can be found [here](./REFERENCE_API.md).
+:information_source: Documentation and example about error reporting can be found [here](./REFERENCE_API.md#recordError).
 
 #### Reactotron
 
-:information_source: Documentation and example about Reactotron can be found [here](./REFERENCE_API.md).
+:information_source: Documentation and example about Reactotron can be found [here](./REFERENCE_API.md#setupreactotron).
 
 #### JS Error handler
 
-:information_source: Documentation and example about Reactotron can be found [here](./REFERENCE_API.md).
+:information_source: Documentation and example about Reactotron can be found [here](./REFERENCE_API.md#init).
+
+#### Flipper
+
+:information_source: Documentation about Flipper can be found [here](./REFERENCE_API.md#flipper).
+

REFERENCE_API.md

@@ -19,14 +19,18 @@ Page containing the full index of all React Native Logging Tools reference API t
     - [logNetworkEvent](#lognetworkevent)
     - [logErrorEvent](#logerrorevent)
     - [recordError](#recorderror)
+- [Flipper](#flipper)
 - [Supported libraries](#supported-libraries)
   - [Firebase crashlytics](#firebase-crashlytics)
   - [Firebase analytics](#firebase-analytics)
   - [Sentry](#sentry)
+  - [Instabug](#instabug)
+  - [Adobe](#adobe)
+  - [Tealium](#tealium)
 
 ## API
 
-### init
+### <a name="init">init</a>
 
 Library initializer, to be used before anything
 
@@ -38,6 +42,7 @@ init is an object which take three keys/values:
   - `AsyncStorage`: from @react-native-community/async-storage ie (optional)
   - `reportJSErrors: boolean`: set to true if you want turn on automatic fetch and send js crash to `errorReporters` (optional)
   - `isSensitiveBuild: boolean`: set to true if you want defined some logEvent as sensitive and not send log for this one (optional)
+  - `useFlipperPlugin: boolean`: set to true if you want use flipper plugin [More details](#flipper)  (optional)
   - `excludeLogs: object`: to exclude log types to not send to libraries which have been set (optional)       
 
         - `adobe: Array<number>`: add to an array, the log types which should *NOT* sent to adobe (optional)
@@ -76,7 +81,7 @@ init({
 
 ---
 
-### setupReactotron
+### <a name="setupReactotron">setupReactotron</a>
 
 To plug Reactotron to your redux store.
 
@@ -112,7 +117,7 @@ const store = createStore(
 
 ---
 
-### createFirebaseLogger
+### <a name="createFirebaseLogger">createFirebaseLogger</a>
 
 To plug Firebase analytics to send event later.
 
@@ -131,7 +136,7 @@ init({
 
 ---
 
-### createSentryLogger
+### <a name="createSentryLogger">createSentryLogger</a>
 
 To plug Sentry to send event later.
 
@@ -152,7 +157,7 @@ init({
 
 ---
 
-### createInstabugLogger
+### <a name="createInstabugLogger">createInstabugLogger</a>
 
 To plug Instabug to send event later.
 
@@ -174,7 +179,7 @@ init({
 
 ---
 
-### createTealiumLogger
+### <a name="createTealiumLogger">createTealiumLogger</a>
 
 To plug Tealium to send event later.
 
@@ -203,7 +208,7 @@ init({
 
 ---
 
-### createAdobeLogger
+### <a name="createAdobeLogger">createAdobeLogger</a>
 
 To plug Adobe to send event later.
 
@@ -223,7 +228,7 @@ init({
 
 ---
 
-### createCrashlyticsLogger
+### <a name="createCrashlyticsLogger">createCrashlyticsLogger</a>
 
 To plug Firebase crashlytics to send event later.
 
@@ -242,7 +247,7 @@ init({
 
 ---
 
-### logEvent
+### <a name="logEvent">logEvent</a>
 
 To send an event to analytics services
 
@@ -260,7 +265,7 @@ logEvent('EVENT_NAME', { your_key: 'value' }, true);
 
 ---
 
-### logDebugEvent
+### <a name="logDebugEvent">logDebugEvent</a>
 
 To send an event to analytics services, it's the same as `logEvent` but it will
  - Automatically prefix the event name with `D/` to facilitate the reading
@@ -299,7 +304,7 @@ logDebugEvent('EVENT_NAME', { your_key: 'value' }, true);
 
 ---
 
-### logWarningEvent
+### <a name="logWarningEvent">logWarningEvent</a>
 
 To send an event to analytics services, it's the same as `logEvent` but it will:
  - Automatically prefix the event name with `W/` to facilitate the reading
@@ -340,7 +345,7 @@ logWarningEvent('EVENT_NAME', { your_key: 'value' }, true);
 
 ---
 
-### logNetworkEvent
+### <a name="logNetworkEvent">logNetworkEvent</a>
 
 To send an event to analytics services, it's the same as `logEvent` but it will:
  - Automatically prefix the event name with `N/` to facilitate the reading
@@ -379,7 +384,7 @@ logNetworkEvent('EVENT_NAME', { your_key: 'value' }, true);
 
 ---
 
-### logErrorEvent
+### <a name="logErrorEvent">logErrorEvent</a>
 
 To send an event to analytics services, it's the same as `logEvent` but it will:
  - Automatically prefix the event name with `E/` to facilitate the reading
@@ -417,7 +422,7 @@ logErrorEvent('EVENT_NAME', { your_key: 'value' }, true);
 
 ---
 
-### recordError
+### <a name="recordError">recordError</a>
 
 To send an error report to error reporter services
 
@@ -434,6 +439,11 @@ recordError('EVENT_NAME', { your_key: 'value' });
 
 ---
 
+### <a name="flipper">Flipper</a>
+
+You can display all events sent to different service on Flipper desktop app.
+Follow plugin's documentation to install it [link](https://github.com/imranMnts/flipper-plugin-react-native-logging-tools) and set `useFlipperPlugin` to true during initialization to be able to use it.
+
 ### Supported libraries
 
 #### Firebase crashlytics

jest.setup.ts

@@ -3,3 +3,5 @@ import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });
 
+jest.mock('react-native-flipper');
+

package.json

@@ -1,16 +1,15 @@
 {
   "name": "react-native-logging-tools",
   "title": "React Native library created to ease logging",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "src/index.ts",
   "typings": "index.d.ts",
-  "publishConfig": { "registry": "https://npm.pkg.github.com/" },
   "scripts": {
     "prettier:fix": "prettier --config ./.prettierrc.js --write --check \"src/**/*.ts\" ",
     "lint:fix": "tslint -p tsconfig.json --fix 'src/**/*.tsx' 'src/**/*.ts'",
     "precommit": "yarn run prettier:fix && yarn run lint:fix && yarn run tsc",
-    "test": "jest",
-    "testu": "node_modules/.bin/jest --updateSnapshot --i",
+    "test": "TZ=UTC jest",
+    "testu": "TZ=UTC node_modules/.bin/jest --updateSnapshot --i",
     "tsc": "tsc"
   },
   "keywords": [
@@ -43,6 +42,7 @@
     "instabug-reactnative": ">=9.0.0",
     "react": "^16.8.1",
     "react-native": ">=0.60.0-rc.0 <1.0.x",
+    "react-native-flipper": ">=0.50.0",
     "reactotron-react-native": ">=4.0.0",
     "reactotron-redux": ">=3.0.0",
     "tealium-react-native": ">=1.0.10"
@@ -57,6 +57,7 @@
     "react": "16.13.1",
     "react-dom": "^16.13.0",
     "react-native": "0.63.0",
+    "react-native-flipper": "^0.50.0",
     "reactotron-react-native": "4.0.2",
     "reactotron-redux": "^3.1.2",
     "ts-jest": "^25.0.0",
@@ -84,7 +85,7 @@
     },
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
     "transformIgnorePatterns": [
-      "./node_modules/(?!react-native|react-navigation|react-navigation-stack|reactotron-react-native|react-native-localize)/"
+      "./node_modules/(?!react-native)/"
     ],
     "coverageThreshold": {
       "global": {

src/__tests__/index.spec.ts

@@ -4,7 +4,6 @@ import {
   createFirebaseLogger,
   createAdobeLogger,
   createTealiumLogger,
-  setupReactotron,
   logEvent,
   createCrashlyticsLogger,
   recordError,
@@ -58,8 +57,6 @@ describe('index test suite', () => {
   };
   const configTealium: ITealium = { account: 'accountName', profile: 'profileName', environment: 'environment' };
 
-  const AsyncStorage = jest.fn();
-  const reactotronRedux = jest.fn();
   const Reactotron = {
     configure: () => Reactotron,
     setAsyncStorageHandler: () => Reactotron,
@@ -92,6 +89,7 @@ describe('index test suite', () => {
   it('should init properly and log event with reject', () => {
     init({
       config: {
+        useFlipperPlugin: true,
         excludeLogs: {
           instabug: [DEBUG_LOG],
           tealium: [DEBUG_LOG],
@@ -105,17 +103,23 @@ describe('index test suite', () => {
         createInstabugLogger(instabug, { invocationEvent: 'shake', token: 'token' }),
         createTealiumLogger(Tealium, configTealium),
         createAdobeLogger(ACPAnalytics, ACPCore),
-        createFirebaseLogger({}),
-        createSentryLogger({ init: jest.fn() }, { dsn: 'dsn' }),
+        createFirebaseLogger(analytics),
+        createSentryLogger(sentry, { dsn: 'dsn' }),
         createCrashlyticsLogger(crashlytics),
       ],
     });
     logDebugEvent('event');
+    logWarningEvent('event');
   });
 
   it('should init not properly 2', () => {
     init({
-      config: { reportJSErrors: true, isSensitiveBuild: true, excludeLogs: { instabug: [DEBUG_LOG] } },
+      config: {
+        reportJSErrors: true,
+        isSensitiveBuild: true,
+        useFlipperPlugin: true,
+        excludeLogs: { instabug: [DEBUG_LOG] },
+      },
     });
     expect(excludeLogs).toEqual({ instabug: [DEBUG_LOG] });
   });
@@ -242,6 +246,11 @@ describe('index test suite', () => {
     recordError('error');
   });
 
+  it('should init properly and record error without flipper', () => {
+    init({ config: { reportJSErrors: true }, errorReporters: [createCrashlyticsLogger(crashlytics)] });
+    recordError('error', { key: 'value' });
+  });
+
   function givenSetSensitiveBuild(isSensitive: boolean = true) {
     // @ts-ignore
     Init.isSensitiveBuild = isSensitive;

src/flipper/__tests__/index.spec.ts

@@ -0,0 +1,16 @@
+import FlipperConnectionManager from '../index';
+import { getCurrentDateTime } from '../../helpers/functions';
+
+jest.mock('../../helpers/functions', () => ({
+  getCurrentDateTime: jest.fn(),
+}))
+
+describe('flipper test suite', () => {
+  it('should init properly flipper and send event', () => {
+    const flipper = new FlipperConnectionManager();
+    flipper.handleConnect({ send: jest.fn() });
+    flipper.send('service', 'event');
+    expect(getCurrentDateTime).toHaveBeenCalledTimes(1);
+    flipper.handleDisconnect();
+  });
+});

src/flipper/index.ts

@@ -0,0 +1,39 @@
+import { addPlugin } from 'react-native-flipper';
+import { getCurrentDateTime } from '../helpers/functions';
+
+export default class FlipperConnectionManager {
+  private flipperConnection?: any;
+
+  constructor() {
+    /* istanbul ignore next */addPlugin({
+      runInBackground: () => true,
+      getId() {
+        return 'flipper-plugin-react-native-logging-tools';
+      },
+      onConnect: this.handleConnect,
+      onDisconnect: this.handleDisconnect,
+    });
+  }
+
+  handleConnect = (connection: any) => {
+    this.flipperConnection = connection;
+  };
+
+  handleDisconnect = () => {
+    this.flipperConnection = undefined;
+  };
+
+  send(service: string, event: string, params?: any, error?: any) {
+    const payload: any = {
+      service,
+      event,
+      params,
+      error,
+      time: getCurrentDateTime(),
+    };
+
+    if (this.flipperConnection) {
+      this.flipperConnection.send('action', payload);
+    }
+  }
+}