feat(error-page): Copy to clipboard

[razzeee]

Add clipboard functionality to copy error details and enhance error reporting

The idea is to make it easier to grab the whole context, to be able to feed it into an AI or report it here.

[netlify]

✅ Deploy Preview for cedarjs canceled.

Name	Link
🔨 Latest commit	f70f3d5
🔍 Latest deploy log	https://app.netlify.com/projects/cedarjs/deploys/696fe69a587e540008b2a76f

[razzeee]

I'm not too sure how to actually test the new page in a working stack. That's probably easy for you.

[Tobbe]

I'm not too sure how to actually test the new page in a working stack. That's probably easy for you.

Ja, I'll take care of that

[nx-cloud]

🤖 Nx Cloud AI Fix

Ensure the fix-ci command is configured to always run in your CI pipeline to get automatic fixes in future runs. For more information, please see https://nx.dev/ci/features/self-healing-ci

---

View your CI Pipeline Execution ↗ for commit f70f3d5

Command	Status	Duration	Result
nx run-many -t build:pack --exclude create-ceda...	✅ Succeeded	2s	View ↗
nx run-many -t build	✅ Succeeded	4s	View ↗
nx run-many -t test --minWorkers=1 --maxWorkers=4	✅ Succeeded	5s	View ↗
nx run-many -t test:types	✅ Succeeded	9s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-20 20:51:32 UTC

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds a "Copy All" button to the fatal error page that allows users to copy formatted error details (including error type, message, request/response context, and stack trace) to the clipboard. This makes it easier to share error information with AI assistants or when reporting bugs.

Key Changes:

• Added formatErrorForClipboard() function that formats comprehensive error details into a text report
• Added "Copy All" button with visual feedback (checkmark on success, error message on failure)
• Restructured UI to add a "Stack Trace" section title for better organization
• Fixed RWJS_DEBUG_ENV safety check to properly handle undefined cases
• Updated branding from RedwoodJS to CedarJS and removed Discourse link (kept Discord only)

Issues Identified:

1. Test Coverage Gap: The test named "copies error details to clipboard when Copy All button is clicked" doesn't actually verify the clipboard API was called or validate the copied content
2. Variable Shadowing: The catch block at line 163 uses err which shadows the outer error variable
3. Potential Memory Leak: setTimeout calls aren't cleaned up on component unmount, which can trigger React warnings
4. Missing Error Handling: JSON.stringify() calls on lines 78 and 90 could throw on circular references, causing the entire copy operation to fail

The core functionality is sound and the feature adds genuine value, but the test coverage needs improvement and there are defensive coding opportunities to handle edge cases more gracefully.

Confidence Score: 3/5

• This PR is moderately safe to merge with some quality improvements recommended
• Score of 3 reflects that while the feature works correctly for common use cases, there are several code quality issues: incomplete test coverage (test doesn't verify clipboard API calls), potential memory leak from uncleaned timeouts, missing error handling for JSON.stringify edge cases, and variable shadowing. None are critical bugs that would break production, but they represent technical debt that should be addressed.
• Both files need attention: DevFatalErrorPage.tsx for the memory leak and JSON.stringify error handling, and DevFatalErrorPage.test.tsx for incomplete test assertions

Important Files Changed

File Analysis

Filename	Score	Overview
packages/web/src/components/DevFatalErrorPage.tsx	3/5	Adds clipboard copy functionality with error formatting. Contains variable shadowing bug and potential memory leak from setTimeout. Missing error handling for JSON.stringify edge cases.
packages/web/src/components/tests/DevFatalErrorPage.test.tsx	2/5	New test file with incomplete test coverage. Test at line 55-65 doesn't actually verify clipboard functionality despite its name. Missing assertions for mockWriteText calls and clipboard content verification.

Sequence Diagram

sequenceDiagram
    participant User
    participant DevFatalErrorPage
    participant formatErrorForClipboard
    participant navigator.clipboard
    participant setState

    User->>DevFatalErrorPage: Clicks "Copy All" button
    DevFatalErrorPage->>formatErrorForClipboard: Call with (err, stack, typeName, msg, err)
    formatErrorForClipboard->>formatErrorForClipboard: Build error report lines
    formatErrorForClipboard->>formatErrorForClipboard: Add error type & message
    formatErrorForClipboard->>formatErrorForClipboard: Extract request details
    formatErrorForClipboard->>formatErrorForClipboard: JSON.stringify variables & response
    formatErrorForClipboard->>formatErrorForClipboard: Iterate stack.items for trace
    formatErrorForClipboard->>formatErrorForClipboard: Add source code context
    formatErrorForClipboard-->>DevFatalErrorPage: Return formatted string
    DevFatalErrorPage->>navigator.clipboard: writeText(errorText)
    alt Clipboard write succeeds
        navigator.clipboard-->>DevFatalErrorPage: Success
        DevFatalErrorPage->>setState: setCopyFeedback('✓ Copied to clipboard')
        DevFatalErrorPage->>DevFatalErrorPage: setTimeout to clear feedback (3s)
    else Clipboard write fails
        navigator.clipboard-->>DevFatalErrorPage: Error
        DevFatalErrorPage->>setState: setCopyFeedback('Failed to copy')
        DevFatalErrorPage->>DevFatalErrorPage: setTimeout to clear feedback (3s)
    end
    DevFatalErrorPage-->>User: Show feedback message

Loading

[greptile-apps]

_{7 files reviewed, 7 comments}

_{Edit Code Review Agent Settings | Greptile}

[razzeee]

You updating the testing docs, made me wonder, if we should add some cedar specific context, so that it knows to query https://cedarjs.com/llms-full.txt for e.g.

[Tobbe]

@razzeee I have no idea why this is failing on Windows. Do you (or someone at your work) have a Windows computer you could test this on?

[Tobbe]

Test fixed itself after I just triggered a rerun 🤷

[Tobbe]

And now the web tests failed again, but on Ubuntu this time. Definitely too flaky :(

[Tobbe]

It passed CI twice. I still don't like that it was flaky, but let's see how it behaves over the next few days

[github-actions]

The changes in this PR are now available in 3.0.0-canary.13210+975f5db67