test(e2e): Add nuxt-4-static app to keep static trace lifecycle coverage (#23952)

Reference #23804

This is a verbatim copy of the nuxt-4 app that stays pinned to
`traceLifecycle: 'static'` and keeps the transaction-based specs. With
the Nuxt/Nitro apps migrating to span streaming, this copy keeps the
static trace lifecycle covered by one representative app. Only the app
name changed: `package.json` name, the event proxy server name, the
`waitFor*` calls in the specs, and the CI variant labels. The e2e matrix
discovers apps by directory, so no CI config change is needed.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: s1gr1d

dev-packages/e2e-tests/test-applications/nuxt-4-static/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

dev-packages/e2e-tests/test-applications/nuxt-4-static/app/components/ErrorButton.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  errorText: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+});
+
+const triggerError = () => {
+  throw new Error(props.errorText);
+};
+</script>
+
+<template>
+  <button :id="props.id" @click="triggerError">Trigger Error</button>
+</template>

dev-packages/e2e-tests/test-applications/nuxt-4-static/app/composables/use-sentry-test-tag.ts

@@ -0,0 +1,8 @@
+// fixme: this needs to be imported from @sentry/core, not @sentry/nuxt in dev mode (because of import-in-the-middle error)
+// This could also be a problem with the specific setup of the pnpm E2E test setup, because this could not be reproduced outside of the E2E test.
+// Related to this: https://github.com/getsentry/sentry-javascript/issues/15204#issuecomment-2948908130
+import { setTag } from '@sentry/nuxt';
+
+export default function useSentryTestTag(): void {
+  setTag('test-tag', null);
+}

dev-packages/e2e-tests/test-applications/nuxt-4-static/app/pages/client-error.vue

@@ -0,0 +1,16 @@
+<script setup>
+import ErrorButton from '../components/ErrorButton.vue';
+
+const catchErr = () => {
+  console.log('Additional functionality in NuxtErrorBoundary');
+};
+</script>
+
+<template>
+  <ErrorButton id="errorBtn" error-text="Error thrown from Nuxt-4 E2E test app" />
+  <ErrorButton id="errorBtn2" error-text="Another Error thrown from Nuxt-4 E2E test app" />
+
+  <NuxtErrorBoundary @error="catchErr">
+    <ErrorButton id="error-in-error-boundary" error-text="Error thrown in Error Boundary" />
+  </NuxtErrorBoundary>
+</template>

dev-packages/e2e-tests/test-applications/nuxt-4-static/app/pages/fetch-server-routes.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <button @click="fetchError">Fetch Server API Error</button>
+    <button @click="fetchNitroFetch">Fetch Nitro $fetch</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFetch } from '#imports';
+
+const fetchError = async () => {
+  await useFetch('/api/server-error');
+};
+
+const fetchNitroFetch = async () => {
+  await useFetch('/api/nitro-fetch');
+};
+</script>

dev-packages/e2e-tests/test-applications/nuxt-4-static/app/pages/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <NuxtLayout>
+    <header>
+      <nav>
+        <ul>
+          <li><NuxtLink to="/fetch-server-routes">Fetch Server Routes</NuxtLink></li>
+          <li><NuxtLink to="/test-param/1234">Fetch Param</NuxtLink></li>
+          <li><NuxtLink to="/client-error">Client Error</NuxtLink></li>
+        </ul>
+      </nav>
+    </header>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+import { useSentryTestTag } from '#imports';
+
+useSentryTestTag();
+</script>

dev-packages/e2e-tests/test-applications/nuxt-4-static/app/pages/pinia-cart.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from '#imports';
+import { useCartStore } from '~~/stores/cart';
+
+const cart = useCartStore();
+
+const itemName = ref('');
+
+function addItemToCart() {
+  if (!itemName.value) return;
+  cart.addItem(itemName.value);
+  itemName.value = '';
+}
+
+function throwError() {
+  throw new Error('This is an error');
+}
+
+function clearCart() {
+  if (window.confirm('Are you sure you want to clear the cart?')) {
+    cart.rawItems = [];
+  }
+}
+</script>
+
+<template>
+  <Layout>
+    <div>
+      <div style="margin: 1rem 0">
+        <PiniaLogo />
+      </div>
+
+      <form @submit.prevent="addItemToCart" data-testid="add-items">
+        <input id="item-input" type="text" v-model="itemName" />
+        <button id="item-add">Add</button>
+        <button id="throw-error" @click="throwError">Throw error</button>
+      </form>
+
+      <form>
+        <ul data-testid="items">
+          <li v-for="item in cart.items" :key="item.name">
+            {{ item.name }} ({{ item.amount }})
+            <button @click="cart.removeItem(item.name)" type="button">X</button>
+          </li>
+        </ul>
+
+        <button :disabled="!cart.items.length" @click="clearCart" type="button" data-testid="clear">
+          Clear the cart
+        </button>
+      </form>
+    </div>
+  </Layout>
+</template>
+
+<style scoped>
+img {
+  width: 200px;
+}
+
+button,
+input {
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+</style>

dev-packages/e2e-tests/test-applications/nuxt-4-static/app/pages/rendering-modes/client-side-only-page.vue

@@ -0,0 +1 @@
+<template><p>Client Side Only Page</p></template>

dev-packages/e2e-tests/test-applications/nuxt-4-static/app/pages/rendering-modes/isr-1h-cached-page.vue

@@ -0,0 +1 @@
+<template><p>ISR 1h Cached Page</p></template>

dev-packages/e2e-tests/test-applications/nuxt-4-static/app/pages/rendering-modes/isr-cached-page.vue

@@ -0,0 +1 @@
+<template><p>ISR Cached Page</p></template>