{"id":25431954,"url":"https://github.com/alexsergey/logrock","last_synced_at":"2025-10-31T22:30:20.416Z","repository":{"id":49532095,"uuid":"186993635","full_name":"AlexSergey/logrock","owner":"AlexSergey","description":"Can help you build Error Tracking \u0026 Crash Reporting system","archived":false,"fork":false,"pushed_at":"2023-07-19T21:13:07.000Z","size":5522,"stargazers_count":33,"open_issues_count":4,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-25T14:02:51.533Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.natrube.net/logrock/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlexSergey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2019-05-16T09:13:59.000Z","updated_at":"2024-06-21T05:45:57.934Z","dependencies_parsed_at":"2024-06-21T05:45:02.270Z","dependency_job_id":"a16706bc-1662-43a0-a732-956e5984fe84","html_url":"https://github.com/AlexSergey/logrock","commit_stats":{"total_commits":19,"total_committers":4,"mean_commits":4.75,"dds":0.1578947368421053,"last_synced_commit":"7f4a748b5438e399bfb4af0dc42fab5273eca918"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexSergey%2Flogrock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexSergey%2Flogrock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexSergey%2Flogrock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexSergey%2Flogrock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlexSergey","download_url":"https://codeload.github.com/AlexSergey/logrock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239236414,"owners_count":19604902,"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","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":[],"created_at":"2025-02-17T04:31:04.089Z","updated_at":"2025-10-31T22:30:20.326Z","avatar_url":"https://github.com/AlexSergey.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"http://www.natrube.net/logrock/index.html\"\u003e\n        \u003cimg src=\"http://www.natrube.net/logrock/LogRock.png\" alt=\"This module can help you build error tracking \u0026 crash reporting system\" /\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"http://www.natrube.net/logrock/index.html\"\u003eDemo\u003c/a\u003e\n\u003c/div\u003e\n\n**logrock** is a React component and logging system that allows you to record all actions before a critical error occurs so that this information can be analyzed later.\n\n\n## Table of Contents\n\n- [Articles](#articles)\n- [Using](#using)\n- [Properties](#properties)\n- [Browser Compatibility](#browser-compatibility)\n- [License](#license)\n\n## Articles\n- ENG: [Log Driven Development [Article]](https://www.rockpack.io/log-driven-development)\n- RUS: [LogRock: Тестирование через логирование [Article]](https://habr.com/ru/post/453652/)\n\n## Using\n\n1. Installation:\n\n```sh\n# NPM\nnpm install logrock --save\n\n# YARN\nyarn add logrock\n```\n\n2. For the logger system to work correctly, we need to wrap our application in a *\u003cLoggerContainer\u003e* component\n\n```jsx\nimport React, { useCallback, useContext } from 'react';\nimport logger, { LoggerContainer, useLoggerApi } from 'logrock';\n\nconst App = () =\u003e {\n  const { getStackData, triggerError } = useLoggerApi();\n  ...\n}\n\nexport default function () {\n  const loggerCtx = useContext(LoggerContext);\n  const showMessage = useCallback((level, message, important) =\u003e {\n    if (important) {\n      alert(message);\n    }\n  });\n\n  return \u003cLoggerContainer\n    sessionID={window.sessionID}\n    limit={75} // Stack length limit. On overflow, the first element will be removed\n    getCurrentDate={() =\u003e {\n      // Critical error date\n      return dayjs()\n        .format('YYYY-MM-DD HH:mm:ss');\n    }}\n    stdout={showMessage} // Display some errors as a tooltip for users\n    onError={stackData =\u003e {\n      // Send a stack of actions before the error to the backend (or otherwise process it)\n      sendToServer(stack);\n    }}\n    onPrepareStack={stack =\u003e {\n      // Allows you to add additional information to the stack\n      stack.language = window.navigator.language;\n    }}\u003e\n    \u003cApp/\u003e\n  \u003c/LoggerContainer\u003e\n}\n```\n\n4. You need to add the logger to any of the methods you want to cover our logging system.\n\nThe **logrock** module comes with a logger that is linked to *\u003cLoggerContainer /\u003e*\n\nSuppose we have a component\n\n```jsx\nimport React, { useState } from 'react';\n\nexport default function Toggle(props) {\n  const [toggleState, setToggleState] = useState('off');\n\n  function toggle() {\n    setToggleState(toggleState === 'off' ? 'on' : 'off');\n  }\n\n  return \u003cdiv className={`switch ${toggleState}`} onClick={toggle}/\u003e;\n}\n```\n\nTo properly log it, we need to modify the toggle method\n\n```jsx\nimport React, { useState } from 'react';\nimport logger from 'logrock';\n\nexport default function Toggle(props) {\n  const [toggleState, setToggleState] = useState('off');\n\n  function toggle() {\n    let state = toggleState === 'off' ? 'on' : 'off';\n    logger.info(`React.Toggle|Toggle component changed state ${state}`);\n    setToggleState(state);\n  }\n\n  return \u003cdiv className={`switch ${toggleState}`} onClick={toggle}/\u003e;\n}\n```\n\nWe have added a logger in which the information is divided into 2 parts. React.Toggle shows us that this action happened at the level of React, the Toggle component, and then we have a verbal explanation of the action and the current state that came to this component.\n\nIf a critical error occurs in the system, we will have a **Bsod** with a detailed description of the user's actions. It will also be possible to send this stack to the error analysis system or ElasticSearch in order to quickly catch errors that occurred among our users.\n\n\u003cp align=\"right\"\u003e\n  \u003cimg alt=\"Bsod\" src=\"https://www.rockpack.io/readme_assets/rockpack_logger_bsod.jpg\" /\u003e\n\u003c/p\u003e\n\n*- When logging applications, you need to put logs in the most confusing and complex parts of the code, so you will understand what happened at this stage.*\n\n*- We can also use the “componentDidCatch” method, which was introduced in React 16, in case an error occurs.*\n\n## Properties\n\n- \\\u003cLoggerContainer /\u003e properties:\n\n| Prop | Type | Description |\n| --- | --- | --- |\n| active | Boolean[true] | Enable / disable logging. It is recommended to disable logging during the testing phase. |\n| bsodActive | Boolean[true] | Enable / disable Bsod output. It is recommended to disable for Production  |\n| sessionID | Number | If you need to associate logging with Backend calls - a single session for Frontend and Backend will allow you to do this |\n| bsod | ReactElement[Component] | You can set your Bsod Component |\n| limit | Number[25] | Stack length limit. On overflow, the first element will be removed |\n| getCurrentDate | Function | Date format when an error occurred. Default - new Date().toLocaleString() |\n| onError | Function | window.onbeforeunload callback. In this callback, you can handle the stack or send it to the Backend |\n| onPrepareStack | Function | Allows you to add additional information to the stack before calling onError. For example, you can add the current localization of the application, the theme selected by the user, the name of the user who got the error, etc. |\n| stdout | Function | This method allows you to display the log method for the user (which was called with the second parameter \"true\"). For example, calling logger.error ('Ups ...', true) in the stdout method would output alert (message); |\n\n- logger methods:\n\nThe logger provided with **logrock** has methods:\n\n```js\nlogger.log('log text here!');\nlogger.info('Some extra log information');\nlogger.warn('Warning! Warning!');\nlogger.debug('I\\'m a debug message!');\nlogger.error('Ups...');\n```\n\nIf we add *true* as the second parameter, the message passed to this log method will be passed to stdout *\u003cLoggerContainer\u003e*. This will display some useful messages for the user, for example, in tooltip or alert.\n\n## Browser Compatibility\n\n| Browser | Works? |\n| :------ | :----- |\n| Chrome  | Yes    |\n| Firefox | Yes    |\n| Safari  | Yes    |\n| IE 11   | Yes    |\n\n\n## License\n\nThe MIT License (MIT)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexsergey%2Flogrock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexsergey%2Flogrock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexsergey%2Flogrock/lists"}