{"id":28683763,"url":"https://github.com/souravion/ng-route-logger","last_synced_at":"2025-06-14T03:03:57.946Z","repository":{"id":286397042,"uuid":"960640574","full_name":"souravion/ng-route-logger","owner":"souravion","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-06T07:16:17.000Z","size":14,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-10T20:28:19.330Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/souravion.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":"2025-04-04T19:37:25.000Z","updated_at":"2025-05-20T16:25:54.000Z","dependencies_parsed_at":"2025-04-06T08:24:49.790Z","dependency_job_id":"15942742-0044-465b-833b-856bce92e2af","html_url":"https://github.com/souravion/ng-route-logger","commit_stats":null,"previous_names":["souravion/ng-route-logger"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/souravion/ng-route-logger","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souravion%2Fng-route-logger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souravion%2Fng-route-logger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souravion%2Fng-route-logger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souravion%2Fng-route-logger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/souravion","download_url":"https://codeload.github.com/souravion/ng-route-logger/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souravion%2Fng-route-logger/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259752030,"owners_count":22905968,"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-06-14T03:01:13.866Z","updated_at":"2025-06-14T03:03:57.933Z","avatar_url":"https://github.com/souravion.png","language":"JavaScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Loggers"],"readme":"# 📦 ng-route-logger\n\n**ng-route-logger** is a simple and powerful Angular library that helps you **track page navigation times** inside your Angular application.\n\nWhenever a user switches from one route (page) to another, this library records:\n- 📍 The new page’s URL (like `/home`, `/about`)\n- ⏱️ How many milliseconds it took to load that page\n\nThis is super useful if you're building a fast Angular app and want to know which routes take longer to load.\n\n---\n\n## 🎯 Why Should You Use It?\n\n✅ Simple to set up  \n✅ Works with Angular's built-in router  \n✅ Uses **RxJS Observables**, so you can subscribe to live logs  \n✅ Helpful for developers, testers, and learners\n\n---\n\n## 📦 Installation\n\nRun this command in your Angular project folder:\n\n```bash\nnpm install ng-route-logger\n```\n## 🧰 Having Trouble Installing?\n\nIf you're facing issues while installing (like cache or permission problems), you can force the install using:\n\n```bash\nnpm install ng-route-logger --force\n```\n## 🛠️ How to Use\n\n### 1. Import the Module\n\nIn your `app.module.ts`, import the logger module:\n\n```ts\nimport { NgRouteLoggerModule } from 'ng-route-logger';\n\n@NgModule({\n  imports: [\n    NgRouteLoggerModule,  // Add this line\n    ...\n  ],\n})\nexport class AppModule {}\n```\n### 2. Use the Logger Service\n\nYou can inject the logger service into any component or service like this:\n\n```ts\nimport { NgRouteLoggerService } from 'ng-route-logger';\n\nconstructor(private logger: NgRouteLoggerService) {\n  this.logger.getLogs()\n}\n```\n## 📚 Example Log Output\n\n```ts\n[\n  { route: '/home', loadTime: 96.3 },\n  { route: '/about', loadTime: 201.7 },\n  { route: '/contact', loadTime: 87.2 }\n]\n```\n## 📚 Example Use Cases\n- Show a \"page load time\" chart for users\n\n- Find out which pages take longest to load\n\n- Log page transitions for debugging or performance testing\n\n\n## 🔍 What’s Happening in the Background?\n\n- ⏱️ Starts timer when route navigation begins (`NavigationStart`)\n- 🛑 Stops timer when navigation ends (`NavigationEnd`)\n- 🧾 Logs the route and time taken\n- 📡 Streams the logs using **RxJS Observable**\n\n## 📬 Contribute or Report Issues\nFound a bug or have an idea? Create an issue or PR at:\n\n👉 [https://github.com/souravion/ng-route-logger](https://github.com/souravion/ng-route-logger)\n\n## 🚀 Planned Features (Coming Soon)\n\nHere are some awesome features we plan to add in future updates:\n\n| Feature                            | Description                                                                 |\n|------------------------------------|-----------------------------------------------------------------------------|\n| 📊 Route Load Time Charts          | Visualize navigation performance using simple charts (e.g., bar or line)   |\n| 💾 Export Logs                     | Export route logs as JSON or CSV files for performance audits              |\n| 🎛️ Configurable Logging Options    | Enable/disable specific logs or exclude certain routes                     |\n| 🧹 Auto-Cleanup                    | Automatically limit stored logs to the last N entries                      |\n| 🔥 DevTools Panel Integration      | Optional integration with browser devtools extension for real-time viewing |\n| 🧪 Unit Test Utilities             | Helpers to test routing performance in unit/e2e test suites                |\n| 🌐 Multi-Tab Session Awareness     | Detect and separate logs from different browser tabs                       |\n\n\u003e ✨ Have an idea or feature request? Feel free to [open an issue](https://github.com/souravion/ng-route-logger/issues) or [start a discussion](https://github.com/souravion/ng-route-logger/discussions)!\n\n\n\n## ✨ Made with ❤️ by Souravion\nFor Angular developers who want to know how fast their app really is.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouravion%2Fng-route-logger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsouravion%2Fng-route-logger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouravion%2Fng-route-logger/lists"}