Skip to content

Fix Sentry server instrumentation and error page UI#524

Merged
SvenVw merged 3 commits into
mainfrom
hotfix/FDM523
Mar 20, 2026
Merged

Fix Sentry server instrumentation and error page UI#524
SvenVw merged 3 commits into
mainfrom
hotfix/FDM523

Conversation

@SvenVw
Copy link
Copy Markdown
Collaborator

@SvenVw SvenVw commented Mar 20, 2026

Summary by CodeRabbit

  • Bug Fixes

    • Improved error message copying on error pages with fallback support when browser clipboard access is blocked, providing clearer user feedback.
  • Chores

    • Enhanced server-side error tracking initialization with improved startup logging.
    • Version bumped to 0.28.5.

closes #523

@SvenVw SvenVw changed the base branch from development to main March 20, 2026 14:34
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 20, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 44e35ce1-87a1-48e4-9b31-f67171d97ddf

📥 Commits

Reviewing files that changed from the base of the PR and between 6bbe778 and 4edbdc9.

📒 Files selected for processing (2)
  • fdm-app/CHANGELOG.md
  • fdm-app/package.json
🚧 Files skipped from review as they are similar to previous changes (1)
  • fdm-app/package.json

📝 Walkthrough

Walkthrough

This PR fixes server-side Sentry error capture and error page clipboard functionality. It removes the /sentry-tunnel route, adds server SDK initialization to npm scripts and entry.server.tsx, simplifies client-side error reporting, updates clipboard copy to async with proper fallback UI feedback, and adds startup logging for Sentry initialization.

Changes

Cohort / File(s) Summary
Sentry Server Initialization
package.json, entry.server.tsx, instrument.server.mjs
Updated npm scripts (start, start-dev) to set NODE_OPTIONS='--import ./instrument.server.mjs'; added fallback import in entry.server.tsx; added startup logging confirming Sentry initialization or warning when DSN is missing. Version bumped to 0.28.5.
Sentry Client Cleanup
entry.client.tsx, root.tsx, sentry-tunnel.tsx
Removed /Unexpected Server Error/ from client ignoreErrors; removed tunnel: "/sentry-tunnel" config; deleted entire sentry-tunnel.tsx route (118 lines) that previously proxied Sentry envelopes; removed redundant Sentry.captureException() call in ErrorBoundary for RouteErrorResponse (server-side capture is sufficient).
Error Page Clipboard Fix
error.tsx
Converted isCopied boolean to tri-state copyState ("idle" | "copied" | "failed"); made copyStackTrace async with navigator.clipboard.writeText() and DOM fallback selection on denial; updated button label to show success on "copied", explicit manual-copy message on "failed", or default label otherwise.
Documentation
CHANGELOG.md
Added 0.28.5 patch entry documenting server-side Sentry initialization, error page clipboard improvements, removal of sentry-tunnel route, and client-side error handling simplifications.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

Suggested labels

fdm-app, bug, branch:main

Suggested reviewers

  • BoraIneviNMI
  • gerardhros

Poem

🐰 A server that whispers to Sentry's dark ear,
No tunnel to tangle, no clipboard so clear—
With async awaits and a fallback so spry,
Errors now surface where mortals can spy!
Hops jubilantly

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely summarizes the main changes: fixing Sentry server instrumentation and the error page UI.
Linked Issues check ✅ Passed All coding requirements from issue #523 are addressed: NODE_OPTIONS added to start scripts, fallback import in entry.server.tsx, startup logging added, clipboard handling fixed with state management, sentry-tunnel route removed, redundant Sentry.captureException() calls removed, and /Unexpected Server Error/ removed from ignoreErrors.
Out of Scope Changes check ✅ Passed All changes align with the stated objectives from issue #523; no unrelated modifications or scope creep detected beyond the documented fixes.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch hotfix/FDM523
📝 Coding Plan
  • Generate coding plan for human review comments

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.

@sentry
Copy link
Copy Markdown

sentry Bot commented Mar 20, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@coderabbitai coderabbitai Bot changed the title @coderabbitai Fix Sentry server instrumentation and error page UI Mar 20, 2026
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
fdm-app/app/components/custom/error.tsx (2)

57-72: Good fix for the clipboard permission issue.

The async/await pattern correctly addresses the original bug where the unhandled Promise caused false success indication. The fallback text selection using Range/Selection APIs is a solid UX recovery path.

One minor consideration: the catch block swallows the error silently. For debugging in production, you may want to log it.

💡 Optional: Add error logging for debugging
         } catch {
+            console.warn("Clipboard write failed, falling back to text selection")
             // Fallback: select the text in the pre element so the user can copy manually
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@fdm-app/app/components/custom/error.tsx` around lines 57 - 72, The catch
block in copyStackTrace currently swallows the thrown error; update the catch to
accept the error parameter (e.g., catch (err)) and log the error (e.g.,
console.error or your app logger) along with context before running the fallback
selection and setCopyState("failed") so failures are recorded for debugging;
reference the copyStackTrace function, the errorDetails variable, and
setCopyState to locate where to add the error logging.

124-128: Consider the button width with the long failure message.

The failure message "Browser staat niet toe om te kopiëren — selecteer de tekst hieronder en kopieer handmatig" is quite long and may cause layout issues on smaller screens or overflow the button container.

Consider either:

  1. Shortening the message (e.g., "Kopiëren geblokkeerd — selecteer handmatig")
  2. Moving the detailed instruction to a tooltip or separate text element below the button
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@fdm-app/app/components/custom/error.tsx` around lines 124 - 128, The long
failure label rendered in the JSX ternary for copyState causes layout/overflow
issues; update the copyState === "failed" branch in the component (the ternary
that currently returns "Browser staat niet toe om te kopiëren — selecteer de
tekst hieronder en kopieer handmatig") to use a shorter button label (e.g.,
"Kopiëren geblokkeerd — selecteer handmatig") and move the full instruction into
a separate element or tooltip adjacent to the button (so keep the ternary logic
on copyState, but render detailed guidance in a small <span> or tooltip
component under/next to the button).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@fdm-app/app/components/custom/error.tsx`:
- Around line 57-72: The catch block in copyStackTrace currently swallows the
thrown error; update the catch to accept the error parameter (e.g., catch (err))
and log the error (e.g., console.error or your app logger) along with context
before running the fallback selection and setCopyState("failed") so failures are
recorded for debugging; reference the copyStackTrace function, the errorDetails
variable, and setCopyState to locate where to add the error logging.
- Around line 124-128: The long failure label rendered in the JSX ternary for
copyState causes layout/overflow issues; update the copyState === "failed"
branch in the component (the ternary that currently returns "Browser staat niet
toe om te kopiëren — selecteer de tekst hieronder en kopieer handmatig") to use
a shorter button label (e.g., "Kopiëren geblokkeerd — selecteer handmatig") and
move the full instruction into a separate element or tooltip adjacent to the
button (so keep the ternary logic on copyState, but render detailed guidance in
a small <span> or tooltip component under/next to the button).

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 23a5f8d7-5675-4d17-a0b3-e20bf0430968

📥 Commits

Reviewing files that changed from the base of the PR and between 63fae46 and 6bbe778.

📒 Files selected for processing (8)
  • .changeset/nice-views-carry.md
  • fdm-app/app/components/custom/error.tsx
  • fdm-app/app/entry.client.tsx
  • fdm-app/app/entry.server.tsx
  • fdm-app/app/root.tsx
  • fdm-app/app/routes/sentry-tunnel.tsx
  • fdm-app/instrument.server.mjs
  • fdm-app/package.json
💤 Files with no reviewable changes (2)
  • fdm-app/app/entry.client.tsx
  • fdm-app/app/routes/sentry-tunnel.tsx

@SvenVw SvenVw merged commit f63a4de into main Mar 20, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Server-side errors not captured in Sentry + error page copy button broken

1 participant