Chrome DevTools extension for Ping Identity auth flow debugging by ryanbas21 · Pull Request #628 · ForgeRock/ping-javascript-sdk

ryanbas21 · 2026-05-08T20:57:54Z

Summary

A Chrome DevTools extension that captures, correlates, and diagnoses Ping Identity / ForgeRock authentication flows in real time. Replaces the manual workflow of copying tokens into jwt.io and cross-referencing network requests with a single panel that merges SDK events and network traffic into unified views.

Timeline — chronological table of all captured events (network + SDK) with a flow sidebar, colour-coded status, and an Inspector panel with contextual tabs (Headers, Body, SDK State, Collectors, Cookies, CORS, Diagnosis)
Flow — visual node rail showing the authentication flow as a sequence of SDK nodes with detail cards, playback controls, and a Flow Health diagnosis banner
Learn — canvas-based request lifecycle visualization mapping each request across Browser → Server → SDK → Form stages with animated connectors and error highlighting
Diagnosis engine — automated rule engine detecting CORS misconfigurations, expired JWTs, missing PKCE, connector errors, and more — with severity ratings and numbered remediation steps
Import/Export — flows can be exported as JSON or Markdown, imported from JSON, and saved as snapshots for offline analysis

Packages

Package	Description
`@forgerock/devtools-extension`	The Chrome extension (private, not published)
`@forgerock/devtools-bridge`	Opt-in SDK adapter — emits AuthEvents from subscribable clients
`@forgerock/devtools-types`	Shared AuthEvent Effect Schema definitions and TypeScript types

Architecture

TypeScript with Effect-TS on the data plane, Elm 0.19 on the view layer, Schema-validated at every boundary. Two-world content script architecture for security (MAIN world for page access, isolated world for chrome.runtime).

Screenshots

Flow View

Timeline View

Learn Tab

Test plan

Build extension with nx run devtools-extension:build
Load as unpacked extension in Chrome
Navigate to a Ping Identity / ForgeRock login page and trigger an auth flow
Verify Timeline captures network and SDK events with correct correlation
Verify Flow view renders node rail with status colours and detail cards
Verify Learn tab renders request lifecycle canvas with correct error highlighting
Verify diagnosis banner surfaces issues with remediation steps
Test import/export round-trip (export JSON → import → verify state)

changeset-bot · 2026-05-08T20:57:58Z

🦋 Changeset detected

Latest commit: a2e801e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@forgerock/journey-client	Minor
@forgerock/oidc-client	Minor
@forgerock/davinci-client	Minor
@forgerock/device-client	Minor
@forgerock/protect	Minor
@forgerock/sdk-types	Minor
@forgerock/sdk-utilities	Minor
@forgerock/iframe-manager	Minor
@forgerock/sdk-logger	Minor
@forgerock/sdk-oidc	Minor
@forgerock/sdk-request-middleware	Minor
@forgerock/storage	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-05-08T20:58:01Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 05e88756-ebf9-46a2-9ce2-8c73912e7761

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch chrome-extension

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-05-08T20:58:50Z

View your CI Pipeline Execution ↗ for commit 80c408b

Command	Status	Duration	Result
`nx run-many -t build --no-agents`	✅ Succeeded	<1s	View ↗
`nx affected -t build lint test typecheck e2e-ci`	✅ Succeeded	1m 23s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-09 20:20:23 UTC

@@ -0,0 +1,119 @@
+import { describe, it, expect } from 'vitest';
+import { Effect } from 'effect';
+import { EventStoreService, EventStoreLive, makeEmptyFlowState } from './event-store.service.js';


nx-cloud

Nx Cloud has identified a flaky task in your failed CI:

🔂 Since the failure was identified as flaky, we triggered a CI rerun by adding an empty commit to this branch.

View detailed reasoning in Nx Cloud ↗

_{🎓 Learn more about Self-Healing CI on nx.dev}

codecov-commenter · 2026-05-09T18:02:43Z

Codecov Report

❌ Patch coverage is 23.52941% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 17.62%. Comparing base (5d6747a) to head (a2e801e).
⚠️ Report is 94 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/davinci-client/src/lib/client.store.ts	0.00%	11 Missing ⚠️
packages/oidc-client/src/lib/client.store.ts	50.00%	2 Missing ⚠️

❌ Your patch status has failed because the patch coverage (23.52%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage.
❌ Your project status has failed because the head coverage (17.62%) is below the target coverage (40.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #628       +/-   ##
===========================================
- Coverage   70.90%   17.62%   -53.28%     
===========================================
  Files          53      154      +101     
  Lines        2021    24252    +22231     
  Branches      377     1159      +782     
===========================================
+ Hits         1433     4275     +2842     
- Misses        588    19977    +19389

Files with missing lines	Coverage Δ
packages/journey-client/src/lib/client.store.ts	`80.71% <100.00%> (+7.33%)`	⬆️
packages/oidc-client/src/lib/client.store.ts	`28.49% <50.00%> (ø)`
packages/davinci-client/src/lib/client.store.ts	`0.28% <0.00%> (ø)`

... and 102 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

pkg-pr-new · 2026-05-09T18:02:48Z

Open in StackBlitz

@forgerock/davinci-client

pnpm add https://pkg.pr.new/@forgerock/davinci-client@628

@forgerock/device-client

pnpm add https://pkg.pr.new/@forgerock/device-client@628

@forgerock/journey-client

pnpm add https://pkg.pr.new/@forgerock/journey-client@628

@forgerock/oidc-client

pnpm add https://pkg.pr.new/@forgerock/oidc-client@628

@forgerock/protect

pnpm add https://pkg.pr.new/@forgerock/protect@628

@forgerock/sdk-types

pnpm add https://pkg.pr.new/@forgerock/sdk-types@628

@forgerock/sdk-utilities

pnpm add https://pkg.pr.new/@forgerock/sdk-utilities@628

@forgerock/iframe-manager

pnpm add https://pkg.pr.new/@forgerock/iframe-manager@628

@forgerock/sdk-logger

pnpm add https://pkg.pr.new/@forgerock/sdk-logger@628

@forgerock/sdk-oidc

pnpm add https://pkg.pr.new/@forgerock/sdk-oidc@628

@forgerock/sdk-request-middleware

pnpm add https://pkg.pr.new/@forgerock/sdk-request-middleware@628

@forgerock/storage

pnpm add https://pkg.pr.new/@forgerock/storage@628

commit: a2e801e

Chrome extension for clients within the SDK ecosystem (javascript). Contains a bridge, extension, and types package. README.md documents feature set. chore: readme

- Narrow union type in message-handler tests before accessing event fields - Add `as const` to category literal in serialize-diagnosis test - Remove unknown property from oidc-bridge test config fixture - Add CardId, Vec2, CanvasState types and LearnMode to ViewMode in Elm - Add stub LearnMode case in View.elm for build compatibility

…ecycle view Add LearnView module with interactive canvas showing 4-card request lifecycle (Browser -> Server -> SDK -> Form) for each SDK node. Includes pan/zoom/drag canvas interactions, SVG icon cards with error visualization, and rail node selector. Wire into View toolbar as new Learn mode button alongside Timeline and Flow.

- Replace hardcoded (0,0) pan start with clientX/clientY JSON decoders - Add mousemove, mouseleave, and wheel event handlers to canvas SVG - Add card-level mousedown decoder for drag with clientX/clientY

Add expanded foreignObject panels to each canvas card showing contextual detail (request method/URL, response status/duration, SDK status transition, collector count). Add CSS classes for the Learn tab layout.

When no network events have a direct causedBy link to the selected SDK node, fall back to a time-window heuristic: find network events whose timestamp falls between this node and the next SDK node. This catches events for Journey/OIDC nodes and early flow steps where causedBy linkage may be missing.

- Pulse ring now targets the actual error source (SERVER for HTTP 4xx/5xx, BROWSER for CORS, SDK for SDK-only errors) - Arrow colors show error propagation direction (red only after error source) - SDK card distinguishes "received server error" vs "SDK error" - Richer expanded panels: color-coded status, error messages, URL in server detail - Browser card does not turn red on server errors (request was fine)

…ADME Replace TODO screenshot placeholders with actual screenshots of the Flow, Timeline, and Learn views. Add Learn section documenting the canvas-based request lifecycle visualization.

github-code-quality Bot found potential problems May 8, 2026

View reviewed changes

Comment thread packages/devtools-extension/src/background/event-store.service.test.ts

@@ -0,0 +1,119 @@

import { describe, it, expect } from 'vitest';

import { Effect } from 'effect';

import { EventStoreService, EventStoreLive, makeEmptyFlowState } from './event-store.service.js';