react-native-in-app-debugger 1.0.0

package/Api.jsx

@@ -0,0 +1,211 @@
+import React, { useState } from 'react';
+import { Text, SectionList, TextInput, View, Alert, StyleSheet, TouchableOpacity } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+const MAX_URL_LENGTH = 100;
+
+const Row = ({ item }) => {
+  const [tab, setTab] = useState('response-body');
+  const hasResponse = item.response;
+  const Tab = ({ value, label }) => {
+    const isSelected = value === tab;
+    return (
+      <TouchableOpacity
+        activeOpacity={isSelected ? 1 : 0.7}
+        onPress={() => setTab(value)}
+        style={[styles.selectionTab, { backgroundColor: isSelected ? 'white' : undefined }]}
+      >
+        <Text style={{ color: isSelected ? '#000' : '#fff', textAlign: 'center' }}>{label}</Text>
+      </TouchableOpacity>
+    );
+  };
+  return (
+    <View style={styles.details}>
+      {item.request.url.length > MAX_URL_LENGTH && (
+        <Text style={{ color: '#ffffff99', paddingVertical: 20 }}>{item.request.url}</Text>
+      )}
+      <View>
+        <View style={{ flexDirection: 'row' }}>
+          <Tab value='response-body' label='Response Body' />
+          {!!item.request.data && <Tab value='request-body' label='Request Body' />}
+          <Tab value='request-header' label='Request Header' />
+        </View>
+
+        {tab === 'response-body' && hasResponse && (
+          <Text style={{ color: 'white' }}>{JSON.stringify(item.response.data, undefined, 4)}</Text>
+        )}
+        {tab === 'request-body' && (
+          <Text style={{ color: 'white' }}>{JSON.stringify(item.request.data, undefined, 4)}</Text>
+        )}
+        {tab === 'request-header' && (
+          <Text style={{ color: 'white' }}>{JSON.stringify(item.request.headers, undefined, 4)}</Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default (props) => {
+  const [filter, setFilter] = useState('');
+  const [errorOnly, setErrorOnly] = useState(false);
+  const [filterUrlOnly, setFilterUrlOnly] = useState(true);
+  const [expands, setExpands] = useState({});
+  const apis = props.apis.filter((a) => !errorOnly || a.response?.status < 200 || a.response?.status >= 400);
+
+  const hasError = apis.some((a) => a.response?.status < 200 || a.response?.status >= 400);
+
+  return (
+    <>
+      <View style={{ flexDirection: 'row', paddingLeft: 5, alignItems: 'center', gap: 5 }}>
+        {!!apis.length && !filter && (
+          <TouchableOpacity
+            style={{ padding: 5, backgroundColor: 'white', borderRadius: 5 }}
+            onPress={() =>
+              Alert.alert('Are you sure', 'You want to clear all logs', [
+                { text: 'Delete', onPress: props.clear, style: 'cancel' },
+                { text: 'Cancel' },
+              ])
+            }
+          >
+            <Text style={{ color: 'black' }}>Clear {apis.length} APIs</Text>
+          </TouchableOpacity>
+        )}
+        {hasError && !filter && (
+          <TouchableOpacity style={{ padding: 5 }} onPress={() => setErrorOnly((v) => !v)}>
+            <Text style={{ color: 'red', textDecorationLine: errorOnly ? 'line-through' : undefined }}>Error Only</Text>
+          </TouchableOpacity>
+        )}
+        <View style={{ flexDirection: 'row', flex: 1 }}>
+          <TextInput
+            value={filter}
+            placeholder='Filter...'
+            clearButtonMode='always'
+            placeholderTextColor='grey'
+            style={{ paddingHorizontal: 5, color: 'white', flex: 1 }}
+            onChangeText={(t) => setFilter(t.toLowerCase())}
+          />
+        </View>
+        {!!filter && (
+          <TouchableOpacity style={{ padding: 5 }} onPress={() => setFilterUrlOnly((v) => !v)}>
+            <Text style={{ color: '#ffffff88' }}>{filterUrlOnly ? 'by URL' : 'by URL & body'}</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+      <SectionList
+        contentContainerStyle={{ padding: 5 }}
+        keyExtractor={(i) => i.id}
+        stickySectionHeadersEnabled
+        sections={apis
+          .filter((a) =>
+            !filter || filterUrlOnly
+              ? a.request.url.includes(filter)
+              : JSON.stringify(a).toLowerCase().includes(filter),
+          )
+          .map((data) => ({ data: [data], id: data.id }))}
+        renderItem={(i) => (expands[i.item.id] ? <Row {...i} /> : <View style={{ height: 20 }} />)}
+        renderSectionHeader={({ section: { data } }) => {
+          const item = data[0];
+          const hasResponse = !!item.response;
+
+          let duration = 0;
+          if (item.response?.datetime) {
+            let [hr, min, sec] = item.request.datetime.split(' ')[0].split(':');
+            const start = new Date();
+            start.setHours(hr);
+            start.setMinutes(min);
+            start.setSeconds(sec);
+            [hr, min, sec] = item.response.datetime.split(' ')[0].split(':');
+            const end = new Date();
+            end.setHours(hr);
+            end.setMinutes(min);
+            end.setSeconds(sec);
+            duration = (end.getTime() - start.getTime()) / 1000;
+          }
+          const isExpand = expands[item.id];
+          return (
+            <View style={styles.rowHeader}>
+              <Text
+                selectable
+                style={{
+                  flex: 1,
+                  color: hasResponse ? (item.response.error ? 'red' : 'white') : 'yellow',
+                  marginVertical: 10,
+                }}
+              >
+                <Text style={{ opacity: 0.7 }}>
+                  {item.request.method +
+                    ` (${item.response?.status ?? 'no response'})` +
+                    ' - ' +
+                    item.request.datetime +
+                    (hasResponse ? ' - ' + duration + ' second(s)' : '') +
+                    '\n'}
+                </Text>
+                {item.request.url.slice(0, MAX_URL_LENGTH)}
+                {item.request.url.length > MAX_URL_LENGTH && '.......'}
+              </Text>
+              <View style={{ gap: 4 }}>
+                <TouchableOpacity
+                  onPress={() =>
+                    setExpands((v) => {
+                      if (!isExpand) return { ...v, [item.id]: true };
+                      const newV = { ...v };
+                      delete newV[item.id];
+                      return newV;
+                    })
+                  }
+                  style={styles.actionButton}
+                >
+                  <Text style={{ color: 'black' }}>{isExpand ? 'Hide' : 'Show'}</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={() => {
+                    const content = { ...item };
+                    delete content.id;
+                    Clipboard.setString(JSON.stringify(content, undefined, 4));
+                  }}
+                  style={styles.actionButton}
+                >
+                  <Text style={{ color: 'black' }}>Copy</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          );
+        }}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  details: {
+    padding: 5,
+    backgroundColor: '#171717',
+    paddingTop: 10,
+    paddingBottom: 40,
+  },
+  actionButton: { backgroundColor: 'white', borderRadius: 5, padding: 4 },
+  rowHeader: {
+    flexDirection: 'row',
+    gap: 5,
+    backgroundColor: 'black',
+    padding: 5,
+    paddingTop: 20,
+    shadowColor: 'black',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowRadius: 5,
+    shadowOpacity: 1,
+    // TODO shadow not working on android
+    elevation: 10,
+    zIndex: 99,
+  },
+  selectionTab: {
+    borderBottomColor: 'white',
+    borderBottomWidth: 2,
+    flex: 1,
+    borderTopEndRadius: 10,
+    borderTopStartRadius: 10,
+  },
+});

package/Variables.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Text, FlatList, TextInput } from 'react-native';
+
+export default ({ envs }) => {
+  const [filter, setFilter] = useState('');
+
+  return (
+    <>
+      <TextInput
+        value={filter}
+        placeholder='Filter...'
+        placeholderTextColor='grey'
+        style={{ paddingHorizontal: 5, color: 'white' }}
+        onChangeText={(t) => setFilter(t.toLowerCase())}
+      />
+      <FlatList
+        contentContainerStyle={{ padding: 5, paddingBottom: 20 }}
+        data={Object.keys(envs).filter(
+          (k) => !filter || envs[k].toLowerCase().includes(filter) || k.toLowerCase().includes(filter),
+        )}
+        keyExtractor={(i) => i}
+        renderItem={({ item }) => (
+          <Text selectable style={{ color: 'white', marginVertical: 10 }}>
+            {item + ' : ' + envs[item]}
+          </Text>
+        )}
+      />
+    </>
+  );
+};

package/index.jsx

@@ -0,0 +1,111 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+// hooks are prevented to be called conditionally, but in this case, bundle id / package name will never changed in run time, so it is safe to call the hooks under that condition
+
+import useAnimation from './useAnimation';
+import React, { useState } from 'react';
+import { Animated, Text, StyleSheet, TouchableOpacity, View, SafeAreaView, Dimensions } from 'react-native';
+import DeviceInfo from 'react-native-device-info';
+import Variables from './Variables';
+import Api from './Api';
+import useApiInterceptor from './useApiInterceptor';
+
+const dimension = Dimensions.get('window');
+
+const Label = (props) => <Text {...props} numberOfLines={1} ellipsizeMode='tail' style={[styles.label, props.style]} />;
+
+export default ({ variables, env }) => {
+  const { apis, clear } = useApiInterceptor();
+
+  const [tab, setTab] = useState('api');
+
+  const errors = apis.filter((a) => a.response?.error).length;
+  const numPendingApiCalls = apis.filter((a) => !a.response).length;
+  let badgeHeight = 30;
+  if (variables.GIT_BRANCH) badgeHeight += 10;
+  if (variables.BUILD_DATE_TIME) badgeHeight += 10;
+
+  const { translateX, translateY, borderRadius, width, height, isOpen, panResponder, setIsOpen } =
+    useAnimation(badgeHeight);
+  return (
+    <Animated.View
+      style={{
+        transform: [{ translateX }, { translateY }],
+        position: 'absolute',
+        borderRadius,
+        backgroundColor: '#000000' + (isOpen ? 'dd' : 'bb'),
+        height,
+        width,
+      }}
+      {...(isOpen ? {} : panResponder.panHandlers)}
+    >
+      {!isOpen ? (
+        <TouchableOpacity onPress={() => setIsOpen(true)} style={styles.box}>
+          <View style={styles.badgeContainer}>
+            {!!numPendingApiCalls && (
+              <View style={[styles.badge, { backgroundColor: 'orange' }]}>
+                <Text style={{ fontSize: 8, color: 'white' }}>{numPendingApiCalls}</Text>
+              </View>
+            )}
+            {!!errors && (
+              <View style={[styles.badge, { backgroundColor: 'red' }]}>
+                <Text style={{ fontSize: 8, color: 'white' }}>{errors}</Text>
+              </View>
+            )}
+          </View>
+          <Label>{env + ' ' + DeviceInfo.getReadableVersion()}</Label>
+          <Label style={{ fontSize: 6 }}>{DeviceInfo.getDeviceId() + ' ' + DeviceInfo.getSystemVersion()}</Label>
+          <Label style={{ fontSize: 6 }}>{dimension.width + 'x' + dimension.height}</Label>
+          {variables.GIT_BRANCH && <Label style={{ fontSize: 6 }}>{variables.GIT_BRANCH}</Label>}
+          {variables.BUILD_DATE_TIME && <Label style={{ fontSize: 6 }}>{variables.BUILD_DATE_TIME}</Label>}
+        </TouchableOpacity>
+      ) : (
+        <SafeAreaView style={{ flex: 1 }}>
+          <View style={{ flexDirection: 'row', padding: 5 }}>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              {['api', 'env'].map((t) => {
+                const isSelected = t === tab;
+                return (
+                  <TouchableOpacity
+                    onPress={() => setTab(t)}
+                    activeOpacity={isSelected ? 1 : 0.7}
+                    key={t}
+                    style={{ flex: 1, borderBottomWidth: +isSelected, borderColor: 'white' }}
+                  >
+                    <Text style={{ color: 'white', textAlign: 'center' }}>{t.toUpperCase()}</Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+            <TouchableOpacity onPress={() => setIsOpen(false)}>
+              <Text style={styles.close}>X</Text>
+            </TouchableOpacity>
+          </View>
+          {tab === 'env' && <Variables variables={variables} />}
+          {tab === 'api' && <Api apis={apis} clear={clear} />}
+        </SafeAreaView>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  box: {
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+  },
+  label: { color: 'white', textAlign: 'center', fontSize: 8 },
+  badgeContainer: {
+    gap: 3,
+    flexDirection: 'row',
+    top: -8,
+    right: -3,
+    position: 'absolute',
+    zIndex: 999,
+  },
+  badge: {
+    padding: 4,
+    borderRadius: 999,
+  },
+  close: { color: 'white', fontWeight: 'bold', fontSize: 16, paddingHorizontal: 10 },
+});

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "react-native-in-app-debugger",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.jsx",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "fattahmuhyiddeen",
+  "license": "MIT"
+}

package/useAnimation.ts

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from 'react';
+import { Animated, PanResponder, useWindowDimensions } from 'react-native';
+
+const defaultBadgeWidth = 80;
+const defaultBorderRadius = 20;
+const und = { useNativeDriver: false };
+const touchThreshold = 10;
+
+export default (defaultBadgeHeight) => {
+  const cachePosition = useRef({ x: 0, y: 50 });
+  const position = useRef<any>(new Animated.ValueXY(cachePosition.current)).current;
+  const borderRadius = useRef(new Animated.Value(defaultBorderRadius)).current;
+  const badgeHeight = useRef(new Animated.Value(defaultBadgeHeight)).current;
+  const badgeWidth = useRef(new Animated.Value(defaultBadgeWidth)).current;
+  const { width, height } = useWindowDimensions();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        const { dx, dy } = gestureState;
+        return Math.abs(dx) > touchThreshold || Math.abs(dy) > touchThreshold;
+      },
+      onPanResponderGrant: () => {
+        position.setOffset({ x: position.x._value, y: position.y._value });
+      },
+      onPanResponderMove: Animated.event([null, { dx: position.x, dy: position.y }], und),
+      onPanResponderRelease: (_, g) => {
+        position.flattenOffset();
+        cachePosition.current = { x: g.moveX > width / 2 ? width - defaultBadgeWidth : 0, y: g.moveY };
+        Animated.spring(position, { ...und, toValue: cachePosition.current }).start();
+      },
+    }),
+  ).current;
+
+  useEffect(() => {
+    Animated.spring(position, { toValue: isOpen ? { x: 0, y: 0 } : cachePosition.current, ...und }).start();
+    Animated.spring(borderRadius, { toValue: isOpen ? 0 : defaultBorderRadius, ...und }).start();
+    Animated.spring(badgeHeight, { toValue: isOpen ? height : defaultBadgeHeight, ...und }).start();
+    Animated.spring(badgeWidth, { toValue: isOpen ? width : defaultBadgeWidth, ...und }).start();
+  }, [isOpen]);
+
+  return {
+    height: badgeHeight,
+    width: badgeWidth,
+    panResponder,
+    translateX: position.x,
+    translateY: position.y,
+    isOpen,
+    setIsOpen,
+    borderRadius,
+  };
+};

package/useApiInterceptor.js

@@ -0,0 +1,124 @@
+// @ts-nocheck
+import { useEffect, useState } from 'react';
+import XHRInterceptor from 'react-native/Libraries/Network/XHRInterceptor.js';
+
+const filterNonBusinessRelatedAPI = true;
+const MAX_NUM_OF_API = 50;
+
+const now = () =>
+  new Date().toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+  });
+
+const shouldExclude = (url, method) =>
+  ['HEAD'].includes(method) ||
+  url.includes('codepush') ||
+  url.includes('localhost') ||
+  url.includes('applicationinsights.azure.com');
+
+const parse = (data) => {
+  try {
+    return JSON.parse(data);
+  } catch (e) {
+    return data;
+  }
+};
+
+export default () => {
+  const [apis, setApis] = useState([]);
+
+  const makeRequest = (data) => {
+    const request = {
+      ...data,
+      datetime: now(),
+    };
+    setApis((v) =>
+      [{ request, id: Date.now().toString(36) + Math.random().toString(36) }, ...v].slice(0, MAX_NUM_OF_API),
+    );
+  };
+
+  const receiveResponse = (data) => {
+    const error = data.status < 200 || data.status >= 400;
+
+    setApis((v) => {
+      const oldData = [...v];
+      for (let i = 0; i < oldData.length; i++) {
+        const old = oldData[i];
+        if (old.response || old.request.url !== data.config.url || old.request.method !== data.config.method) continue;
+
+        oldData[i].response = {
+          ...data,
+          datetime: now(),
+          error,
+        };
+        break;
+      }
+
+      return oldData;
+    });
+  };
+
+  useEffect(() => {
+    XHRInterceptor.enableInterception();
+    // console.log('API interceptor status', XHRInterceptor.isInterceptorEnabled());
+    XHRInterceptor.setSendCallback((...obj) => {
+      const data = parse(obj[0]);
+
+      const { _method: method, _url: url, _headers: headers } = obj[1];
+      if (filterNonBusinessRelatedAPI) {
+        if (shouldExclude(url, method)) return;
+      }
+
+      makeRequest({
+        url,
+        headers,
+        method,
+        data,
+      });
+    });
+
+    XHRInterceptor.setResponseCallback((...obj) => {
+      const xhr = obj[5];
+      const { _method: method, _url: url, _response, status } = xhr;
+      if (filterNonBusinessRelatedAPI) {
+        if (shouldExclude(url, method)) return;
+      }
+      const data = parse(_response);
+
+      xhr.addEventListener('load', function () {
+        try {
+          const reader = new FileReader();
+          reader.readAsText(xhr.response);
+          reader.onload = function () {
+            const response = JSON.parse(reader.result);
+            receiveResponse({
+              config: {
+                url,
+                method,
+              },
+              data: response,
+              status,
+            });
+          };
+        } catch (e) {
+          console.log(e);
+        }
+      });
+
+      if (!data.blobId) {
+        receiveResponse({
+          config: {
+            url,
+            method,
+          },
+          data,
+          status,
+        });
+      }
+    });
+  }, []);
+
+  return { apis, clear: () => setApis([]) };
+};