{"id":23820997,"url":"https://github.com/truesparrowsystems/applogger","last_synced_at":"2025-09-07T02:44:13.967Z","repository":{"id":37819022,"uuid":"492696780","full_name":"TrueSparrowSystems/applogger","owner":"TrueSparrowSystems","description":"Let's build better mobile apps","archived":false,"fork":false,"pushed_at":"2023-08-24T02:12:48.000Z","size":4637,"stargazers_count":40,"open_issues_count":4,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-26T16:32:16.365Z","etag":null,"topics":["debugging-tool","react-native","typescript"],"latest_commit_sha":null,"homepage":"https://plgworks.com/applogger","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TrueSparrowSystems.png","metadata":{"files":{"readme":"README.MD","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-05-16T05:35:12.000Z","updated_at":"2024-03-21T08:48:30.000Z","dependencies_parsed_at":"2025-07-26T00:38:46.460Z","dependency_job_id":"2a0f6e65-687d-47ff-9b84-b1a476b0c4c6","html_url":"https://github.com/TrueSparrowSystems/applogger","commit_stats":null,"previous_names":["plg-works/applogger"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/TrueSparrowSystems/applogger","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrueSparrowSystems%2Fapplogger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrueSparrowSystems%2Fapplogger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrueSparrowSystems%2Fapplogger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrueSparrowSystems%2Fapplogger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TrueSparrowSystems","download_url":"https://codeload.github.com/TrueSparrowSystems/applogger/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrueSparrowSystems%2Fapplogger/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273989563,"owners_count":25203260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["debugging-tool","react-native","typescript"],"created_at":"2025-01-02T08:19:40.197Z","updated_at":"2025-09-07T02:44:13.927Z","avatar_url":"https://github.com/TrueSparrowSystems.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n \u003ca href=\"/https://truesparrow.com//applogger\" target=\"_blank\"\u003e \u003cimg width=\"526\" alt=\"AppLogger-Logo\" src=\"https://user-images.githubusercontent.com/22423684/215479730-9ab3cb6a-8f40-436b-b896-dcb4a525265e.png\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://github.com/TrueSparrowSystems/applogger/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"AppLogger is released under the MIT license.\" /\u003e\n  \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.org/package/react-native\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@truesparrow/applogger?color=brightgreen\u0026label=npm%20package\" alt=\"AppLogger Current npm package version.\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# Overview\n\n`AppLogger` is a React Native mobile application framework that helps in minimizing QA issue-reporting time and developer debugging time by providing a web interface for the logs generated and steps taken by the user on a device using the device's IP address. The user can keep track of their sessions and logs, as well as upload, download, and delete them.\n\n## Why AppLogger?\n\nWhenever an issue is reported, developers need issue reproducible steps along with some data to understand, debug and fix it. A lot of time, finding out these reproducible steps becomes a time-consuming effort.\n\n### On the Developer side:\n\nQA data isn't always accurate for replicating the problem, and incomplete data can complicate troubleshooting. As a result, debugging time increases, and the issue may go unresolved since it is not reproducible.\n\nTo solve these problems, we need to track the user actions and application state and allow them to be shared easily.\n\n`AppLogger` provides React Native components with customized tracking to minimize the integration effort in any existing or a new application. It also provides a generic wrapper that can be used with any React Native component. A simple `track` function can be used by developers to provide tracking logic to custom methods.\n\nDevelopers can access the app sessions including the steps and associated logs via the web interface using the device's IP address. The web interface includes a session dashboard with a list of sessions and a session details page that includes device information as well as user action and developer logs.\n\n### On the QA side:\n\n`AppLogger` proves to be a boon by eliminating the need to perform same steps manually for a number of times. Additionally, it simplifies the process to convey the bug's replication steps to developers.\n\nIt saves their time by keeping track of the steps in case of Random testing even when the issues are not reproducible.\n\n### Other features of the AppLogger:\n\n- Session management - from the helper menu, the user can stop the current session, start a new one, and can temporarily disable tracking in the current session.\n- Download Logs - session logs can be downloaded in HTML or JSON format from the web interface.\n- Upload Logs - helper menu allows tracked session logs to be uploaded on any third party services. To use this feature, you must implement the upload function.\n- Delete Logs - from the helper menu user can delete session logs.\n\n**Important Note:** The Web Server would work only in a LAN connection i.e. both devices (one on which application is running, other on which web interface is being accessed) should be on the same network. Also, the application must be running in foreground.\n\n## Sample App\n\nWe have provided a [sample app](https://github.com/TrueSparrowSystems/applogger/tree/master/example/LogTrackerExample) for implementation reference and a quick sneak-peek.\n\n# Installation\n\n```sh\nnpm install @truesparrow/applogger --save\n```\n\n### Add Dependencies\n\n`AppLogger` has some peer dependencies. It is recommended that you follow the installation instructions of each package to verify that it is properly configured.\n\n- [@react-native-async-storage/async-storage](https://www.npmjs.com/package/@react-native-async-storage/async-storage)\n- [react-native-device-info](https://www.npmjs.com/package/react-native-device-info)\n- [react-native-fs](https://www.npmjs.com/package/react-native-fs)\n- [react-native-get-random-values](https://www.npmjs.com/package/react-native-get-random-values)\n- [react-native-http-bridge](https://www.npmjs.com/package/@kingstinct/react-native-http-bridge)\n- [react-native-network-info](https://www.npmjs.com/package/react-native-network-info)\n- [react-native-shake](https://www.npmjs.com/package/react-native-shake)\n- [react-native-exit-app](https://www.npmjs.com/package/react-native-exit-app)\n- [react-native-exception-handler](https://www.npmjs.com/package/react-native-exception-handler)\n\n```sh\nnpm install @react-native-async-storage/async-storage react-native-device-info react-native-fs react-native-get-random-values react-native-http-bridge react-native-network-info react-native-shake react-native-exit-app react-native-exception-handler\n```\n\nNavigate to your ios folder and run:\n\n```sh\n\ncd ios\n\npod install\n```\n\n# Usage\n\nTo get started, you'll need to call the `useAppLogger` hook in your project's root file. This hook allows you to start and stop the web server, which is necessary for viewing the logs.\n\n`useAppLogger` hook requires a prop of type `AppLoggerParams` as mentioned below.\n\n```typescript\ntype AppLoggerParams = {\n  port?: number;\n  loggerConfig?: LogTrackerConfigInterface;\n};\n```\n\n`port` is an optional prop on which the server should start, default port is `5561`.\n`loggerConfig` is an object of type `LogTrackerConfigInterface`. It's used to configure `AppLogger`. If not provided, it will use default configuration.\n\n```typescript\ninterface LogTrackerConfigInterface {\n  writeFrequencyInSeconds: number;\n  uploadLogs?: (\n    sessionLogFilePaths: string[],\n    onUploadComplete: Function,\n  ) =\u003e Promise\u003cboolean\u003e;\n  clearStorageOnLogUpload: boolean;\n  isTrackingDisabled?: boolean;\n  logRotateDurationInHours?: number;\n  sensitiveDataKeywords?: string[];\n}\n```\n\nWe can configure the following parameters:\n\n- `writeFrequencyInSeconds` - frequency in which logs should be written in storage, default value is `5`.\n- `uploadLogs` - Function to upload the logs to any third party storage serivce like s3. Upload will not work unless developer provides a function for it.\n- `clearStorageOnLogUpload` - Boolean to clear the storage when logs are uploaded.\n- `isTrackingDisabled` - Flag to disable log tracking. Default values - for production env : true, for dev env : false.\n- `logRotateDurationInHours` - Flag to clear the logs after certain intervals. If not provided, it will not automatically clear the logs from storage.\n- `sensitiveDataKeywords` - Array containing sensitive keys which when encountered in params will be redacted.\n\nHere is a code snippet to configure `AppLogger` on port 8000.\n\n```javascript\nimport {useAppLogger, HelperMenu} from '@truesparrow/AppLogger';\n\nfunction App() {\n  const uploadFile = filePath =\u003e {\n    return new Promise((resolve, reject) =\u003e {\n      s3.upload(filePath)\n        .then(() =\u003e {\n          resolve(true);\n        })\n        .catch(() =\u003e {\n          reject();\n        });\n    });\n  };\n\n  const uploaderFunction = (sessionLogFilePaths, onLogUploadComplete) =\u003e {\n    return new Promise(resolve =\u003e {\n      sessionLogFilePaths.forEach((singleSessionLogFilePath, index) =\u003e {\n        uploadFile(singleSessionLogFilePath).then(() =\u003e {\n          if (index == sessionLogFilePaths.length - 1) {\n            // Call this function to delete log files from local app storage\n            onLogUploadComplete();\n            return resolve(true);\n          }\n        });\n      });\n    });\n  };\n\n  const AppLoggerParams = {\n    port: 8000,\n    loggerConfig: {\n      writeFrequencyInSeconds: 5,\n      uploadLogs: uploaderFunction,\n      clearStorageOnLogUpload: false,\n      isTrackingDisabled: false,\n      logRotateDurationInHours: 24,\n      sensitiveDataKeywords: ['password'],\n    },\n  };\n\n  const {navigationRef, onNavigationStateChange} =\n    useAppLogger(AppLoggerParams);\n\n  return (\n    \u003cNavigationContainer\n      ref={navigationRef}\n      onStateChange={onNavigationStateChange}\u003e\n      \u003cRootNavigation /\u003e\n      \u003cHelperMenu /\u003e\n    \u003c/NavigationContainer\u003e\n  );\n}\nexport default App;\n```\n\nThe helper menu can now be accessed by **shaking your device**.\nThis will enable you to do the following things:\n\n- Share server URL.\n- Upload logs.\n- Delete Logs.\n- Pause/resume current session.\n- Stop current session and start a new session.\n\nYou can access your logs using the link below.\n\n```\n\u003cyour-ip-address\u003e:\u003cport\u003e/session\n```\n\nFor example:\n\n```\n192.168.0.1:8000/session\n```\n\nThis link can be shared from the `Share server URL` option in the helper menu.\n\n## Components provided by `AppLogger`\n\nFollowing are some of the [React Native components](https://reactnative.dev/docs/components-and-apis) that AppLogger provides with tracking.\n\n- Button\n- Pressable\n- RefreshControl\n- Switch\n- TextInput\n- TouchableHighlight\n- TouchableOpacity\n- TouchableWithoutFeedback\n\nHow to use these components? Just import these components from `@truesparrow/AppLogger` instead of `react-native` and provide a testID.\n\nEg - To import TouchableWithoutFeedback :\n\n```javascript\nimport {TouchableWithoutFeedback} from '@truesparrow/AppLogger';\n\n\u003cTouchableWithoutFeedback testID={'some_test_id'} /\u003e;\n```\n\n## How to use Generic component\n\n- The generic component from `AppLogger` can be used to enable tracking for any component other than those listed above.\n  - The only additional step would be that to wrap the component (or list of components) in a `ComponentWrapper` and provide a `testID` to those components. Apart from that, the wrapped components' logic stays unchanged.\n- As it supports all `ViewProps`, the `ComponentWrapper` can be used in place of the `View` Component.\n- As of now `ComponentWrapper` works only on a single level, which means it does not track action on children components of wrapped components.\n\nExample snippets:\n\n```javascript\nimport {ComponentWrapper} from ‘@truesparrow/AppLogger’;\n\n\u003cComponentWrapper\u003e\n    \u003cComponent testID=\"component_test_id\" {...props}/\u003e\n\u003c/ComponentWrapper\u003e\n```\n\n```javascript\nimport {ComponentWrapper} from ‘@truesparrow/AppLogger’;\n\u003cComponentWrapper\u003e\n  \u003cComponent1 testID=\"component1_test_id\" {...props} /\u003e\n  \u003cComponent2 testID=\"component2_test_id\" {...props} /\u003e\n  \u003cComponent3 testID=\"component3_test_id\" {...props} /\u003e\n\u003c/ComponentWrapper\u003e\n```\n\n## Supported functions list\n\nFollowing are the functions that have log tracking enabled in them.\n\n- onChange\n- onPress\n- onLongPress\n- onPressIn\n- onPressOut\n- onChangeText\n- onContentSizeChange\n- onEndEditing\n- onFocus\n- onKeyPress\n- onLayout\n- onScroll\n- onSelectionChange\n- onSubmitEditing\n- onRefresh\n- onValueChange\n\nHow to use these functions? No change, you can write it as you would normally do and the `AppLogger` will take care of the rest, provided your component is imported from `@truesparrow/AppLogger` or wrapped inside `ComponentWrapper`.\n\n## Custom Tracking\n\nYou can use tracking for any other function that you choose, in addition to the ones listed above. `AppLogger` provides a track interface for custom tracking of activity. Here `type` and `params` are mandatory, while other fields are optional.\n\n```typescript\ninterface TrackInterface {\n  id?: string;\n  description?: string;\n  type: string;\n  params: any;\n  ts?: number;\n}\n```\n\nHere is an example for custom tracking using `AppLogger`. Consider keeping track of any error that occurs when loading the image. It's implementation could be as follows.\n\n```javascript\nimport {useCallback} from 'react';\nimport {Image} from 'react-native';\nimport {getLogTracker} from '@truesparrow/AppLogger';\n\nfunction CustomTrackingDemo() {\n    const imageTestID = 'custom_tracking_demo_image';\n\n    const fnOnError = useCallback((error) =\u003e {\n        const logTracker = getLogTracker();\n        logTracker.track({\n            description: `Encountered error on image load ${error}`,\n            type: 'ImageLoadError',\n            params: {\n                testId: imageTestID,\n              },\n            },\n        });\n    }, []);\n\n    return \u003cImage src=\"image_url\" testID={imageTestID} onError={fnOnError} /\u003e\n}\n```\n\n## Screenshots\n\n### Sample App\n\n\u003ctable\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n\u003cimg width=\"300\" alt=\"AppLogger-Sample-App\" src=\"https://user-images.githubusercontent.com/87412080/172326209-0a63342b-83ef-4e60-8483-435661ba2615.png\"\u003e\n      \u003c/td\u003e\n     \u003ctd\u003e\n\u003cimg width=\"300\"alt=\"AppLogger-Sample-App\" src=\"https://user-images.githubusercontent.com/86604753/172822891-ffe2ca97-ff86-4997-b3f9-c4cba7c4eac7.png\"\u003e\n       \u003c/td\u003e\n   \u003ctd\u003e\n\u003cimg width=\"300\" alt=\"AppLogger-Sample-App\" src=\"https://user-images.githubusercontent.com/87412080/172326232-66f36f17-770c-4a9b-849d-910bb87b24ac.png\"\u003e\n        \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c/table\u003e\n  \n### Web Interface\n\u003cimg width=\"1158\" alt=\"AppLogger-Dashboard\" src=\"https://user-images.githubusercontent.com/22423684/190317302-f49ff346-f64b-410b-a1f8-e0b024c0a917.png\"\u003e\n\u003cimg width=\"1784\" alt=\"AppLogger-Dashboard\" src=\"https://user-images.githubusercontent.com/22423684/190317297-1e823f15-bd40-407e-a999-ed79ec2b187a.png\"\u003e\n\u003cimg width=\"1699\" alt=\"AppLogger-Dashboard\" src=\"https://user-images.githubusercontent.com/22423684/190317277-ed5d9b2d-68c1-4b2b-a03d-f3d449dbde36.png\"\u003e\n\n## Contribution\n\n`AppLogger` is an open source project and will always remain free to use. Feel free to report issues, raise PRs for fixes \u0026 enhancements. If you think it's cool, please star it 🌟\u003cbr /\u003e\n\n\u003ca href=\"https://truesparrow.com/#get-in-touch\" target=\"_blank\"\u003e\u003cimg width=\"1440\"  alt=\"contact_us\" src=\"https://user-images.githubusercontent.com/22423684/190952567-f676c890-da66-4c0b-a4ff-c01d4f5478a0.png\"\u003e\u003c/a\u003e\n\nMade with ❤️ at \u003ca href=\"https://truesparrow.com/\" target=\"_blank\"\u003eTrue Sparrow\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftruesparrowsystems%2Fapplogger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftruesparrowsystems%2Fapplogger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftruesparrowsystems%2Fapplogger/lists"}