adding Readme.md content + polishing solution

reducing slowness

Author: facostaembrace

plugins/node/instrumentation-react-native-redux/README.md

@@ -3,6 +3,198 @@
 [![NPM Published Version][npm-img]][npm-url]
 [![Apache License][license-image]][license-image]
 
+## Installation
+
+```bash
+npm i @opentelemetry/instrumentation-react-native-redux @opentelemetry/api
+```
+
+or if you use yarn
+
+```bash
+yarn add @opentelemetry/instrumentation-react-native-redux @opentelemetry/api
+```
+
+## Usage
+
+`@opentelemetry/instrumentation-react-native-redux` exports a custom middleware that creates telemetry data for each action dispatched by your React Native application.
+
+```javascript
+import {DarkTheme, DefaultTheme, ThemeProvider} from "@react-navigation/native";
+import {Stack} from "expo-router";
+import {Provider} from "react-redux";
+import store from './store';
+
+export default function RootLayout() {
+
+return (
+    <Provider store={store}> {/* As with any regular Redux configuration, the provider should wrap the entire application at the root of the tree. There is nothing new or custom here. */}
+      <Stack>
+        <Stack.Screen
+          name="(tabs)"
+          options={{
+            headerShown: false,
+          }}
+        />
+        <Stack.Screen name="+not-found" />
+      </Stack>
+    </Provider>
+  );
+}
+```
+
+Now, let's take a look at the Store configuration in `store.ts`. We need to implement the dispatch middleware:
+
+```javascript
+// store.ts
+
+import {dispatchMiddleware} from "@opentelemetry/instrumentation-react-native-redux";
+import {
+  BasicTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+} from "@opentelemetry/sdk-trace-base";
+import {
+  legacy_createStore as createStore,
+  combineReducers,
+  applyMiddleware,
+  Reducer,
+} from "redux";
+import rootReducer from './reducer'
+
+const exporter = new ConsoleSpanExporter();
+const processor = new SimpleSpanProcessor(exporter);
+const provider = new BasicTracerProvider();
+
+provider.addSpanProcessor(processor);
+provider.register();
+
+const middleware = dispatchMiddleware<RootState>(provider, {
+  // Here the new middleware is configured in debug mode. It will display console messages in this case.
+  // To shut them down, we need to turn it to `false`.
+  debug: true,
+});
+
+const store = createStore(rootReducer, applyMiddleware(middleware));
+export default store;
+```
+
+Just for completeness of the example, the rest of the configuration can look like:
+
+```javascript
+// actions.ts
+
+type IncrementAction = {
+  type: "COUNTER_INCREASE";
+  count: number;
+};
+
+type DecrementAction = {
+  type: "COUNTER_DECREASE";
+  count: number;
+};
+
+type CounterState = {
+  count: number;
+};
+
+const initialCounterState: CounterState = {
+  count: 0,
+};
+
+const counterIncrease = (count = 1): IncrementAction => ({
+  type: "COUNTER_INCREASE",
+  count,
+});
+
+const counterDecrease = (count = 1): DecrementAction => ({
+  type: "COUNTER_DECREASE",
+  count,
+});
+
+/**
+ * Counter actions (for testing purposes)
+ */
+type CounterActions = IncrementAction | DecrementAction;
+
+export {counterIncrease, counterDecrease, initialCounterState};
+export type {CounterState, CounterActions}
+```
+
+```javascript
+// reducers.ts
+
+import { combineReducers, Reducer } from "redux";
+import { initialCounterState, CounterState, CounterActions } from './actions';
+
+/**
+ * Counter reducer (for testing purposes)
+ */
+const counterReducer: Reducer<CounterState, CounterActions> = (
+  state = initialCounterState,
+  action,
+) => {
+  switch (action.type) {
+    case "COUNTER_INCREASE": {
+      return {...state, count: state.count + action.count};
+    }
+    case "COUNTER_DECREASE": {
+      return {...state, count: state.count - action.count};
+    }
+    default:
+      return state;
+  }
+};
+
+/**
+ * Root reducer (in case of multiple reducers)
+ */
+const rootReducer = combineReducers({
+  counter: counterReducer,
+});
+
+type RootState = ReturnType<typeof rootReducer>;
+
+export default rootReducer;
+export type {RootState};
+```
+
+This middleware was prepared to accept a custom provider to start creating telemetry data, but if it is not passed, it will use a global tracer provider instead.
+Internally, each `redux` dispatched action can take a few milliseconds to process (depending on how heavy the transaction is) and that is why this instrumentation library produces Spans. Each Span will display a static name, and besides that, it will add a few attributes.
+
+The following object is the representation of what the middleware will create for a dispatched action:
+
+```bash
+{
+  resource: {
+    attributes: {
+      'service.name': 'unknown_service:node',
+      'telemetry.sdk.language': 'nodejs',
+      'telemetry.sdk.name': 'opentelemetry',
+      'telemetry.sdk.version': '1.25.1'
+    }
+  },
+  traceId: '9c591b898c2e85c49f283d1e6393aae1',
+  parentId: undefined,
+  traceState: undefined,
+  name: 'action',
+  id: 'aa80b027f2570181',
+  kind: 0,
+  timestamp: 1722889197399000,
+  duration: 52.166,
+  attributes: {
+    'action.payload': '{"count":1}',
+    'action.type': 'COUNTER_DECREASE',
+    'action.state': 'active'
+  },
+  status: { code: 0 },
+  events: [],
+  links: []
+}
+```
+As mentioned above, the `name` of this Span is `action` (static). The `action.type` is injected as an attribute, as well as `action.payload`, which is a string that adds whatever the action has (except for the mentioned `action.type`).
+Finally, the middleware adds the `action.state`, which provides information about the state of the application (`AppState.currentState`).
+
 ## Useful links
 
 - For more information on OpenTelemetry, visit: <https://opentelemetry.io/>

plugins/node/instrumentation-react-native-redux/src/dispatch.ts

@@ -14,25 +14,27 @@
  * limitations under the License.
  */
 import { Dispatch, Middleware, Action, UnknownAction } from 'redux';
-import { TracerProvider, trace } from '@opentelemetry/api';
+import { TracerProvider, trace, Attributes } from '@opentelemetry/api';
 import { PACKAGE_NAME, PACKAGE_VERSION } from './version';
-import { spanEnd, spanStart } from './utils/spanFactory';
+import {
+  ATTRIBUTES,
+  spanEnd,
+  spanStart,
+  STATIC_NAME,
+} from './utils/spanFactory';
 import logFactory from './utils/logFactory';
 
-const SPAN_NAME = {
-  thunk: 'thunk',
-  action: 'action',
-};
-
 interface MiddlewareConfig {
   debug?: boolean;
+  name?: string; // custom name for each action
+  attributes?: Attributes;
 }
 
 const middleware = <RootState>(
   provider: TracerProvider | undefined,
   config?: MiddlewareConfig
 ): Middleware<object, RootState> => {
-  const { debug } = config || {};
+  const { debug, name, attributes } = config || {};
   const console = logFactory(!!debug);
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -50,15 +52,15 @@ const middleware = <RootState>(
 
     return (next: Dispatch<UnknownAction>) => {
       return (action: Action) => {
-        const span = spanStart(tracer, SPAN_NAME.action);
+        const span = spanStart(tracer, name ?? STATIC_NAME, { attributes });
         const result = next(action);
 
         if (span) {
           const { type, ...otherValues } = result;
 
           span.setAttributes({
-            type,
-            payload: JSON.stringify(otherValues),
+            [ATTRIBUTES.type]: type,
+            [ATTRIBUTES.payload]: JSON.stringify(otherValues),
           });
 
           spanEnd(span);

plugins/node/instrumentation-react-native-redux/src/utils/spanFactory.ts

@@ -16,9 +16,11 @@
 import { AppState } from 'react-native';
 import { Context, Span, SpanOptions, Tracer } from '@opentelemetry/api';
 
+const STATIC_NAME = 'action';
 const ATTRIBUTES = {
-  name: 'action.name',
-  appState: 'action.state',
+  payload: `${STATIC_NAME}.payload`,
+  type: `${STATIC_NAME}.type`,
+  appState: `${STATIC_NAME}.state`,
 };
 
 const spanStart = (
@@ -42,4 +44,4 @@ const spanEnd = (span: Span | null) => {
   }
 };
 
-export { spanStart, spanEnd, ATTRIBUTES };
+export { spanStart, spanEnd, ATTRIBUTES, STATIC_NAME };

plugins/node/instrumentation-react-native-redux/test/dispatch.test.tsx

@@ -87,9 +87,9 @@ describe('dispatch.ts', () => {
         timestamp: sandbox.match.number,
         duration: sandbox.match.number,
         attributes: {
-          type: 'COUNTER_INCREASE:slow',
+          'action.type': 'COUNTER_INCREASE:slow',
           'action.state': 'background',
-          payload: '{"count":3}',
+          'action.payload': '{"count":3}',
         },
       }),
       sandbox.match({
@@ -106,9 +106,9 @@ describe('dispatch.ts', () => {
         timestamp: sandbox.match.number,
         duration: sandbox.match.number,
         attributes: {
-          type: 'COUNTER_DECREASE:normal',
+          'action.type': 'COUNTER_DECREASE:normal',
           'action.state': 'background',
-          payload: '{"count":1}',
+          'action.payload': '{"count":1}',
         },
       }),
       sandbox.match({

plugins/node/instrumentation-react-native-redux/test/helper/store.ts

@@ -66,7 +66,7 @@ const counterReducer: Reducer<CounterState, CounterActions> = (
   switch (action.type) {
     case 'COUNTER_INCREASE:slow': {
       // NOTE: adding slowliness to the action for testing purposes
-      const test = new Array(100000000);
+      const test = new Array(1000000);
       test.forEach((_, index) => (test[index] = true));
 
       return { ...state, count: state.count + action.count };