{"id":44742362,"url":"https://github.com/arturovt/ngxs-logrocket-plugin","last_synced_at":"2026-02-17T23:00:25.290Z","repository":{"id":338237049,"uuid":"1156655724","full_name":"arturovt/ngxs-logrocket-plugin","owner":"arturovt","description":"LogRocket middleware for NGXS - Log actions and state to debug production apps","archived":false,"fork":false,"pushed_at":"2026-02-15T19:30:10.000Z","size":553,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-17T02:39:57.619Z","etag":null,"topics":["angular","bug-reporting","debugging","logrocket","middleware","redux","session-replay","state-management"],"latest_commit_sha":null,"homepage":"","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/arturovt.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-12T22:35:19.000Z","updated_at":"2026-02-15T19:31:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"247de552-e18b-48cc-b067-f73d9357acf1","html_url":"https://github.com/arturovt/ngxs-logrocket-plugin","commit_stats":null,"previous_names":["arturovt/ngxs-logrocket-plugin"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/arturovt/ngxs-logrocket-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturovt%2Fngxs-logrocket-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturovt%2Fngxs-logrocket-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturovt%2Fngxs-logrocket-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturovt%2Fngxs-logrocket-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arturovt","download_url":"https://codeload.github.com/arturovt/ngxs-logrocket-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturovt%2Fngxs-logrocket-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29561782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T21:50:49.831Z","status":"ssl_error","status_checked_at":"2026-02-17T21:46:15.313Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["angular","bug-reporting","debugging","logrocket","middleware","redux","session-replay","state-management"],"created_at":"2026-02-15T21:12:15.783Z","updated_at":"2026-02-17T23:00:25.283Z","avatar_url":"https://github.com/arturovt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngxs-logrocket-plugin\n\nNGXS plugin for [LogRocket](https://logrocket.com/) that augments LogRocket sessions with actions and state from your NGXS store.\n\n[![npm version](https://badge.fury.io/js/ngxs-logrocket-plugin.svg)](https://www.npmjs.com/package/ngxs-logrocket-plugin)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n![LogRocket Redux Tab](https://raw.githubusercontent.com/arturovt/ngxs-logrocket-plugin/refs/heads/main/docs/assets/screenshot.png)\n\n## Features\n\n- **Complete Action Logging** - Captures all NGXS actions with their status (Dispatched, Successful, Errored, Canceled)\n- **State Snapshots** - Records state before and after each action\n- **Optimized Performance** - Runs outside Angular zone to prevent unnecessary change detection\n- **Privacy Controls** - Sanitize sensitive data from actions and state\n- **Flexible Integration** - Load LogRocket from npm package or CDN script tag\n- **SSR Compatible** - Safely skips logging during server-side rendering\n\n## Installation\n\n```bash\nnpm install ngxs-logrocket-plugin logrocket\n```\n\nOr with yarn:\n\n```bash\nyarn add ngxs-logrocket-plugin logrocket\n```\n\nOr with pnpm:\n\n```bash\npnpm add ngxs-logrocket-plugin logrocket\n```\n\n## Requirements\n\n- `@ngxs/store` \u003e= 21.0.0\n- `logrocket` (peer dependency)\n- Angular (compatible with your NGXS version)\n\n## Usage\n\n### Basic Setup\n\n```typescript\n// app.config.ts\nimport { ApplicationConfig } from '@angular/core';\nimport { provideStore } from '@ngxs/store';\nimport { withNgxsLogRocketReduxMiddlewarePlugin } from 'ngxs-logrocket-plugin';\nimport LogRocket from 'logrocket';\n\n// Initialize LogRocket\nLogRocket.init('your-app-id');\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideStore(\n      [\n        /* your states */\n      ],\n      withNgxsLogRocketReduxMiddlewarePlugin({\n        logrocket: () =\u003e LogRocket,\n      }),\n    ),\n  ],\n};\n```\n\n### Loading LogRocket from CDN\n\nIf you load LogRocket via a script tag instead of npm:\n\n```html\n\u003c!-- index.html --\u003e\n\u003cscript src=\"https://cdn.logr-in.com/LogRocket.min.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  window.LogRocket \u0026\u0026 window.LogRocket.init('your-app-id');\n\u003c/script\u003e\n```\n\n```typescript\n// app.config.ts\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideStore(\n      [\n        /* your states */\n      ],\n      withNgxsLogRocketReduxMiddlewarePlugin({\n        logrocket: () =\u003e window.LogRocket,\n      }),\n    ),\n  ],\n};\n```\n\n### Lazy-loading Plugin\n\nYou can also lazy-load the plugin when LogRocket is needed in your application, for example when a user logs in and `LogRocket.init` is called:\n\n```ts\n// somewhere in the app\nimport { inject, EnvironmentInjector, createEnvironmentInjector, Injector } from '@angular/core';\nimport { provideStates } from '@ngxs/store';\n\n@Injectable({ providedIn: 'root' })\nexport class LogRocketService {\n  private injector = inject(EnvironmentInjector);\n\n  async start() {\n    // Load LogRocket script.\n    await loadScript('https://cdn.logr-in.com/LogRocket.min.js');\n\n    window.LogRocket.init('your-app-id');\n\n    // Lazy-load the NGXS plugin.\n    const { withNgxsLogRocketReduxMiddlewarePlugin } = await import('ngxs-logrocket-plugin');\n\n    // Register plugin in child injector so it's available globally.\n    // This adds the plugin to NGXS without requiring app-level configuration.\n    createEnvironmentInjector(\n      [\n        provideStates(\n          [],\n          withNgxsLogRocketReduxMiddlewarePlugin({\n            logrocket: () =\u003e window.LogRocket,\n          }),\n        ),\n      ],\n      this.injector,\n    );\n  }\n}\n\n// Helper function to load external scripts.\nfunction loadScript(src: string): Promise\u003cvoid\u003e {\n  return new Promise((resolve, reject) =\u003e {\n    const script = document.createElement('script');\n    script.src = src;\n    script.onload = () =\u003e resolve();\n    script.onerror = () =\u003e reject(new Error(`Failed to load script: ${src}`));\n    document.head.appendChild(script);\n  });\n}\n```\n\n## Configuration\n\n### Sanitizing Actions\n\nRemove sensitive data from actions before logging:\n\n```typescript\nwithNgxsLogRocketReduxMiddlewarePlugin({\n  logrocket: () =\u003e LogRocket,\n  actionSanitizer: (action) =\u003e {\n    // Ignore specific actions\n    if (action.type === '[Auth] Login Success') {\n      return null; // Action won't be logged\n    }\n\n    // Redact sensitive data\n    if (action.type === '[User] Update Profile') {\n      return {\n        ...action,\n        password: undefined,\n        creditCard: undefined,\n      };\n    }\n\n    return action;\n  },\n});\n```\n\n### Sanitizing State\n\nRemove sensitive data from state snapshots:\n\n```typescript\nwithNgxsLogRocketReduxMiddlewarePlugin({\n  logrocket: () =\u003e LogRocket,\n  stateSanitizer: (state) =\u003e {\n    return {\n      ...state,\n      auth: {\n        ...state.auth,\n        token: undefined, // Remove auth token\n        password: undefined,\n      },\n      payment: undefined, // Remove entire payment state\n    };\n  },\n});\n```\n\n### Using Angular Injection in Sanitizers\n\nBoth `logrocket`, `stateSanitizer`, and `actionSanitizer` run in injection context, allowing you to use Angular's `inject()`:\n\n```typescript\nimport { inject } from '@angular/core';\nimport { MySecurityService } from './my-security.service';\n\nwithNgxsLogRocketReduxMiddlewarePlugin({\n  logrocket: () =\u003e LogRocket,\n  stateSanitizer: (state) =\u003e {\n    const security = inject(MySecurityService);\n    return security.sanitizeState(state);\n  },\n  actionSanitizer: (action) =\u003e {\n    const security = inject(MySecurityService);\n    return security.shouldLogAction(action) ? action : null;\n  },\n});\n```\n\n## Action Status Types\n\nThe plugin logs actions with the following statuses:\n\n| Status       | Description                                            |\n| ------------ | ------------------------------------------------------ |\n| `DISPATCHED` | Action has been dispatched                             |\n| `SUCCESSFUL` | Action handler completed successfully                  |\n| `ERRORED`    | Action handler threw an error                          |\n| `CANCELED`   | Action was canceled by another action of the same type |\n\nExample in LogRocket:\n\n```\n[Countries] Load countries (DISPATCHED)\n[Countries] Load countries (SUCCESSFUL)\n[Auth] Login (DISPATCHED)\n[Auth] Login (ERRORED)\n```\n\n## How It Works\n\nThe plugin integrates with NGXS as a middleware and leverages LogRocket's Redux middleware under the hood:\n\n1. Intercepts all NGXS actions before they're processed\n2. Logs action dispatch with current state\n3. Captures action completion (success, error, or cancellation)\n4. Compresses actions and state using LogRocket's binary format\n5. Performs state diffs to minimize network data\n\nAll logging operations run outside the Angular zone to prevent triggering unnecessary change detection cycles.\n\n## Viewing Logs in LogRocket\n\nOnce configured, you can view NGXS actions in the LogRocket dashboard:\n\n1. Open a session in LogRocket\n2. Navigate to the \"Redux\" tab\n3. Browse actions and state changes\n4. Click an action to see state before and after\n\n## Performance Considerations\n\n- **Zone Optimization**: All LogRocket operations run outside Angular's zone\n- **Data Compression**: Actions and state are compressed using binary format\n- **State Diffing**: Only state changes are transmitted, not full snapshots\n- **Error Handling**: LogRocket errors are caught and logged without breaking your app\n- **SSR Safe**: Automatically skips logging on server to prevent errors\n\n## TypeScript Support\n\nFull TypeScript support is included. The plugin exports all necessary types:\n\n```typescript\nimport type { NgxsLogRocketReduxMiddlewareOptions } from 'ngxs-logrocket-plugin';\n```\n\n## Troubleshooting\n\n### Actions Not Appearing in LogRocket\n\n1. Verify LogRocket is initialized before NGXS\n2. Check that the plugin is registered with `provideStore`\n3. Ensure you're not returning `null` from `actionSanitizer`\n\n### Performance Issues\n\n- Use `actionSanitizer` to filter high-frequency actions\n- Sanitize large state objects to reduce payload size\n- Verify you're using the factory pattern `() =\u003e LogRocket` (not direct reference)\n\n## License\n\nMIT © [arturovt](https://github.com/arturovt)\n\n## Related Projects\n\n- [logrocket](https://www.npmjs.com/package/logrocket) - LogRocket JavaScript SDK\n- [@ngxs/store](https://www.npmjs.com/package/@ngxs/store) - NGXS State Management\n- [logrocket-ngrx](https://www.npmjs.com/package/logrocket-ngrx) - NgRx middleware for LogRocket\n\n## Version Compatibility\n\nThis package follows the major version of `@ngxs/store`:\n\n| ngxs-logrocket-plugin | @ngxs/store |\n| --------------------- | ----------- |\n| 21.x.x                | \u003e=21.0.0    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farturovt%2Fngxs-logrocket-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farturovt%2Fngxs-logrocket-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farturovt%2Fngxs-logrocket-plugin/lists"}