H-5764: Setup Sentry UserFeedback + ErrorTracker by kube · Pull Request #8241 · hashintel/hash

kube · 2026-01-06T22:06:55Z

Demo

Kapture 2026-01-07 at 20.22.59.mp4 (uploaded via Graphite)

🌟 What is the purpose of this PR?

This PR adds Sentry User Feedback + Error Tracker inside Petrinaut demo website.

🔍 What does this change?

Error Tracker

Because we don't want Petrinaut to be directly coupled to Sentry:

Adds React Context is added ErrorTrackerContext
Adds ErrorTrackerContext Provider for Sentry <SentryErrorTrackerProvider> (only used in demo-website)

This SentryErrorTrackerProvider is still not used for now in the app, but will be extended later to add more granular tracking of user experience in the demo app.

User Feedback

For now the User Feedback widget is the default one, this keeps it simple and prevents having to deal with React component props, or with design.

If we get a good Figma design, we'll be able customize this feedback button to place it properly in the UI.

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

does not modify any publishable blocks or libraries, or modifications do not need publishing

📜 Does this require a change to the docs?

The changes in this PR:

are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

do not affect the execution graph

⚠️ Known issues

Given the User Feedback widget is the default one, it's on top of the UI and could possibly hide some things.

🐾 Next steps

In the future, we'll do more granular tracking of what happens in the app.

❓ How to test this?

Use latest Petrinaut deployment

kube · 2026-01-06T22:07:25Z

H-5764: Setup Sentry UserFeedback + ErrorTracker #8241 👈 (View in Graphite)
main

This stack of pull requests is managed by Graphite. Learn more about stacking.

cursor · 2026-01-07T19:25:39Z

PR Summary

Introduces Sentry-based monitoring and a generic error tracking abstraction in the demo site.

Initialize Sentry in sentry/instrument.ts with browser error/tracing integrations and the User Feedback widget; enable via __ENVIRONMENT__/__SENTRY_DSN__
Wrap app with SentryErrorTrackerProvider implementing ErrorTrackerContext; add React root onUncaughtError, onCaughtError, and onRecoverableError handlers via @sentry/react
Add ErrorTrackerContext interface for pluggable error tracking
Update vite.config.ts to loadEnv and define __ENVIRONMENT__/__SENTRY_DSN__; add vite-env.d.ts and include Sentry files in tsconfig
Add @sentry/react dev dependency; tweak keyboard shortcut hook to ignore #sentry-feedback

^{Written by Cursor Bugbot for commit 0011c00. This will update automatically on new commits. Configure here.}

augmentcode · 2026-01-07T19:30:05Z

🤖 Augment PR Summary

Summary: This PR wires Sentry error tracking + user feedback into the Petrinaut demo site.

Changes:

Initialize Sentry in the demo site with browser integrations, tracing, and the default Feedback widget.
Add a generic ErrorTrackerContext in the Petrinaut library and a Sentry-backed provider used by the demo site.
Wrap the demo app with SentryErrorTrackerProvider and register React root error handlers (onUncaughtError, onCaughtError, onRecoverableError).
Load SENTRY_DSN from .env via Vite and expose it at build time via import.meta.env.SENTRY_DSN typings.
Adjust editor keyboard shortcut handling to avoid capturing keystrokes while Sentry feedback UI is focused.
Add @sentry/react dependency for the Petrinaut package.

_{🤖 Was this summary useful? React with 👍 or 👎}

augmentcode

Review completed. 3 suggestions posted.

Comment augment review to trigger a new review at any time.

augmentcode · 2026-01-07T19:30:07Z

@@ -1,12 +1,30 @@
+import "./sentry/instrument.js";


./sentry/instrument.js doesn’t exist in this PR (only instrument.ts is added), so this import will likely fail at runtime/build time.

_{🤖 Was this useful? React with 👍 or 👎}

augmentcode · 2026-01-07T19:30:07Z

+    "./*.ts",
+    "./*.d.ts",
+    "main/app.tsx",
+    "sentry/init-sentry.ts"


This include entry points at sentry/init-sentry.ts, but the added Sentry initializer file is sentry/instrument.ts (so this looks like a stale/incorrect path).

_{🤖 Was this useful? React with 👍 or 👎}

augmentcode · 2026-01-07T19:30:07Z

+    Sentry.withScope((scope) => {
+      if (context) {
+        for (const [key, value] of Object.entries(context)) {
+          scope.setContext(key, value as Record<string, unknown>);


scope.setContext() expects an object, but ErrorTrackerContextData allows any unknown value; passing primitives here can lead to dropped context or unexpected serialization.

_{🤖 Was this useful? React with 👍 or 👎}

CiaranMn · 2026-01-08T14:04:40Z

@@ -0,0 +1 @@
+SENTRY_DSN=https://5c0a691258164a68eac390cd10574484@o146262.ingest.us.sentry.io/4510663776141312


This feels like it shouldn't be committed to the repo. I've added it as an environment variable in Vercel so it will be picked up when built in Vercel.

For local testing we can add a non-committed .env.local with the value.

Yeah, I remove it, environment variable is certainly better.

CiaranMn · 2026-01-08T14:07:08Z

+  typeof import.meta.env.MODE === "string"
+    ? import.meta.env.MODE
+    : "development";


Let's call this 'environment' as it's what it tends to be called elsewhere.

I know that Vite sets a special 'mode' variable, but we don't actually want to rely on this – it means that if someone does a production build locally and runs it, any errors will be sent to Sentry as production errors.

The only 'production' errors in Sentry should be those from the main production site, so we need to handle setting the environment manually (via Vercel environment variables, added in a file below).

Suggested change

typeof import.meta.env.MODE === "string"

? import.meta.env.MODE

: "development";

typeof import.meta.env.ENVIRONMENT === "string"

? import.meta.env.ENVIRONMENT

: "development";

MODE is a constant provided by Vite:

https://vite.dev/guide/env-and-mode#built-in-constants

We could provide our own but it would be repeating what is already available, or use PROD === true.

Thanks and sorry for misreading/misunderstanding your point.

CiaranMn · 2026-01-08T14:08:15Z

+
+interface ImportMetaEnv {
+  readonly SENTRY_DSN?: string;
+  readonly MODE: string;


Suggested change

readonly MODE: string;

readonly ENVIRONMENT: string;

CiaranMn · 2026-01-08T14:10:43Z

+  const envDir = isLibMode ? undefined : path.resolve(__dirname);
+  const env = loadEnv(mode, envDir ?? process.cwd(), "");
+
+  // Get SENTRY_DSN from environment variables


Suggested change

// Get SENTRY_DSN from environment variables

CiaranMn · 2026-01-08T14:10:51Z

  const isLibMode = mode === "lib" || !!process.env.VITEST;

+  // Load environment variables from .env files
+  // For demo-site builds, load from the package root directory


Suggested change

// For demo-site builds, load from the package root directory

CiaranMn · 2026-01-08T14:11:47Z

+  const env = loadEnv(mode, envDir ?? process.cwd(), "");
+
+  // Get SENTRY_DSN from environment variables
+  const sentryDsn = env.SENTRY_DSN ?? process.env.SENTRY_DSN;


Load the environment from Vercel (which will be either production for the main site or preview for preview builds)

See https://vercel.com/docs/frameworks/frontend/vite#environment-variables

Suggested change

const sentryDsn = env.SENTRY_DSN ?? process.env.SENTRY_DSN;

const sentryDsn = env.SENTRY_DSN ?? process.env.SENTRY_DSN;

const environment = process.env.VITE_VERCEL_ENV ?? "development";

This line only makes sense for the demo site build so maybe we should only inject it in there somehow?

We can leave it in here for now

define in the config works by text replacement (if I'm not mistaken)

So this won't be bundled in the library, because there won't be no reference to the global variable in the library.

I'm gonna use define for that.

@CiaranMn I updated to use define, with __SENTRY_DSN__ and __ENVIRONMENT__

CiaranMn · 2026-01-08T14:12:21Z

      // Provide minimal process shim for TypeScript language service in browser
      "process.versions": JSON.stringify({ pnp: undefined }),
+      // Expose SENTRY_DSN at build time
+      "import.meta.env.SENTRY_DSN": JSON.stringify(sentryDsn),


Suggested change

"import.meta.env.SENTRY_DSN": JSON.stringify(sentryDsn),

"import.meta.env.SENTRY_DSN": JSON.stringify(sentryDsn),

"import.meta.env.ENVIRONMENT": environment,

…ider to a new path and enhance error handling callbacks

…e; improve Sentry integration by injecting SENTRY_DSN directly into the application.

…bsite

This will need a better solution soon.

…ENVIRONMENT in vite-env.d.ts and adjust Sentry initialization accordingly.

…t files in the 'sentry' directory.

…e: replace direct access to SENTRY_DSN with build-time injected constants, and streamline Sentry initialization to use these constants.

kube mentioned this pull request Jan 6, 2026

H-5691: Simulation Timeline Visualizer #8211

Merged

3 tasks

github-actions Bot added area/deps Relates to third-party dependencies (area) area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team labels Jan 6, 2026

kube changed the title ~~Add @sentry/react dependency~~ Setup Sentry UserFeedback + ErrorTracker Jan 6, 2026

vercel Bot deployed to Preview – petrinaut January 6, 2026 22:12 View deployment

vercel Bot deployed to Preview – hash January 6, 2026 22:20 View deployment

kube changed the title ~~Setup Sentry UserFeedback + ErrorTracker~~ H-5764: Setup Sentry UserFeedback + ErrorTracker Jan 7, 2026

vercel Bot deployed to Preview – petrinaut January 7, 2026 19:01 View deployment

kube marked this pull request as ready for review January 7, 2026 19:25

graphite-app Bot assigned kube Jan 7, 2026

graphite-app Bot reviewed Jan 7, 2026

View reviewed changes

Comment thread libs/@hashintel/petrinaut/package.json

vercel Bot deployed to Preview – petrinaut January 7, 2026 19:30 View deployment

augmentcode Bot reviewed Jan 7, 2026

View reviewed changes

cursor Bot reviewed Jan 7, 2026

View reviewed changes

Comment thread libs/@hashintel/petrinaut/demo-site/tsconfig.json Outdated

kube changed the base branch from cf/h-5691-visualiser-for-global-state to graphite-base/8241 January 8, 2026 13:07

CiaranMn reviewed Jan 8, 2026

View reviewed changes

kube added 4 commits January 9, 2026 10:44

Add @sentry/react dependency

5e48272

Add ErrorTracker interface/context

0db45e1

Simplify interface

da44098

Add SentryErrorTrackerProvider in demo-site

662a3f7

kube added 6 commits January 9, 2026 10:44

Refactor Sentry integration in demo-site: move SentryErrorTrackerProv…

95e4792

…ider to a new path and enhance error handling callbacks

Load SENTRY_DSN from environment variables and expose it at build tim…

73b2360

…e; improve Sentry integration by injecting SENTRY_DSN directly into the application.

Add User Feedback

84e081d

Move @sentry/react to devDependencies because only needed for demo we…

820c313

…bsite

Exclude Sentry Feedback from Keyboard Shortcuts.

b42d5ac

This will need a better solution soon.

Only enable in production

c0d3e32

kube force-pushed the cf/h-5764-add-sentry-give-feedback-button-to-hosted-version-of branch from 7a07628 to c0d3e32 Compare January 9, 2026 09:45

kube force-pushed the graphite-base/8241 branch from f04e2f5 to 5b67a3b Compare January 9, 2026 09:45

kube changed the base branch from graphite-base/8241 to main January 9, 2026 09:45

github-actions Bot removed the area/infra Relates to version control, CI, CD or IaC (area) label Jan 9, 2026

graphite-app Bot requested a review from a team January 9, 2026 09:45

vercel Bot deployed to Preview – petrinaut January 9, 2026 09:49 View deployment

vercel Bot deployed to Preview – hash January 9, 2026 09:52 View deployment

kube added 4 commits January 9, 2026 11:25

Remove .env

c4fdb46

Update environment variable handling in demo-site: replace MODE with …

757ef15

…ENVIRONMENT in vite-env.d.ts and adjust Sentry initialization accordingly.

Remove ErrorTracker.captureException context arg for now

5477870

Update TypeScript configuration in demo-site to include all TypeScrip…

3718bd2

…t files in the 'sentry' directory.

vercel Bot deployed to Preview – petrinaut January 9, 2026 10:56 View deployment

cursor Bot reviewed Jan 9, 2026

View reviewed changes

Comment thread libs/@hashintel/petrinaut/vite.config.ts Outdated

Refactor environment variable handling in vite.config.ts and demo-sit…

1180e70

…e: replace direct access to SENTRY_DSN with build-time injected constants, and streamline Sentry initialization to use these constants.

vercel Bot deployed to Preview – petrinaut January 9, 2026 11:04 View deployment

Lint

0011c00

CiaranMn approved these changes Jan 9, 2026

View reviewed changes

vercel Bot deployed to Preview – petrinaut January 9, 2026 11:39 View deployment

CiaranMn added this pull request to the merge queue Jan 9, 2026

Merged via the queue into main with commit f9a1894 Jan 9, 2026
40 checks passed

CiaranMn deleted the cf/h-5764-add-sentry-give-feedback-button-to-hosted-version-of branch January 9, 2026 11:56

		@@ -0,0 +1 @@
		SENTRY_DSN=https://5c0a691258164a68eac390cd10574484@o146262.ingest.us.sentry.io/4510663776141312

	const sentryDsn = env.SENTRY_DSN ?? process.env.SENTRY_DSN;
	const sentryDsn = env.SENTRY_DSN ?? process.env.SENTRY_DSN;
	const environment = process.env.VITE_VERCEL_ENV ?? "development";

	"import.meta.env.SENTRY_DSN": JSON.stringify(sentryDsn),
	"import.meta.env.SENTRY_DSN": JSON.stringify(sentryDsn),
	"import.meta.env.ENVIRONMENT": environment,

Conversation

kube commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Demo

🌟 What is the purpose of this PR?

🔍 What does this change?

Error Tracker

User Feedback

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

📜 Does this require a change to the docs?

🕸️ Does this require a change to the Turbo Graph?

⚠️ Known issues

🐾 Next steps

❓ How to test this?

Uh oh!

kube commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor Bot commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

Uh oh!

augmentcode Bot commented Jan 7, 2026

Uh oh!

augmentcode Bot left a comment

Choose a reason for hiding this comment

Uh oh!

augmentcode Bot Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

augmentcode Bot Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

augmentcode Bot Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

kube commented Jan 6, 2026 •

edited

Loading

kube commented Jan 6, 2026 •

edited

Loading

cursor Bot commented Jan 7, 2026 •

edited

Loading