{"id":45899314,"url":"https://github.com/arturovt/ngxs-capture.dev-plugin","last_synced_at":"2026-02-27T22:14:15.140Z","repository":{"id":338657821,"uuid":"1158571761","full_name":"arturovt/ngxs-capture.dev-plugin","owner":"arturovt","description":"Capture.dev middleware for NGXS - Log actions and state to debug production apps","archived":false,"fork":false,"pushed_at":"2026-02-15T19:24:55.000Z","size":367,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-16T00:11:47.998Z","etag":null,"topics":["angular","bug-reporting","capture-dev","debugging","error-tracking","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-15T15:42:42.000Z","updated_at":"2026-02-15T19:24:58.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/arturovt/ngxs-capture.dev-plugin","commit_stats":null,"previous_names":["arturovt/ngxs-capture.dev-plugin"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/arturovt/ngxs-capture.dev-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturovt%2Fngxs-capture.dev-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturovt%2Fngxs-capture.dev-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturovt%2Fngxs-capture.dev-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturovt%2Fngxs-capture.dev-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arturovt","download_url":"https://codeload.github.com/arturovt/ngxs-capture.dev-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturovt%2Fngxs-capture.dev-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29917253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T19:37:42.220Z","status":"ssl_error","status_checked_at":"2026-02-27T19:37:41.463Z","response_time":57,"last_error":"SSL_read: 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","capture-dev","debugging","error-tracking","middleware","redux","session-replay","state-management"],"created_at":"2026-02-27T22:14:14.480Z","updated_at":"2026-02-27T22:14:15.136Z","avatar_url":"https://github.com/arturovt.png","language":"TypeScript","readme":"# ngxs-capture.dev-plugin\n\nNGXS plugin for [Capture.dev](https://capture.dev/) that augments Capture.dev sessions with actions and state from your NGXS store.\n\n[![npm version](https://badge.fury.io/js/ngxs-capture.dev-plugin.svg)](https://www.npmjs.com/package/ngxs-capture.dev-plugin)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n![CaptureDev Redux Tab](https://raw.githubusercontent.com/arturovt/ngxs-capture.dev-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- **SSR Compatible** - Safely skips logging during server-side rendering\n\n## Installation\n\n```bash\nnpm install ngxs-capture.dev-plugin\n```\n\nOr with yarn:\n\n```bash\nyarn add ngxs-capture.dev-plugin\n```\n\nOr with pnpm:\n\n```bash\npnpm add ngxs-capture.dev-plugin\n```\n\n## Requirements\n\n- `@ngxs/store` \u003e= 21.0.0\n- `@capture.dev/redux` \u003e= 1.0.5\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 { withNgxsCaptureDevReduxMiddlewarePlugin } from 'ngxs-capture.dev-plugin';\n\n// Initialize Capture.dev - it should be loaded from the CDN beforehand\n// via a \u003cscript\u003e tag in index.html:\n// https://cdn.capture.dev/capture-js/browser/latest.js\nCapture.identify({ options: '...' });\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideStore(\n      [\n        /* your states */\n      ],\n      withNgxsCaptureDevReduxMiddlewarePlugin(),\n    ),\n  ],\n};\n```\n\n### Lazy-loading Plugin\n\nYou can also lazy-load the plugin when Capture.dev is needed in your application, for example when a user logs in and `Capture.identify` 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 CaptureDevService {\n  private injector = inject(EnvironmentInjector);\n\n  async start() {\n    // Configure Capture.dev options.\n    window.captureOptions = { captureKey: config.captureKey };\n\n    // Load Capture.dev script.\n    await loadScript('https://cdn.capture.dev/capture-js/browser/latest.js');\n\n    window.Capture.identify({ options: '...' });\n\n    // Lazy-load the NGXS plugin.\n    const { withNgxsCaptureDevReduxMiddlewarePlugin } = await import('ngxs-capture.dev-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([provideStates([], withNgxsCaptureDevReduxMiddlewarePlugin())], this.injector);\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## 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\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 Capture.dev'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 Capture.dev'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 Capture.dev\n\nOnce configured, you can view NGXS actions in the Capture.dev dashboard:\n\n1. Open a session in Capture.dev\n2. Navigate to the \"State\" 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 Capture.dev 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**: Capture.dev errors are caught and logged without breaking your app\n- **SSR Safe**: Automatically skips logging on server to prevent errors\n\n## License\n\nMIT © [arturovt](https://github.com/arturovt)\n\n## Version Compatibility\n\nThis package follows the major version of `@ngxs/store`:\n\n| ngxs-capture.dev-plugin | @ngxs/store |\n| ----------------------- | ----------- |\n| 21.x.x                  | \u003e=21.0.0    |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farturovt%2Fngxs-capture.dev-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farturovt%2Fngxs-capture.dev-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farturovt%2Fngxs-capture.dev-plugin/lists"}