From 8dd56d18d80a5845c31884bf590f71b7deb4edd5 Mon Sep 17 00:00:00 2001
From: Charly Gomez <charly.gomez@sentry.io>
Date: Mon, 19 Jan 2026 11:03:32 +0100
Subject: [PATCH 1/2] add testing app

---
 .../nextjs-16-userfeedback/.gitignore         |  48 ++++
 .../nextjs-16-userfeedback/.npmrc             |   4 +
 .../nextjs-16-userfeedback/README.md          |  18 ++
 .../app/examples/attachToFeedbackButton.tsx   |  32 +++
 .../app/examples/crashReportButton.tsx        |  20 ++
 .../app/examples/createFeedbackFormButton.tsx |  36 +++
 .../app/examples/feedbackButton.tsx           |  60 +++++
 .../app/examples/myFeedbackForm.tsx           |  48 ++++
 .../app/examples/thumbsUpDownButtons.tsx      |  53 +++++
 .../app/examples/toggleFeedbackButton.tsx     |  35 +++
 .../app/examples/translatedFeedbackForm.tsx   |  52 +++++
 .../app/global-error.tsx                      |  19 ++
 .../nextjs-16-userfeedback/app/globals.css    |  62 +++++
 .../nextjs-16-userfeedback/app/layout.tsx     |  19 ++
 .../nextjs-16-userfeedback/app/page.tsx       |  69 ++++++
 .../instrumentation-client.ts                 |  20 ++
 .../nextjs-16-userfeedback/instrumentation.ts |  13 ++
 .../nextjs-16-userfeedback/next-env.d.ts      |   6 +
 .../nextjs-16-userfeedback/next.config.js     |   8 +
 .../nextjs-16-userfeedback/package.json       |  32 +++
 .../playwright.config.mjs                     |  25 ++
 .../nextjs-16-userfeedback/postcss.config.mjs |   5 +
 .../sentry.edge.config.ts                     |  12 +
 .../sentry.server.config.ts                   |  12 +
 .../start-event-proxy.mjs                     |  14 ++
 .../tests/feedback.test.ts                    | 216 ++++++++++++++++++
 .../nextjs-16-userfeedback/tsconfig.json      |  38 +++
 27 files changed, 976 insertions(+)
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/.gitignore
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/.npmrc
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/README.md
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/attachToFeedbackButton.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/crashReportButton.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/createFeedbackFormButton.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/feedbackButton.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/myFeedbackForm.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/thumbsUpDownButtons.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/toggleFeedbackButton.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/translatedFeedbackForm.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/global-error.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/globals.css
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/layout.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/page.tsx
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/instrumentation-client.ts
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/instrumentation.ts
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next-env.d.ts
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next.config.js
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/package.json
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/playwright.config.mjs
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/postcss.config.mjs
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/sentry.edge.config.ts
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/sentry.server.config.ts
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/start-event-proxy.mjs
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tests/feedback.test.ts
 create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tsconfig.json

diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/.gitignore b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/.gitignore
new file mode 100644
index 000000000000..0c60c8eeaee8
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/.gitignore
@@ -0,0 +1,48 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+!*.d.ts
+
+# Sentry
+.sentryclirc
+
+.vscode
+
+test-results
+event-dumps
+
+.tmp_dev_server_logs
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/.npmrc b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/.npmrc
new file mode 100644
index 000000000000..a3160f4de175
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/.npmrc
@@ -0,0 +1,4 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/README.md b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/README.md
new file mode 100644
index 000000000000..0bd38af41162
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/README.md
@@ -0,0 +1,18 @@
+# Next.js 16 User Feedback E2E Tests
+
+This test application verifies the Sentry User Feedback SDK functionality with Next.js 16.
+
+## Tests
+
+The tests cover various feedback APIs:
+
+- `attachTo()` - Attaching feedback to custom buttons
+- `createWidget()` - Creating/removing feedback widget triggers
+- `createForm()` - Creating feedback forms with custom labels
+- `captureFeedback()` - Programmatic feedback submission
+- ThumbsUp/ThumbsDown sentiment tagging
+- Dialog cancellation
+
+## Credits
+
+Shoutout to [Ryan Albrecht](https://github.com/ryan953) for the underlying [testing app](https://github.com/ryan953/nextjs-test-feedback)!
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/attachToFeedbackButton.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/attachToFeedbackButton.tsx
new file mode 100644
index 000000000000..4dbfaec7dbc5
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/attachToFeedbackButton.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function AttachToFeedbackButton() {
+  const [feedback, setFeedback] = useState<ReturnType<typeof Sentry.getFeedback>>();
+  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
+  useEffect(() => {
+    setFeedback(Sentry.getFeedback());
+  }, []);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (feedback && buttonRef.current) {
+      const unsubscribe = feedback.attachTo(buttonRef.current, {
+        tags: { component: 'AttachToFeedbackButton' },
+        onSubmitSuccess: data => {
+          console.log('onSubmitSuccess', data);
+        },
+      });
+      return unsubscribe;
+    }
+    return () => {};
+  }, [feedback]);
+
+  return (
+    <button className="hover:bg-hover px-4 py-2 rounded-md" type="button" ref={buttonRef} data-testid="attach-to-button">
+      Give me feedback (attachTo)
+    </button>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/crashReportButton.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/crashReportButton.tsx
new file mode 100644
index 000000000000..5a85c441e994
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/crashReportButton.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import * as Sentry from '@sentry/nextjs';
+
+export default function CrashReportButton() {
+  return (
+    <button
+      className="hover:bg-hover px-4 py-2 rounded-md"
+      type="button"
+      data-testid="crash-report-button"
+      onClick={() => {
+        Sentry.captureException(new Error('Crash Report Button Clicked'), {
+          data: { useCrashReport: true },
+        });
+      }}
+    >
+      Crash Report
+    </button>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/createFeedbackFormButton.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/createFeedbackFormButton.tsx
new file mode 100644
index 000000000000..3514b1baa95c
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/createFeedbackFormButton.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+type FeedbackIntegration = ReturnType<typeof Sentry.getFeedback>;
+
+export default function CreateFeedbackFormButton() {
+  const [feedback, setFeedback] = useState<FeedbackIntegration>();
+  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
+  useEffect(() => {
+    setFeedback(Sentry.getFeedback());
+  }, []);
+
+  // Don't render custom feedback button if Feedback integration isn't installed
+  if (!feedback) {
+    return null;
+  }
+
+  return (
+    <button
+      className="hover:bg-hover px-4 py-2 rounded-md"
+      type="button"
+      data-testid="create-form-button"
+      onClick={async () => {
+        const form = await feedback.createForm({
+          tags: { component: 'CreateFeedbackFormButton' },
+        });
+        form.appendToDom();
+        form.open();
+      }}
+    >
+      Give me feedback (createForm)
+    </button>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/feedbackButton.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/feedbackButton.tsx
new file mode 100644
index 000000000000..d77bd6199069
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/feedbackButton.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import type { RefObject } from 'react';
+import * as Sentry from '@sentry/nextjs';
+import { useEffect, useRef, useState } from 'react';
+
+export default function FeedbackButton() {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  useFeedbackWidget({
+    buttonRef,
+    options: {
+      tags: {
+        component: 'FeedbackButton',
+      },
+    },
+  });
+
+  return (
+    <button ref={buttonRef} data-testid="feedback-button">
+      Give Feedback
+    </button>
+  );
+}
+
+function useFeedbackWidget({
+  buttonRef,
+  options = {},
+}: {
+  buttonRef?: RefObject<HTMLButtonElement | null> | RefObject<HTMLAnchorElement | null>;
+  options?: {
+    tags?: Record<string, string>;
+  };
+}) {
+  const [feedback, setFeedback] = useState<ReturnType<typeof Sentry.getFeedback>>();
+  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
+  useEffect(() => {
+    setFeedback(Sentry.getFeedback());
+  }, []);
+
+  useEffect(() => {
+    if (!feedback) {
+      return undefined;
+    }
+
+    if (buttonRef) {
+      if (buttonRef.current) {
+        return feedback.attachTo(buttonRef.current, options);
+      }
+    } else {
+      const widget = feedback.createWidget(options);
+      return () => {
+        widget.removeFromDom();
+      };
+    }
+
+    return undefined;
+  }, [buttonRef, feedback, options]);
+
+  return feedback;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/myFeedbackForm.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/myFeedbackForm.tsx
new file mode 100644
index 000000000000..8f693f7e4fb0
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/myFeedbackForm.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import * as Sentry from '@sentry/nextjs';
+
+export default function MyFeedbackForm() {
+  return (
+    <form
+      id="my-feedback-form"
+      data-testid="my-feedback-form"
+      onSubmit={async event => {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+
+        const attachment = async () => {
+          const attachmentField = formData.get('attachment') as File;
+          if (!attachmentField || attachmentField.size === 0) {
+            return null;
+          }
+          const data = new Uint8Array(await attachmentField.arrayBuffer());
+          const attachmentData = {
+            data,
+            filename: 'upload',
+          };
+          return attachmentData;
+        };
+
+        Sentry.getCurrentScope().setTags({ component: 'MyFeedbackForm' });
+        const attachmentData = await attachment();
+        Sentry.captureFeedback(
+          {
+            name: String(formData.get('name')),
+            email: String(formData.get('email')),
+            message: String(formData.get('message')),
+          },
+          attachmentData ? { attachments: [attachmentData] } : undefined,
+        );
+      }}
+    >
+      <input name="name" placeholder="Your Name" data-testid="my-form-name" />
+      <input name="email" placeholder="Your Email" data-testid="my-form-email" />
+      <textarea name="message" placeholder="What's the issue?" data-testid="my-form-message" />
+      <input type="file" name="attachment" data-testid="my-form-attachment" />
+      <button type="submit" data-testid="my-form-submit">
+        Submit
+      </button>
+    </form>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/thumbsUpDownButtons.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/thumbsUpDownButtons.tsx
new file mode 100644
index 000000000000..d101dedb8b99
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/thumbsUpDownButtons.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import * as Sentry from '@sentry/nextjs';
+import { Fragment, useEffect, useState } from 'react';
+
+export default function ThumbsUpDownButtons() {
+  const [feedback, setFeedback] = useState<ReturnType<typeof Sentry.getFeedback>>();
+  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
+  useEffect(() => {
+    setFeedback(Sentry.getFeedback());
+  }, []);
+
+  return (
+    <Fragment>
+      <strong>Was this helpful?</strong>
+      <button
+        title="I like this"
+        data-testid="thumbs-up-button"
+        onClick={async () => {
+          const form = await feedback?.createForm({
+            messagePlaceholder: 'What did you like most?',
+            tags: {
+              component: 'ThumbsUpDownButtons',
+              'feedback.type': 'positive',
+            },
+          });
+          form?.appendToDom();
+          form?.open();
+        }}
+      >
+        Yes
+      </button>
+
+      <button
+        title="I don't like this"
+        data-testid="thumbs-down-button"
+        onClick={async () => {
+          const form = await feedback?.createForm({
+            messagePlaceholder: 'How can we improve?',
+            tags: {
+              component: 'ThumbsUpDownButtons',
+              'feedback.type': 'negative',
+            },
+          });
+          form?.appendToDom();
+          form?.open();
+        }}
+      >
+        No
+      </button>
+    </Fragment>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/toggleFeedbackButton.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/toggleFeedbackButton.tsx
new file mode 100644
index 000000000000..ba2c0abcd708
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/toggleFeedbackButton.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function ToggleFeedbackButton() {
+  const [feedback, setFeedback] = useState<ReturnType<typeof Sentry.getFeedback>>();
+  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
+  useEffect(() => {
+    setFeedback(Sentry.getFeedback());
+  }, []);
+
+  const [widget, setWidget] = useState<null | { removeFromDom: () => void }>();
+  return (
+    <button
+      className="hover:bg-hover px-4 py-2 rounded-md"
+      type="button"
+      data-testid="toggle-feedback-button"
+      onClick={async () => {
+        if (widget) {
+          widget.removeFromDom();
+          setWidget(null);
+        } else if (feedback) {
+          setWidget(
+            feedback.createWidget({
+              tags: { component: 'ToggleFeedbackButton' },
+            }),
+          );
+        }
+      }}
+    >
+      {widget ? 'Remove Widget' : 'Create Widget'}
+    </button>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/translatedFeedbackForm.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/translatedFeedbackForm.tsx
new file mode 100644
index 000000000000..95ecc892ee9b
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/translatedFeedbackForm.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+type FeedbackIntegration = ReturnType<typeof Sentry.getFeedback>;
+
+export default function TranslatedFeedbackForm() {
+  const [feedback, setFeedback] = useState<FeedbackIntegration>();
+  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
+  useEffect(() => {
+    setFeedback(Sentry.getFeedback());
+  }, []);
+
+  // Don't render custom feedback button if Feedback integration isn't installed
+  if (!feedback) {
+    return null;
+  }
+
+  return (
+    <button
+      className="hover:bg-hover px-4 py-2 rounded-md"
+      type="button"
+      data-testid="translated-feedback-button"
+      onClick={async () => {
+        const form = await feedback.createForm({
+          tags: { component: 'TranslatedFeedbackForm' },
+          triggerLabel: 'Lets get started',
+          triggerAriaLabel: 'Send it!',
+          cancelButtonLabel: 'Nevermind',
+          submitButtonLabel: 'Send it!',
+          confirmButtonLabel: 'I confirm',
+          formTitle: 'Feedback Test Area',
+          emailLabel: 'Email or contact info',
+          emailPlaceholder: 'you@example.com or (555) 555-5555',
+          messageLabel: "What's up?",
+          messagePlaceholder: 'Tell me about it',
+          nameLabel: 'Who dis?',
+          namePlaceholder: 'Name, nickname, etc.',
+          successMessageText: 'Thanks, we got it!',
+          isRequiredLabel: 'critical',
+          addScreenshotButtonLabel: 'Add a pic',
+          removeScreenshotButtonLabel: 'Drop the pic',
+        });
+        form.appendToDom();
+        form.open();
+      }}
+    >
+      Give me feedback (translated)
+    </button>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/global-error.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/global-error.tsx
new file mode 100644
index 000000000000..b1e42181ee4e
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/global-error.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import * as Sentry from '@sentry/nextjs';
+import NextError from 'next/error';
+import { useEffect } from 'react';
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/globals.css b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/globals.css
new file mode 100644
index 000000000000..05c19332694b
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/globals.css
@@ -0,0 +1,62 @@
+@import 'tailwindcss';
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+a {
+  color: #007bff;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  background-color: #f0f0f0;
+  color: #333;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.3s ease;
+}
+button:hover {
+  background-color: #e0e0e0;
+}
+button:active {
+  background-color: #d0d0d0;
+}
+button:focus {
+  outline: 2px solid #007bff;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+input,
+textarea {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.3s ease;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/layout.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/layout.tsx
new file mode 100644
index 000000000000..78d6b96c7ede
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/layout.tsx
@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Feedback Test App',
+  description: 'E2E test app for Sentry Feedback SDK',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="antialiased">{children}</body>
+    </html>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/page.tsx
new file mode 100644
index 000000000000..cd58d35ab4fa
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/page.tsx
@@ -0,0 +1,69 @@
+import FeedbackButton from './examples/feedbackButton';
+import ToggleFeedbackButton from './examples/toggleFeedbackButton';
+import AttachToFeedbackButton from './examples/attachToFeedbackButton';
+import CreateFeedbackFormButton from './examples/createFeedbackFormButton';
+import MyFeedbackForm from './examples/myFeedbackForm';
+import CrashReportButton from './examples/crashReportButton';
+import ThumbsUpDownButtons from './examples/thumbsUpDownButtons';
+import TranslatedFeedbackForm from './examples/translatedFeedbackForm';
+
+export default function Home() {
+  return (
+    <div className="m-auto max-w-screen-lg">
+      <h1 className="text-2xl mt-4" data-testid="page-title">
+        Feedback Test Area
+      </h1>
+      <p>This is a test Next.JS website that implements the Sentry Feedback SDK.</p>
+      <ul className="raw flex flex-col gap-2">
+        <li>
+          <fieldset className="border-1 border-gray-300 rounded-md p-2" data-testid="feedback-button-section">
+            <legend>Feedback Button</legend>
+            <FeedbackButton />
+          </fieldset>
+        </li>
+        <li>
+          <fieldset className="border-1 border-gray-300 rounded-md p-2" data-testid="toggle-feedback-section">
+            <legend>Toggle Feedback Button</legend>
+            <ToggleFeedbackButton />
+          </fieldset>
+        </li>
+        <li>
+          <fieldset className="border-1 border-gray-300 rounded-md p-2" data-testid="attach-to-feedback-section">
+            <legend>Attach To Feedback Button</legend>
+            <AttachToFeedbackButton />
+          </fieldset>
+        </li>
+        <li>
+          <fieldset className="border-1 border-gray-300 rounded-md p-2" data-testid="create-feedback-form-section">
+            <legend>Create Feedback Form Button</legend>
+            <CreateFeedbackFormButton />
+          </fieldset>
+        </li>
+        <li>
+          <fieldset className="border-1 border-gray-300 rounded-md p-2" data-testid="my-feedback-form-section">
+            <legend>My Feedback Form</legend>
+            <MyFeedbackForm />
+          </fieldset>
+        </li>
+        <li>
+          <fieldset className="border-1 border-gray-300 rounded-md p-2" data-testid="crash-report-section">
+            <legend>Crash Report Button</legend>
+            <CrashReportButton />
+          </fieldset>
+        </li>
+        <li>
+          <fieldset className="border-1 border-gray-300 rounded-md p-2" data-testid="thumbs-up-down-section">
+            <legend>Thumbs Up/Down Buttons</legend>
+            <ThumbsUpDownButtons />
+          </fieldset>
+        </li>
+        <li>
+          <fieldset className="border-1 border-gray-300 rounded-md p-2" data-testid="translated-feedback-section">
+            <legend>Translated Feedback Form</legend>
+            <TranslatedFeedbackForm />
+          </fieldset>
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/instrumentation-client.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/instrumentation-client.ts
new file mode 100644
index 000000000000..794df516fc6e
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/instrumentation-client.ts
@@ -0,0 +1,20 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+  tunnel: `http://localhost:3031/`, // proxy server
+  tracesSampleRate: 1.0,
+  sendDefaultPii: true,
+  integrations: [
+    Sentry.replayIntegration(),
+    Sentry.feedbackIntegration({
+      colorScheme: 'system',
+      autoInject: false,
+    }),
+  ],
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 1.0,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/instrumentation.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/instrumentation.ts
new file mode 100644
index 000000000000..964f937c439a
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./sentry.server.config');
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('./sentry.edge.config');
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next-env.d.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next-env.d.ts
new file mode 100644
index 000000000000..9edff1c7cacb
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next.config.js b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next.config.js
new file mode 100644
index 000000000000..1098c2ce5a4f
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next.config.js
@@ -0,0 +1,8 @@
+const { withSentryConfig } = require('@sentry/nextjs');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = withSentryConfig(nextConfig, {
+  silent: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/package.json b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/package.json
new file mode 100644
index 000000000000..24101853350b
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "nextjs-16-userfeedback",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build > .tmp_build_stdout 2> .tmp_build_stderr || (cat .tmp_build_stdout && cat .tmp_build_stderr && exit 1)",
+    "clean": "npx rimraf node_modules pnpm-lock.yaml .tmp_dev_server_logs",
+    "test:prod": "TEST_ENV=production playwright test",
+    "test:dev": "TEST_ENV=development playwright test",
+    "test:build": "pnpm install && pnpm build",
+    "test:assert": "pnpm test:prod"
+  },
+  "dependencies": {
+    "@sentry/nextjs": "latest || *",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "next": "^16",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "~5.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "~1.56.0",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
+    "@tailwindcss/postcss": "^4",
+    "tailwindcss": "^4"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/playwright.config.mjs
new file mode 100644
index 000000000000..38548e975851
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/playwright.config.mjs
@@ -0,0 +1,25 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+  throw new Error('No test env defined');
+}
+
+const getStartCommand = () => {
+  if (testEnv === 'development') {
+    return 'pnpm next dev -p 3030 2>&1 | tee .tmp_dev_server_logs';
+  }
+
+  if (testEnv === 'production') {
+    return 'pnpm next start -p 3030';
+  }
+
+  throw new Error(`Unknown test env: ${testEnv}`);
+};
+
+const config = getPlaywrightConfig({
+  startCommand: getStartCommand(),
+  port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/postcss.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/postcss.config.mjs
new file mode 100644
index 000000000000..ba720fe55c46
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ['@tailwindcss/postcss'],
+};
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/sentry.edge.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/sentry.edge.config.ts
new file mode 100644
index 000000000000..1f1c7f5b0bcb
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/sentry.edge.config.ts
@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+  tunnel: `http://localhost:3031/`, // proxy server
+  tracesSampleRate: 1.0,
+  sendDefaultPii: true,
+  transportOptions: {
+    bufferSize: 1000,
+  },
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/sentry.server.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/sentry.server.config.ts
new file mode 100644
index 000000000000..1f1c7f5b0bcb
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/sentry.server.config.ts
@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+  tunnel: `http://localhost:3031/`, // proxy server
+  tracesSampleRate: 1.0,
+  sendDefaultPii: true,
+  transportOptions: {
+    bufferSize: 1000,
+  },
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/start-event-proxy.mjs
new file mode 100644
index 000000000000..c7aebbaee27a
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/start-event-proxy.mjs
@@ -0,0 +1,14 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+const packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json')));
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'nextjs-16-userfeedback',
+  envelopeDumpPath: path.join(
+    process.cwd(),
+    `event-dumps/nextjs-16-userfeedback-v${packageJson.dependencies.next}-${process.env.TEST_ENV}.dump`,
+  ),
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tests/feedback.test.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tests/feedback.test.ts
new file mode 100644
index 000000000000..0dc31e40ba61
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tests/feedback.test.ts
@@ -0,0 +1,216 @@
+import { expect, test } from '@playwright/test';
+import { waitForEnvelopeItem } from '@sentry-internal/test-utils';
+import type { FeedbackEvent } from '@sentry/core';
+
+test('FeedbackButton opens and submits feedback', async ({ page }) => {
+  const feedbackPromise = waitForEnvelopeItem('nextjs-16-userfeedback', envelopeItem => {
+    const [envelopeItemHeader] = envelopeItem;
+    return envelopeItemHeader.type === 'feedback';
+  });
+
+  await page.goto('/');
+  await page.getByTestId('feedback-button').click();
+
+  const feedbackDialog = page.locator('[data-sentry-feedback]');
+  await expect(feedbackDialog).toBeVisible({ timeout: 5000 });
+
+  await feedbackDialog.locator('[name="name"]').fill('Feedback Button User');
+  await feedbackDialog.locator('[name="email"]').fill('button@example.com');
+  await feedbackDialog.locator('[name="message"]').fill('Feedback from FeedbackButton');
+  await feedbackDialog.locator('.btn--primary').click();
+
+  const envelopeItem = await feedbackPromise;
+  const feedbackEvent = envelopeItem[1] as FeedbackEvent;
+
+  expect(feedbackEvent.contexts?.feedback).toMatchObject({
+    name: 'Feedback Button User',
+    contact_email: 'button@example.com',
+    message: 'Feedback from FeedbackButton',
+    source: 'widget',
+  });
+  expect(feedbackEvent.tags).toMatchObject({ component: 'FeedbackButton' });
+});
+
+test('createWidget adds and removes feedback trigger', async ({ page }) => {
+  await page.goto('/');
+
+  const toggleButton = page.getByTestId('toggle-feedback-button');
+  await expect(toggleButton).toHaveText('Create Widget');
+
+  await toggleButton.click();
+  await expect(toggleButton).toHaveText('Remove Widget', { timeout: 5000 });
+  await expect(page.locator('.widget__actor')).toBeVisible({ timeout: 5000 });
+
+  await toggleButton.click();
+  await expect(toggleButton).toHaveText('Create Widget', { timeout: 5000 });
+  await expect(page.locator('.widget__actor')).not.toBeVisible();
+});
+
+test('createWidget trigger opens feedback form and submits', async ({ page }) => {
+  const feedbackPromise = waitForEnvelopeItem('nextjs-16-userfeedback', envelopeItem => {
+    const [envelopeItemHeader] = envelopeItem;
+    return envelopeItemHeader.type === 'feedback';
+  });
+
+  await page.goto('/');
+  await page.getByTestId('toggle-feedback-button').click();
+  await expect(page.locator('.widget__actor')).toBeVisible({ timeout: 5000 });
+
+  await page.locator('.widget__actor').click();
+
+  const feedbackDialog = page.locator('[data-sentry-feedback]');
+  await expect(feedbackDialog).toBeVisible({ timeout: 5000 });
+
+  await feedbackDialog.locator('[name="name"]').fill('Widget User');
+  await feedbackDialog.locator('[name="email"]').fill('widget@example.com');
+  await feedbackDialog.locator('[name="message"]').fill('Feedback from widget trigger');
+  await feedbackDialog.locator('.btn--primary').click();
+
+  const envelopeItem = await feedbackPromise;
+  const feedbackEvent = envelopeItem[1] as FeedbackEvent;
+
+  expect(feedbackEvent.contexts?.feedback).toMatchObject({
+    name: 'Widget User',
+    contact_email: 'widget@example.com',
+    message: 'Feedback from widget trigger',
+    source: 'widget',
+  });
+  expect(feedbackEvent.tags).toMatchObject({ component: 'ToggleFeedbackButton' });
+});
+
+test('attachTo opens feedback dialog', async ({ page }) => {
+  await page.goto('/');
+  await page.getByTestId('attach-to-button').click();
+  await expect(page.locator('[data-sentry-feedback]')).toBeVisible({ timeout: 5000 });
+});
+
+test('createForm opens feedback dialog', async ({ page }) => {
+  await page.goto('/');
+  await page.getByTestId('create-form-button').click();
+  await expect(page.locator('[data-sentry-feedback]')).toBeVisible({ timeout: 5000 });
+});
+
+test('captureFeedback sends feedback envelope', async ({ page }) => {
+  const feedbackPromise = waitForEnvelopeItem('nextjs-16-userfeedback', envelopeItem => {
+    const [envelopeItemHeader] = envelopeItem;
+    return envelopeItemHeader.type === 'feedback';
+  });
+
+  await page.goto('/');
+
+  await page.getByTestId('my-form-name').fill('Custom Form User');
+  await page.getByTestId('my-form-email').fill('custom@example.com');
+  await page.getByTestId('my-form-message').fill('Feedback via captureFeedback API');
+  await page.getByTestId('my-form-submit').click();
+
+  const envelopeItem = await feedbackPromise;
+  const feedbackEvent = envelopeItem[1] as FeedbackEvent;
+
+  expect(feedbackEvent.contexts?.feedback).toMatchObject({
+    name: 'Custom Form User',
+    contact_email: 'custom@example.com',
+    message: 'Feedback via captureFeedback API',
+  });
+  expect(feedbackEvent.tags).toMatchObject({ component: 'MyFeedbackForm' });
+});
+
+test('ThumbsUp sends feedback with positive tag', async ({ page }) => {
+  const feedbackPromise = waitForEnvelopeItem('nextjs-16-userfeedback', envelopeItem => {
+    const [envelopeItemHeader] = envelopeItem;
+    return envelopeItemHeader.type === 'feedback';
+  });
+
+  await page.goto('/');
+  await page.getByTestId('thumbs-up-button').click();
+
+  const feedbackDialog = page.locator('[data-sentry-feedback]');
+  await expect(feedbackDialog).toBeVisible({ timeout: 5000 });
+
+  await feedbackDialog.locator('[name="name"]').fill('Happy User');
+  await feedbackDialog.locator('[name="email"]').fill('happy@example.com');
+  await feedbackDialog.locator('[name="message"]').fill('Great experience!');
+  await feedbackDialog.locator('.btn--primary').click();
+
+  const envelopeItem = await feedbackPromise;
+  const feedbackEvent = envelopeItem[1] as FeedbackEvent;
+
+  expect(feedbackEvent.contexts?.feedback).toMatchObject({
+    message: 'Great experience!',
+    source: 'widget',
+  });
+  expect(feedbackEvent.tags).toMatchObject({
+    component: 'ThumbsUpDownButtons',
+    'feedback.type': 'positive',
+  });
+});
+
+test('ThumbsDown sends feedback with negative tag', async ({ page }) => {
+  const feedbackPromise = waitForEnvelopeItem('nextjs-16-userfeedback', envelopeItem => {
+    const [envelopeItemHeader] = envelopeItem;
+    return envelopeItemHeader.type === 'feedback';
+  });
+
+  await page.goto('/');
+  await page.getByTestId('thumbs-down-button').click();
+
+  const feedbackDialog = page.locator('[data-sentry-feedback]');
+  await expect(feedbackDialog).toBeVisible({ timeout: 5000 });
+
+  await feedbackDialog.locator('[name="name"]').fill('Unhappy User');
+  await feedbackDialog.locator('[name="email"]').fill('unhappy@example.com');
+  await feedbackDialog.locator('[name="message"]').fill('Could be better');
+  await feedbackDialog.locator('.btn--primary').click();
+
+  const envelopeItem = await feedbackPromise;
+  const feedbackEvent = envelopeItem[1] as FeedbackEvent;
+
+  expect(feedbackEvent.contexts?.feedback).toMatchObject({
+    message: 'Could be better',
+    source: 'widget',
+  });
+  expect(feedbackEvent.tags).toMatchObject({
+    component: 'ThumbsUpDownButtons',
+    'feedback.type': 'negative',
+  });
+});
+
+test('createForm supports custom labels', async ({ page }) => {
+  await page.goto('/');
+  await page.getByTestId('translated-feedback-button').click();
+
+  const feedbackDialog = page.locator('[data-sentry-feedback]');
+  await expect(feedbackDialog).toBeVisible({ timeout: 5000 });
+
+  await expect(page.locator('#sentry-feedback .dialog__title')).toHaveText('Feedback Test Area');
+  await expect(page.locator('#sentry-feedback').getByPlaceholder('Tell me about it')).toBeVisible();
+  await expect(page.locator('#sentry-feedback').getByPlaceholder('you@example.com or (555) 555-5555')).toBeVisible();
+  await expect(page.locator('#sentry-feedback').getByPlaceholder('Name, nickname, etc.')).toBeVisible();
+});
+
+test('feedback dialog can be cancelled', async ({ page }) => {
+  await page.goto('/');
+  await page.getByTestId('feedback-button').click();
+
+  const feedbackDialog = page.locator('[data-sentry-feedback]');
+  await expect(feedbackDialog).toBeVisible({ timeout: 5000 });
+
+  await feedbackDialog.getByRole('button', { name: 'Cancel' }).click();
+  await expect(feedbackDialog).not.toBeVisible({ timeout: 5000 });
+});
+
+test('crash report button triggers error for user feedback modal', async ({ page }) => {
+  const errorPromise = waitForEnvelopeItem('nextjs-16-userfeedback', envelopeItem => {
+    const [envelopeItemHeader, envelopeItemBody] = envelopeItem;
+    if (envelopeItemHeader.type !== 'event') return false;
+    const event = envelopeItemBody as { exception?: { values?: Array<{ value?: string }> } };
+    return event.exception?.values?.[0]?.value === 'Crash Report Button Clicked';
+  });
+
+  await page.goto('/');
+  await page.getByTestId('crash-report-button').click();
+
+  const envelopeItem = await errorPromise;
+  const errorEvent = envelopeItem[1] as { exception?: { values?: Array<{ value?: string }> } };
+
+  expect(errorEvent.exception?.values?.[0]?.value).toBe('Crash Report Button Clicked');
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tsconfig.json b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tsconfig.json
new file mode 100644
index 000000000000..96e41888b3cf
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "next.config.js",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "playwright.config.ts"
+  ]
+}

From d85f0865a4bdff96697386f3e27b57e958a1bda2 Mon Sep 17 00:00:00 2001
From: Charly Gomez <charly.gomez@sentry.io>
Date: Mon, 19 Jan 2026 11:36:13 +0100
Subject: [PATCH 2/2] fix: formatting issues in test application

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../app/examples/attachToFeedbackButton.tsx           |  7 ++++++-
 .../nextjs-16-userfeedback/next-env.d.ts              |  2 +-
 .../nextjs-16-userfeedback/tsconfig.json              | 11 ++---------
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/attachToFeedbackButton.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/attachToFeedbackButton.tsx
index 4dbfaec7dbc5..3511e5f73e0f 100644
--- a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/attachToFeedbackButton.tsx
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/app/examples/attachToFeedbackButton.tsx
@@ -25,7 +25,12 @@ export default function AttachToFeedbackButton() {
   }, [feedback]);
 
   return (
-    <button className="hover:bg-hover px-4 py-2 rounded-md" type="button" ref={buttonRef} data-testid="attach-to-button">
+    <button
+      className="hover:bg-hover px-4 py-2 rounded-md"
+      type="button"
+      ref={buttonRef}
+      data-testid="attach-to-button"
+    >
       Give me feedback (attachTo)
     </button>
   );
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next-env.d.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next-env.d.ts
index 9edff1c7cacb..1511519d3892 100644
--- a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next-env.d.ts
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import './.next/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tsconfig.json b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tsconfig.json
index 96e41888b3cf..ea03f70f8efb 100644
--- a/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tsconfig.json
+++ b/dev-packages/e2e-tests/test-applications/nextjs-16-userfeedback/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -31,8 +27,5 @@
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules",
-    "playwright.config.ts"
-  ]
+  "exclude": ["node_modules", "playwright.config.ts"]
 }