@sentry/wizard 5.1.0 → 5.2.0

package/dist/src/nuxt/templates.js

@@ -113,7 +113,13 @@ Feel free to delete this file.
 
 <script setup>
   import * as Sentry from '@sentry/nuxt';
-  import { useFetch} from '#imports'
+
+  class SentryExampleFrontendError extends Error {
+    constructor(message) {
+      super(message);
+      this.name = "SentryExampleFrontendError";
+    }
+  }
 
   const hasSentError = ref(false);
   const isConnected = ref(true);
@@ -127,20 +133,23 @@ Feel free to delete this file.
     }
   });
   
-  function getSentryData() {
-    Sentry.startSpan(
+  async function getSentryData() {
+    await Sentry.startSpan(
       {
         name: 'Example Frontend Span',
         op: 'test'
       },
       async () => {
-        const { error } = await useFetch('/api/sentry-example-api');
-        if (error.value) {
+        const res = await $fetch('/api/sentry-example-api', { 
+          method: 'GET',
+          ignoreResponseError: true 
+        }).catch(() => null);
+        if (!res) {
           hasSentError.value = true;
-          throw new Error('Sentry Example Frontend Error');
         }
       }
-    )
+    );
+    throw new SentryExampleFrontendError("This error is raised on the frontend of the example page.");
   }
 </script>
 
@@ -157,13 +166,14 @@ Feel free to delete this file.
       </h1>
 
       <p class="description">
-        Click the button below, and view the sample error on the Sentry <a target="_blank" href="${issuesPageLink}">Issues Page</a>. 
+        Click the button below, and view the sample error on the Sentry <a target="_blank" href="${issuesPageLink}">Issues Page</a>.
         For more details about setting up Sentry, <a target="_blank" href="https://docs.sentry.io/platforms/javascript/guides/nuxt/">read our docs</a>.
       </p>
 
       <button
         type="button"
         @click="getSentryData"
+        :disabled="!isConnected"
       >
         <span>
           Throw Sample Error
@@ -174,14 +184,11 @@ Feel free to delete this file.
         Sample error was sent to Sentry.
       </p>
       <div v-else-if="!isConnected" class="connectivity-error">
-        <p>The Sentry SDK is not able to reach Sentry right now - this may be due to an adblocker. For more information, see <a target="_blank" href="https://docs.sentry.io/platforms/javascript/guides/nuxt/troubleshooting/#the-sdk-is-not-sending-any-data">the troubleshooting guide</a>.</p>
+        <p>It looks like network requests to Sentry are being blocked, which will prevent errors from being captured. Try disabling your ad-blocker to complete the test.</p>
       </div>
       <div v-else class="success_placeholder" />
 
       <div class="flex-spacer" />
-      <p class="description">
-        Adblockers will prevent errors from being sent to Sentry.
-      </p>
     </main>
   </div>
 </template>
@@ -261,6 +268,16 @@ Feel free to delete this file.
     &:active > span {
       transform: translateY(0); 
     }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+
+      & > span {
+        transform: translateY(0);
+        border: none;
+      }
+    }
   }
 
   .description {

package/dist/src/nuxt/templates.js.map

@@ -1 +1 @@
-{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../../src/nuxt/templates.ts"],"names":[],"mappings":"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","sourcesContent":["import { getIssueStreamUrl } from '../utils/url';\n\ntype SelectedSentryFeatures = {\n  performance: boolean;\n  replay: boolean;\n};\n\nexport function getDefaultNuxtConfig(): string {\n  return `// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n  compatibilityDate: '2024-04-03',\n  devtools: { enabled: true }\n})\n`;\n}\n\nexport function getNuxtModuleFallbackTemplate(\n  options: {\n    org: string;\n    project: string;\n    url: string;\n    selfHosted: boolean;\n  },\n  shouldTopLevelImport: boolean,\n): string {\n  return `  modules: [\"@sentry/nuxt/module\"],\n  sentry: {\n    sourceMapsUploadOptions: {\n      org: \"${options.org}\",\n      project: \"${options.project}\",${\n    options.selfHosted ? `\\n      url: \"${options.url}\",` : ''\n  }\n    },${\n      shouldTopLevelImport\n        ? `\\n    autoInjectServerSentry: \"top-level-import\",`\n        : ''\n    }\n  },\n  sourcemap: { client: \"hidden\" },`;\n}\n\nexport function getSentryConfigContents(\n  dsn: string,\n  config: 'client' | 'server',\n  selectedFeatures: SelectedSentryFeatures,\n): string {\n  if (config === 'client') {\n    return getSentryClientConfigContents(dsn, selectedFeatures);\n  }\n\n  return getSentryServerConfigContents(dsn, selectedFeatures);\n}\n\nconst featuresConfigMap: Record<keyof SelectedSentryFeatures, string> = {\n  performance: [\n    '  // We recommend adjusting this value in production, or using tracesSampler',\n    '  // for finer control',\n    '  tracesSampleRate: 1.0,',\n  ].join('\\n'),\n  replay: [\n    '  // This sets the sample rate to be 10%. You may want this to be 100% while',\n    '  // in development and sample at a lower rate in production',\n    '  replaysSessionSampleRate: 0.1,',\n    '  ',\n    '  // If the entire session is not sampled, use the below sample rate to sample',\n    '  // sessions when an error occurs.',\n    '  replaysOnErrorSampleRate: 1.0,',\n    '  ',\n    \"  // If you don't want to use Session Replay, just remove the line below:\",\n    '  integrations: [Sentry.replayIntegration()],',\n  ].join('\\n'),\n};\n\nconst featuresMap: Record<\n  'client' | 'server',\n  Array<keyof SelectedSentryFeatures>\n> = {\n  client: ['performance', 'replay'],\n  server: ['performance'],\n};\n\nexport function getConfigBody(\n  dsn: string,\n  variant: 'client' | 'server',\n  selectedFeatures: SelectedSentryFeatures,\n) {\n  return [\n    `dsn: \"${dsn}\",`,\n    Object.entries(selectedFeatures)\n      .map(([feature, activated]: [keyof SelectedSentryFeatures, boolean]) => {\n        return featuresMap[variant].includes(feature) && activated\n          ? featuresConfigMap[feature]\n          : null;\n      })\n      .filter(Boolean)\n      .join('\\n\\n'),\n  ]\n    .filter(Boolean)\n    .join('\\n\\n');\n}\n\nfunction getSentryClientConfigContents(\n  dsn: string,\n  selectedFeatures: SelectedSentryFeatures,\n): string {\n  return `import * as Sentry from \"@sentry/nuxt\";\n\nSentry.init({\n  // If set up, you can use your runtime config here\n  // dsn: useRuntimeConfig().public.sentry.dsn,\n  ${getConfigBody(dsn, 'client', selectedFeatures)}\n  \n  // Setting this option to true will print useful information to the console while you're setting up Sentry.\n  debug: false,\n});\n`;\n}\n\nfunction getSentryServerConfigContents(\n  dsn: string,\n  selectedFeatures: SelectedSentryFeatures,\n): string {\n  return `import * as Sentry from \"@sentry/nuxt\";\n \nSentry.init({\n  ${getConfigBody(dsn, 'server', selectedFeatures)}\n  \n  // Setting this option to true will print useful information to the console while you're setting up Sentry.\n  debug: false,\n});\n`;\n}\n\nexport function getIndexRouteTemplate(): string {\n  return `<!--\nThis is just to verify the sentry-example-page.\nFeel free to delete this file.\n-->\n\n<template></template>`;\n}\n\nexport function getSentryExamplePageTemplate(options: {\n  url: string;\n  org: string;\n  projectId: string;\n}): string {\n  const { url, org, projectId } = options;\n  const issuesPageLink = getIssueStreamUrl({ url, orgSlug: org, projectId });\n\n  return `<!--\nThis is just a very simple page with a button to throw an example error.\nFeel free to delete this file.\n-->\n\n<script setup>\n  import * as Sentry from '@sentry/nuxt';\n  import { useFetch} from '#imports'\n\n  const hasSentError = ref(false);\n  const isConnected = ref(true);\n  \n  onMounted(async () => {\n    try {\n      const result = await Sentry.diagnoseSdkConnectivity();\n      isConnected.value = result !== 'sentry-unreachable';\n    } catch (error) {\n      isConnected.value = false;\n    }\n  });\n  \n  function getSentryData() {\n    Sentry.startSpan(\n      {\n        name: 'Example Frontend Span',\n        op: 'test'\n      },\n      async () => {\n        const { error } = await useFetch('/api/sentry-example-api');\n        if (error.value) {\n          hasSentError.value = true;\n          throw new Error('Sentry Example Frontend Error');\n        }\n      }\n    )\n  }\n</script>\n\n<template>\n  <title>Sentry Onboarding</title>\n  <div>\n    <main>\n      <div class=\"flex-spacer\" />\n      <svg height=\"40\" width=\"40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z\" fill=\"currentcolor\"/>\n      </svg>\n      <h1>\n        sentry-example-page\n      </h1>\n\n      <p class=\"description\">\n        Click the button below, and view the sample error on the Sentry <a target=\"_blank\" href=\"${issuesPageLink}\">Issues Page</a>. \n        For more details about setting up Sentry, <a target=\"_blank\" href=\"https://docs.sentry.io/platforms/javascript/guides/nuxt/\">read our docs</a>.\n      </p>\n\n      <button\n        type=\"button\"\n        @click=\"getSentryData\"\n      >\n        <span>\n          Throw Sample Error\n        </span>\n      </button>\n\n      <p v-if=\"hasSentError\" class=\"success\">\n        Sample error was sent to Sentry.\n      </p>\n      <div v-else-if=\"!isConnected\" class=\"connectivity-error\">\n        <p>The Sentry SDK is not able to reach Sentry right now - this may be due to an adblocker. For more information, see <a target=\"_blank\" href=\"https://docs.sentry.io/platforms/javascript/guides/nuxt/troubleshooting/#the-sdk-is-not-sending-any-data\">the troubleshooting guide</a>.</p>\n      </div>\n      <div v-else class=\"success_placeholder\" />\n\n      <div class=\"flex-spacer\" />\n      <p class=\"description\">\n        Adblockers will prevent errors from being sent to Sentry.\n      </p>\n    </main>\n  </div>\n</template>\n\n<style scoped>\n  :global(body) {\n    margin: 0;\n\n    @media (prefers-color-scheme: dark) {\n      color: #ededed;\n      background-color: #0a0a0a;\n    }\n  }\n\n  main {\n    display: flex;\n    min-height: 100vh;\n    box-sizing: border-box;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n  }\n\n  h1 {\n    padding: 0px 4px;\n    margin: 0;\n    border-radius: 4px;\n    background-color: rgba(24, 20, 35, 0.03);\n    font-family: monospace;\n    font-size: 20px;\n    line-height: 1.2;\n  }\n\n  p {\n    margin: 0;\n    font-size: 20px;\n  }\n\n  a {\n    color: #6341F0;\n    text-decoration: underline;\n    cursor: pointer;\n\n    @media (prefers-color-scheme: dark) {\n      color: #B3A1FF;\n    }\n  }\n\n  button {\n    border-radius: 8px;\n    color: white;\n    cursor: pointer;\n    background-color: #553DB8;\n    border: none;\n    padding: 0;\n    margin-top: 4px;\n\n    & > span {\n      display: inline-block;\n      padding: 12px 16px;\n      border-radius: inherit;\n      font-size: 20px;\n      font-weight: bold;\n      line-height: 1;\n      background-color: #7553FF;\n      border: 1px solid #553DB8;\n      transform: translateY(-4px);\n    }\n\n    &:hover > span {\n      transform: translateY(-8px);\n    }\n\n    &:active > span {\n      transform: translateY(0); \n    }\n  }\n\n  .description {\n    text-align: center;\n    color: #6E6C75;\n    max-width: 500px;\n    line-height: 1.5;\n    font-size: 20px;\n\n    @media (prefers-color-scheme: dark) {\n      color: #A49FB5;\n    }\n  }\n\n  .flex-spacer {\n    flex: 1;\n  }\n\n  .success {\n    padding: 12px 16px;\n    border-radius: 8px;\n    font-size: 20px;\n    line-height: 1;\n    background-color: #00F261;\n    border: 1px solid #00BF4D;\n    color: #181423;\n  }\n\n  .success_placeholder {\n    height: 46px;\n  }\n  \n  .connectivity-error {\n    padding: 12px 16px;\n    background-color: #E50045;\n    border-radius: 8px;\n    width: 500px;\n    color: #FFFFFF;\n    border: 1px solid #A80033;\n    text-align: center;\n    margin: 0;\n  }\n  \n  .connectivity-error a {\n    color: #FFFFFF;\n    text-decoration: underline;\n  }\n</style>\n\n`;\n}\n\nexport function getSentryExampleApiTemplate() {\n  return `// This is just a very simple API route that throws an example error.\n// Feel free to delete this file.\nimport { defineEventHandler } from '#imports';\n\nexport default defineEventHandler(() => {\n  throw new Error(\"Sentry Example API Route Error\");\n});\n`;\n}\n\nexport function getSentryErrorButtonTemplate() {\n  return `<!--\nThis is just a very simple component that throws an example error.\nFeel free to delete this file.\n-->\n\n<script setup>\n  import * as Sentry from '@sentry/nuxt';\n\n  const hasSentError = ref(false);\n  \n  const throwError = () => {\n    Sentry.startSpan(\n      {\n        name: 'Example Frontend Span',\n        op: 'test'\n      },\n      () => {\n        hasSentError.value = true;\n        throw new Error('Sentry Example Error');\n      }\n    )\n  };\n</script>\n\n<template>\n  <div v-if=\"hasSentError\" class=\"success\">\n    Sample error was sent to Sentry.\n  </div>\n  <button v-else @click=\"throwError\">\n    <span>Throw Sample Error</span>\n  </button>\n</template>\n\n<style scoped>\n  button {\n    border-radius: 8px;\n    color: white;\n    cursor: pointer;\n    background-color: #553DB8;\n    border: none;\n    padding: 0;\n    margin-top: 4px;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n\n    & > span {\n      display: inline-block;\n      padding: 12px 16px;\n      border-radius: inherit;\n      font-size: 20px;\n      font-weight: bold;\n      line-height: 1;\n      background-color: #7553FF;\n      border: 1px solid #553DB8;\n      transform: translateY(-4px);\n    }\n\n    &:hover > span {\n      transform: translateY(-8px);\n    }\n\n    &:active > span {\n      transform: translateY(0);\n    }\n  }\n\n  .success {\n    width: max-content;\n    padding: 12px 16px;\n    border-radius: 8px;\n    font-size: 20px;\n    line-height: 1;\n    background-color: #00F261;\n    border: 1px solid #00BF4D;\n    color: #181423;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n  }\n</style>\n`;\n}\n"]}
+{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../../src/nuxt/templates.ts"],"names":[],"mappings":"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","sourcesContent":["import { getIssueStreamUrl } from '../utils/url';\n\ntype SelectedSentryFeatures = {\n  performance: boolean;\n  replay: boolean;\n};\n\nexport function getDefaultNuxtConfig(): string {\n  return `// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n  compatibilityDate: '2024-04-03',\n  devtools: { enabled: true }\n})\n`;\n}\n\nexport function getNuxtModuleFallbackTemplate(\n  options: {\n    org: string;\n    project: string;\n    url: string;\n    selfHosted: boolean;\n  },\n  shouldTopLevelImport: boolean,\n): string {\n  return `  modules: [\"@sentry/nuxt/module\"],\n  sentry: {\n    sourceMapsUploadOptions: {\n      org: \"${options.org}\",\n      project: \"${options.project}\",${\n    options.selfHosted ? `\\n      url: \"${options.url}\",` : ''\n  }\n    },${\n      shouldTopLevelImport\n        ? `\\n    autoInjectServerSentry: \"top-level-import\",`\n        : ''\n    }\n  },\n  sourcemap: { client: \"hidden\" },`;\n}\n\nexport function getSentryConfigContents(\n  dsn: string,\n  config: 'client' | 'server',\n  selectedFeatures: SelectedSentryFeatures,\n): string {\n  if (config === 'client') {\n    return getSentryClientConfigContents(dsn, selectedFeatures);\n  }\n\n  return getSentryServerConfigContents(dsn, selectedFeatures);\n}\n\nconst featuresConfigMap: Record<keyof SelectedSentryFeatures, string> = {\n  performance: [\n    '  // We recommend adjusting this value in production, or using tracesSampler',\n    '  // for finer control',\n    '  tracesSampleRate: 1.0,',\n  ].join('\\n'),\n  replay: [\n    '  // This sets the sample rate to be 10%. You may want this to be 100% while',\n    '  // in development and sample at a lower rate in production',\n    '  replaysSessionSampleRate: 0.1,',\n    '  ',\n    '  // If the entire session is not sampled, use the below sample rate to sample',\n    '  // sessions when an error occurs.',\n    '  replaysOnErrorSampleRate: 1.0,',\n    '  ',\n    \"  // If you don't want to use Session Replay, just remove the line below:\",\n    '  integrations: [Sentry.replayIntegration()],',\n  ].join('\\n'),\n};\n\nconst featuresMap: Record<\n  'client' | 'server',\n  Array<keyof SelectedSentryFeatures>\n> = {\n  client: ['performance', 'replay'],\n  server: ['performance'],\n};\n\nexport function getConfigBody(\n  dsn: string,\n  variant: 'client' | 'server',\n  selectedFeatures: SelectedSentryFeatures,\n) {\n  return [\n    `dsn: \"${dsn}\",`,\n    Object.entries(selectedFeatures)\n      .map(([feature, activated]: [keyof SelectedSentryFeatures, boolean]) => {\n        return featuresMap[variant].includes(feature) && activated\n          ? featuresConfigMap[feature]\n          : null;\n      })\n      .filter(Boolean)\n      .join('\\n\\n'),\n  ]\n    .filter(Boolean)\n    .join('\\n\\n');\n}\n\nfunction getSentryClientConfigContents(\n  dsn: string,\n  selectedFeatures: SelectedSentryFeatures,\n): string {\n  return `import * as Sentry from \"@sentry/nuxt\";\n\nSentry.init({\n  // If set up, you can use your runtime config here\n  // dsn: useRuntimeConfig().public.sentry.dsn,\n  ${getConfigBody(dsn, 'client', selectedFeatures)}\n  \n  // Setting this option to true will print useful information to the console while you're setting up Sentry.\n  debug: false,\n});\n`;\n}\n\nfunction getSentryServerConfigContents(\n  dsn: string,\n  selectedFeatures: SelectedSentryFeatures,\n): string {\n  return `import * as Sentry from \"@sentry/nuxt\";\n \nSentry.init({\n  ${getConfigBody(dsn, 'server', selectedFeatures)}\n  \n  // Setting this option to true will print useful information to the console while you're setting up Sentry.\n  debug: false,\n});\n`;\n}\n\nexport function getIndexRouteTemplate(): string {\n  return `<!--\nThis is just to verify the sentry-example-page.\nFeel free to delete this file.\n-->\n\n<template></template>`;\n}\n\nexport function getSentryExamplePageTemplate(options: {\n  url: string;\n  org: string;\n  projectId: string;\n}): string {\n  const { url, org, projectId } = options;\n  const issuesPageLink = getIssueStreamUrl({ url, orgSlug: org, projectId });\n\n  return `<!--\nThis is just a very simple page with a button to throw an example error.\nFeel free to delete this file.\n-->\n\n<script setup>\n  import * as Sentry from '@sentry/nuxt';\n\n  class SentryExampleFrontendError extends Error {\n    constructor(message) {\n      super(message);\n      this.name = \"SentryExampleFrontendError\";\n    }\n  }\n\n  const hasSentError = ref(false);\n  const isConnected = ref(true);\n  \n  onMounted(async () => {\n    try {\n      const result = await Sentry.diagnoseSdkConnectivity();\n      isConnected.value = result !== 'sentry-unreachable';\n    } catch (error) {\n      isConnected.value = false;\n    }\n  });\n  \n  async function getSentryData() {\n    await Sentry.startSpan(\n      {\n        name: 'Example Frontend Span',\n        op: 'test'\n      },\n      async () => {\n        const res = await $fetch('/api/sentry-example-api', { \n          method: 'GET',\n          ignoreResponseError: true \n        }).catch(() => null);\n        if (!res) {\n          hasSentError.value = true;\n        }\n      }\n    );\n    throw new SentryExampleFrontendError(\"This error is raised on the frontend of the example page.\");\n  }\n</script>\n\n<template>\n  <title>Sentry Onboarding</title>\n  <div>\n    <main>\n      <div class=\"flex-spacer\" />\n      <svg height=\"40\" width=\"40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z\" fill=\"currentcolor\"/>\n      </svg>\n      <h1>\n        sentry-example-page\n      </h1>\n\n      <p class=\"description\">\n        Click the button below, and view the sample error on the Sentry <a target=\"_blank\" href=\"${issuesPageLink}\">Issues Page</a>.\n        For more details about setting up Sentry, <a target=\"_blank\" href=\"https://docs.sentry.io/platforms/javascript/guides/nuxt/\">read our docs</a>.\n      </p>\n\n      <button\n        type=\"button\"\n        @click=\"getSentryData\"\n        :disabled=\"!isConnected\"\n      >\n        <span>\n          Throw Sample Error\n        </span>\n      </button>\n\n      <p v-if=\"hasSentError\" class=\"success\">\n        Sample error was sent to Sentry.\n      </p>\n      <div v-else-if=\"!isConnected\" class=\"connectivity-error\">\n        <p>It looks like network requests to Sentry are being blocked, which will prevent errors from being captured. Try disabling your ad-blocker to complete the test.</p>\n      </div>\n      <div v-else class=\"success_placeholder\" />\n\n      <div class=\"flex-spacer\" />\n    </main>\n  </div>\n</template>\n\n<style scoped>\n  :global(body) {\n    margin: 0;\n\n    @media (prefers-color-scheme: dark) {\n      color: #ededed;\n      background-color: #0a0a0a;\n    }\n  }\n\n  main {\n    display: flex;\n    min-height: 100vh;\n    box-sizing: border-box;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n  }\n\n  h1 {\n    padding: 0px 4px;\n    margin: 0;\n    border-radius: 4px;\n    background-color: rgba(24, 20, 35, 0.03);\n    font-family: monospace;\n    font-size: 20px;\n    line-height: 1.2;\n  }\n\n  p {\n    margin: 0;\n    font-size: 20px;\n  }\n\n  a {\n    color: #6341F0;\n    text-decoration: underline;\n    cursor: pointer;\n\n    @media (prefers-color-scheme: dark) {\n      color: #B3A1FF;\n    }\n  }\n\n  button {\n    border-radius: 8px;\n    color: white;\n    cursor: pointer;\n    background-color: #553DB8;\n    border: none;\n    padding: 0;\n    margin-top: 4px;\n\n    & > span {\n      display: inline-block;\n      padding: 12px 16px;\n      border-radius: inherit;\n      font-size: 20px;\n      font-weight: bold;\n      line-height: 1;\n      background-color: #7553FF;\n      border: 1px solid #553DB8;\n      transform: translateY(-4px);\n    }\n\n    &:hover > span {\n      transform: translateY(-8px);\n    }\n\n    &:active > span {\n      transform: translateY(0); \n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.6;\n\n      & > span {\n        transform: translateY(0);\n        border: none;\n      }\n    }\n  }\n\n  .description {\n    text-align: center;\n    color: #6E6C75;\n    max-width: 500px;\n    line-height: 1.5;\n    font-size: 20px;\n\n    @media (prefers-color-scheme: dark) {\n      color: #A49FB5;\n    }\n  }\n\n  .flex-spacer {\n    flex: 1;\n  }\n\n  .success {\n    padding: 12px 16px;\n    border-radius: 8px;\n    font-size: 20px;\n    line-height: 1;\n    background-color: #00F261;\n    border: 1px solid #00BF4D;\n    color: #181423;\n  }\n\n  .success_placeholder {\n    height: 46px;\n  }\n  \n  .connectivity-error {\n    padding: 12px 16px;\n    background-color: #E50045;\n    border-radius: 8px;\n    width: 500px;\n    color: #FFFFFF;\n    border: 1px solid #A80033;\n    text-align: center;\n    margin: 0;\n  }\n  \n  .connectivity-error a {\n    color: #FFFFFF;\n    text-decoration: underline;\n  }\n</style>\n\n`;\n}\n\nexport function getSentryExampleApiTemplate() {\n  return `// This is just a very simple API route that throws an example error.\n// Feel free to delete this file.\nimport { defineEventHandler } from '#imports';\n\nexport default defineEventHandler(() => {\n  throw new Error(\"Sentry Example API Route Error\");\n});\n`;\n}\n\nexport function getSentryErrorButtonTemplate() {\n  return `<!--\nThis is just a very simple component that throws an example error.\nFeel free to delete this file.\n-->\n\n<script setup>\n  import * as Sentry from '@sentry/nuxt';\n\n  const hasSentError = ref(false);\n  \n  const throwError = () => {\n    Sentry.startSpan(\n      {\n        name: 'Example Frontend Span',\n        op: 'test'\n      },\n      () => {\n        hasSentError.value = true;\n        throw new Error('Sentry Example Error');\n      }\n    )\n  };\n</script>\n\n<template>\n  <div v-if=\"hasSentError\" class=\"success\">\n    Sample error was sent to Sentry.\n  </div>\n  <button v-else @click=\"throwError\">\n    <span>Throw Sample Error</span>\n  </button>\n</template>\n\n<style scoped>\n  button {\n    border-radius: 8px;\n    color: white;\n    cursor: pointer;\n    background-color: #553DB8;\n    border: none;\n    padding: 0;\n    margin-top: 4px;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n\n    & > span {\n      display: inline-block;\n      padding: 12px 16px;\n      border-radius: inherit;\n      font-size: 20px;\n      font-weight: bold;\n      line-height: 1;\n      background-color: #7553FF;\n      border: 1px solid #553DB8;\n      transform: translateY(-4px);\n    }\n\n    &:hover > span {\n      transform: translateY(-8px);\n    }\n\n    &:active > span {\n      transform: translateY(0);\n    }\n  }\n\n  .success {\n    width: max-content;\n    padding: 12px 16px;\n    border-radius: 8px;\n    font-size: 20px;\n    line-height: 1;\n    background-color: #00F261;\n    border: 1px solid #00BF4D;\n    color: #181423;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n  }\n</style>\n`;\n}\n"]}

package/dist/src/remix/sdk-example.js

@@ -55,6 +55,13 @@ function getSentryExamplePageContents(options) {
     return `import * as Sentry from "@sentry/remix";
 import { useState, useEffect } from "react";
 
+class SentryExampleFrontendError extends Error {
+  constructor(message${options.isTS ? ': string | undefined' : ''}) {
+    super(message);
+    this.name = "SentryExampleFrontendError";
+  }
+}
+
 export const meta = () => {
   return [
     { title: "sentry-example-page" },
@@ -99,10 +106,11 @@ export default function SentryExamplePage() {
               const res = await fetch("/api/sentry-example-api");
               if (!res.ok) {
                 setHasSentError(true);
-                throw new Error("Sentry Example Frontend Error");
               }
             });
+            throw new SentryExampleFrontendError("This error is raised on the frontend of the example page.");
           }}
+          disabled={!isConnected}
         >
           <span>
             Throw Sample Error
@@ -115,16 +123,13 @@ export default function SentryExamplePage() {
           </p>
         ) : !isConnected ? (
           <div className="connectivity-error">
-            <p>The Sentry SDK is not able to reach Sentry right now - this may be due to an adblocker. For more information, see <a target="_blank" rel="noreferrer" href="https://docs.sentry.io/platforms/javascript/guides/remix/troubleshooting/#the-sdk-is-not-sending-any-data">the troubleshooting guide</a>.</p>
+            <p>It looks like network requests to Sentry are being blocked, which will prevent errors from being captured. Try disabling your ad-blocker to complete the test.</p>
           </div>
         ) : (
           <div className="success_placeholder" />
         )}
 
         <div className="flex-spacer" />
-        <p className="description">
-          Adblockers will prevent errors from being sent to Sentry.
-        </p>
       </main>
 
       {/* Not for production use! We're just saving you from having to delete an extra CSS file ;) */}
@@ -197,6 +202,16 @@ const styles = \`
     &:active > span {
       transform: translateY(0);
     }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+
+      & > span {
+        transform: translateY(0);
+        border: none;
+      }
+    }
   }
 
   .description {

package/dist/src/remix/sdk-example.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdk-example.js","sourceRoot":"","sources":["../../../src/remix/sdk-example.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uCAAyB;AACzB,2CAA6B;AAC7B,+EAA+E;AAC/E,6DAAmC;AAEnC;;GAEG;AACI,KAAK,UAAU,iBAAiB,CAAC,OAMvC;IACC,MAAM,UAAU,GAAG,YAAY,CAAC;IAEhC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE;QAC9B,EAAE,CAAC,SAAS,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KAC/C;IAED,MAAM,gBAAgB,GAAG,kCACvB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IACxB,GAAG,CAAC;IAEJ,IAAI,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE;QACnC,iBAAK,CAAC,GAAG,CAAC,IAAI,CACZ,uDAAuD,IAAI,CAAC,QAAQ,CAClE,gBAAgB,CACjB,wCAAwC,CAC1C,CAAC;QACF,OAAO;KACR;IAED,MAAM,EAAE,CAAC,QAAQ,CAAC,SAAS,CACzB,gBAAgB,EAChB,4BAA4B,CAAC,OAAO,CAAC,CACtC,CAAC;IAEF,iBAAK,CAAC,GAAG,CAAC,IAAI,CAAC,kCAAkC,gBAAgB,GAAG,CAAC,CAAC;AACxE,CAAC;AAhCD,8CAgCC;AAED,SAAgB,4BAA4B,CAAC,OAM5C;IACC,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU;QACvC,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,iBAAiB,OAAO,CAAC,OAAO,oBAAoB,OAAO,CAAC,SAAS,EAAE;QACvF,CAAC,CAAC,WAAW,OAAO,CAAC,OAAO,8BAA8B,OAAO,CAAC,SAAS,EAAE,CAAC;IAEhF,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sHAiC6G,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKnI,CAAC;AACF,CAAC;AA7MD,oEA6MC","sourcesContent":["import * as fs from 'fs';\nimport * as path from 'path';\n// @ts-expect-error - clack is ESM and TS complains about that. It works though\nimport clack from '@clack/prompts';\n\n/**\n * Creates an example Remix page to test Sentry\n */\nexport async function createExamplePage(options: {\n  selfHosted: boolean;\n  orgSlug: string;\n  projectId: string;\n  url: string;\n  isTS: boolean;\n}) {\n  const routesPath = 'app/routes';\n\n  if (!fs.existsSync(routesPath)) {\n    fs.mkdirSync(routesPath, { recursive: true });\n  }\n\n  const exampleRoutePath = `app/routes/sentry-example-page.${\n    options.isTS ? 'ts' : 'js'\n  }x`;\n\n  if (fs.existsSync(exampleRoutePath)) {\n    clack.log.warn(\n      `It seems like a sentry example page already exists (${path.basename(\n        exampleRoutePath,\n      )}). Skipping creation of example route.`,\n    );\n    return;\n  }\n\n  await fs.promises.writeFile(\n    exampleRoutePath,\n    getSentryExamplePageContents(options),\n  );\n\n  clack.log.info(`Created sentry example page at ${exampleRoutePath}.`);\n}\n\nexport function getSentryExamplePageContents(options: {\n  selfHosted: boolean;\n  orgSlug: string;\n  projectId: string;\n  url: string;\n  isTS?: boolean;\n}) {\n  const issuesPageLink = options.selfHosted\n    ? `${options.url}organizations/${options.orgSlug}/issues/?project=${options.projectId}`\n    : `https://${options.orgSlug}.sentry.io/issues/?project=${options.projectId}`;\n\n  return `import * as Sentry from \"@sentry/remix\";\nimport { useState, useEffect } from \"react\";\n\nexport const meta = () => {\n  return [\n    { title: \"sentry-example-page\" },\n  ];\n}\n\nexport default function SentryExamplePage() {\n  const [hasSentError, setHasSentError] = useState(false);\n  const [isConnected, setIsConnected] = useState(true);\n  \n  useEffect(() => {\n    async function checkConnectivity() {\n      const result = await Sentry.diagnoseSdkConnectivity();\n      setIsConnected(result !== 'sentry-unreachable');\n    }\n    checkConnectivity();\n  }, [setIsConnected]);\n\n  return (\n    <div>\n      <main>\n        <div className=\"flex-spacer\" />\n        <svg height=\"40\" width=\"40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z\" fill=\"currentcolor\"/>\n        </svg>\n        <h1>\n          sentry-example-page\n        </h1>\n\n        <p className=\"description\">\n          Click the button below, and view the sample error on the Sentry <a target=\"_blank\" rel=\"noreferrer\" href=\"${issuesPageLink}\">Issues Page</a>. \n          For more details about setting up Sentry, <a target=\"_blank\" rel=\"noreferrer\" href=\"https://docs.sentry.io/platforms/javascript/guides/remix/\">read our docs</a>.\n        </p>\n\n        <button\n          type=\"button\"\n          onClick={async () => {\n            await Sentry.startSpan({\n              name: 'Example Frontend Span',\n              op: 'test'\n            }, async () => {\n              const res = await fetch(\"/api/sentry-example-api\");\n              if (!res.ok) {\n                setHasSentError(true);\n                throw new Error(\"Sentry Example Frontend Error\");\n              }\n            });\n          }}\n        >\n          <span>\n            Throw Sample Error\n          </span>\n        </button>\n\n        {hasSentError ? (\n          <p className=\"success\">\n            Sample error was sent to Sentry.\n          </p>\n        ) : !isConnected ? (\n          <div className=\"connectivity-error\">\n            <p>The Sentry SDK is not able to reach Sentry right now - this may be due to an adblocker. For more information, see <a target=\"_blank\" rel=\"noreferrer\" href=\"https://docs.sentry.io/platforms/javascript/guides/remix/troubleshooting/#the-sdk-is-not-sending-any-data\">the troubleshooting guide</a>.</p>\n          </div>\n        ) : (\n          <div className=\"success_placeholder\" />\n        )}\n\n        <div className=\"flex-spacer\" />\n        <p className=\"description\">\n          Adblockers will prevent errors from being sent to Sentry.\n        </p>\n      </main>\n\n      {/* Not for production use! We're just saving you from having to delete an extra CSS file ;) */}\n      <style dangerouslySetInnerHTML={{ __html: styles }}></style>\n    </div>\n  );\n}\n\nconst styles = \\`\n  main {\n    display: flex;\n    min-height: 100vh;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n  }\n\n  h1 {\n    padding: 0px 4px;\n    border-radius: 4px;\n    background-color: rgba(24, 20, 35, 0.03);\n    font-family: monospace;\n    font-size: 20px;\n    line-height: 1.2;\n  }\n\n  p {\n    margin: 0;\n    font-size: 20px;\n  }\n\n  a {\n    color: #6341F0;\n    text-decoration: underline;\n    cursor: pointer;\n\n    @media (prefers-color-scheme: dark) {\n      color: #B3A1FF;\n    }\n  }\n\n  button {\n    border-radius: 8px;\n    color: white;\n    cursor: pointer;\n    background-color: #553DB8;\n    border: none;\n    padding: 0;\n    margin-top: 4px;\n\n    & > span {\n      display: inline-block;\n      padding: 12px 16px;\n      border-radius: inherit;\n      font-size: 20px;\n      font-weight: bold;\n      line-height: 1;\n      background-color: #7553FF;\n      border: 1px solid #553DB8;\n      transform: translateY(-4px);\n    }\n\n    &:hover > span {\n      transform: translateY(-8px);\n    }\n\n    &:active > span {\n      transform: translateY(0);\n    }\n  }\n\n  .description {\n    text-align: center;\n    color: #6E6C75;\n    max-width: 500px;\n    line-height: 1.5;\n    font-size: 20px;\n\n    @media (prefers-color-scheme: dark) {\n      color: #A49FB5;\n    }\n  }\n\n  .flex-spacer {\n    flex: 1;\n  }\n\n  .success {\n    padding: 12px 16px;\n    border-radius: 8px;\n    font-size: 20px;\n    line-height: 1;\n    background-color: #00F261;\n    border: 1px solid #00BF4D;\n    color: #181423;\n  }\n\n  .success_placeholder {\n    height: 46px;\n  }\n  \n  .connectivity-error {\n    padding: 12px 16px;\n    background-color: #E50045;\n    border-radius: 8px;\n    width: 500px;\n    color: #FFFFFF;\n    border: 1px solid #A80033;\n    text-align: center;\n    margin: 0;\n  }\n  \n  .connectivity-error a {\n    color: #FFFFFF;\n    text-decoration: underline;\n  }\n\\`;\n`;\n}\n"]}
+{"version":3,"file":"sdk-example.js","sourceRoot":"","sources":["../../../src/remix/sdk-example.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uCAAyB;AACzB,2CAA6B;AAC7B,+EAA+E;AAC/E,6DAAmC;AAEnC;;GAEG;AACI,KAAK,UAAU,iBAAiB,CAAC,OAMvC;IACC,MAAM,UAAU,GAAG,YAAY,CAAC;IAEhC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE;QAC9B,EAAE,CAAC,SAAS,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KAC/C;IAED,MAAM,gBAAgB,GAAG,kCACvB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IACxB,GAAG,CAAC;IAEJ,IAAI,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE;QACnC,iBAAK,CAAC,GAAG,CAAC,IAAI,CACZ,uDAAuD,IAAI,CAAC,QAAQ,CAClE,gBAAgB,CACjB,wCAAwC,CAC1C,CAAC;QACF,OAAO;KACR;IAED,MAAM,EAAE,CAAC,QAAQ,CAAC,SAAS,CACzB,gBAAgB,EAChB,4BAA4B,CAAC,OAAO,CAAC,CACtC,CAAC;IAEF,iBAAK,CAAC,GAAG,CAAC,IAAI,CAAC,kCAAkC,gBAAgB,GAAG,CAAC,CAAC;AACxE,CAAC;AAhCD,8CAgCC;AAED,SAAgB,4BAA4B,CAAC,OAM5C;IACC,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU;QACvC,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,iBAAiB,OAAO,CAAC,OAAO,oBAAoB,OAAO,CAAC,SAAS,EAAE;QACvF,CAAC,CAAC,WAAW,OAAO,CAAC,OAAO,8BAA8B,OAAO,CAAC,SAAS,EAAE,CAAC;IAEhF,OAAO;;;;uBAIc,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sHAoCqD,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKnI,CAAC;AACF,CAAC;AA5ND,oEA4NC","sourcesContent":["import * as fs from 'fs';\nimport * as path from 'path';\n// @ts-expect-error - clack is ESM and TS complains about that. It works though\nimport clack from '@clack/prompts';\n\n/**\n * Creates an example Remix page to test Sentry\n */\nexport async function createExamplePage(options: {\n  selfHosted: boolean;\n  orgSlug: string;\n  projectId: string;\n  url: string;\n  isTS: boolean;\n}) {\n  const routesPath = 'app/routes';\n\n  if (!fs.existsSync(routesPath)) {\n    fs.mkdirSync(routesPath, { recursive: true });\n  }\n\n  const exampleRoutePath = `app/routes/sentry-example-page.${\n    options.isTS ? 'ts' : 'js'\n  }x`;\n\n  if (fs.existsSync(exampleRoutePath)) {\n    clack.log.warn(\n      `It seems like a sentry example page already exists (${path.basename(\n        exampleRoutePath,\n      )}). Skipping creation of example route.`,\n    );\n    return;\n  }\n\n  await fs.promises.writeFile(\n    exampleRoutePath,\n    getSentryExamplePageContents(options),\n  );\n\n  clack.log.info(`Created sentry example page at ${exampleRoutePath}.`);\n}\n\nexport function getSentryExamplePageContents(options: {\n  selfHosted: boolean;\n  orgSlug: string;\n  projectId: string;\n  url: string;\n  isTS?: boolean;\n}) {\n  const issuesPageLink = options.selfHosted\n    ? `${options.url}organizations/${options.orgSlug}/issues/?project=${options.projectId}`\n    : `https://${options.orgSlug}.sentry.io/issues/?project=${options.projectId}`;\n\n  return `import * as Sentry from \"@sentry/remix\";\nimport { useState, useEffect } from \"react\";\n\nclass SentryExampleFrontendError extends Error {\n  constructor(message${options.isTS ? ': string | undefined' : ''}) {\n    super(message);\n    this.name = \"SentryExampleFrontendError\";\n  }\n}\n\nexport const meta = () => {\n  return [\n    { title: \"sentry-example-page\" },\n  ];\n}\n\nexport default function SentryExamplePage() {\n  const [hasSentError, setHasSentError] = useState(false);\n  const [isConnected, setIsConnected] = useState(true);\n  \n  useEffect(() => {\n    async function checkConnectivity() {\n      const result = await Sentry.diagnoseSdkConnectivity();\n      setIsConnected(result !== 'sentry-unreachable');\n    }\n    checkConnectivity();\n  }, [setIsConnected]);\n\n  return (\n    <div>\n      <main>\n        <div className=\"flex-spacer\" />\n        <svg height=\"40\" width=\"40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z\" fill=\"currentcolor\"/>\n        </svg>\n        <h1>\n          sentry-example-page\n        </h1>\n\n        <p className=\"description\">\n          Click the button below, and view the sample error on the Sentry <a target=\"_blank\" rel=\"noreferrer\" href=\"${issuesPageLink}\">Issues Page</a>. \n          For more details about setting up Sentry, <a target=\"_blank\" rel=\"noreferrer\" href=\"https://docs.sentry.io/platforms/javascript/guides/remix/\">read our docs</a>.\n        </p>\n\n        <button\n          type=\"button\"\n          onClick={async () => {\n            await Sentry.startSpan({\n              name: 'Example Frontend Span',\n              op: 'test'\n            }, async () => {\n              const res = await fetch(\"/api/sentry-example-api\");\n              if (!res.ok) {\n                setHasSentError(true);\n              }\n            });\n            throw new SentryExampleFrontendError(\"This error is raised on the frontend of the example page.\");\n          }}\n          disabled={!isConnected}\n        >\n          <span>\n            Throw Sample Error\n          </span>\n        </button>\n\n        {hasSentError ? (\n          <p className=\"success\">\n            Sample error was sent to Sentry.\n          </p>\n        ) : !isConnected ? (\n          <div className=\"connectivity-error\">\n            <p>It looks like network requests to Sentry are being blocked, which will prevent errors from being captured. Try disabling your ad-blocker to complete the test.</p>\n          </div>\n        ) : (\n          <div className=\"success_placeholder\" />\n        )}\n\n        <div className=\"flex-spacer\" />\n      </main>\n\n      {/* Not for production use! We're just saving you from having to delete an extra CSS file ;) */}\n      <style dangerouslySetInnerHTML={{ __html: styles }}></style>\n    </div>\n  );\n}\n\nconst styles = \\`\n  main {\n    display: flex;\n    min-height: 100vh;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n  }\n\n  h1 {\n    padding: 0px 4px;\n    border-radius: 4px;\n    background-color: rgba(24, 20, 35, 0.03);\n    font-family: monospace;\n    font-size: 20px;\n    line-height: 1.2;\n  }\n\n  p {\n    margin: 0;\n    font-size: 20px;\n  }\n\n  a {\n    color: #6341F0;\n    text-decoration: underline;\n    cursor: pointer;\n\n    @media (prefers-color-scheme: dark) {\n      color: #B3A1FF;\n    }\n  }\n\n  button {\n    border-radius: 8px;\n    color: white;\n    cursor: pointer;\n    background-color: #553DB8;\n    border: none;\n    padding: 0;\n    margin-top: 4px;\n\n    & > span {\n      display: inline-block;\n      padding: 12px 16px;\n      border-radius: inherit;\n      font-size: 20px;\n      font-weight: bold;\n      line-height: 1;\n      background-color: #7553FF;\n      border: 1px solid #553DB8;\n      transform: translateY(-4px);\n    }\n\n    &:hover > span {\n      transform: translateY(-8px);\n    }\n\n    &:active > span {\n      transform: translateY(0);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.6;\n\n      & > span {\n        transform: translateY(0);\n        border: none;\n      }\n    }\n  }\n\n  .description {\n    text-align: center;\n    color: #6E6C75;\n    max-width: 500px;\n    line-height: 1.5;\n    font-size: 20px;\n\n    @media (prefers-color-scheme: dark) {\n      color: #A49FB5;\n    }\n  }\n\n  .flex-spacer {\n    flex: 1;\n  }\n\n  .success {\n    padding: 12px 16px;\n    border-radius: 8px;\n    font-size: 20px;\n    line-height: 1;\n    background-color: #00F261;\n    border: 1px solid #00BF4D;\n    color: #181423;\n  }\n\n  .success_placeholder {\n    height: 46px;\n  }\n  \n  .connectivity-error {\n    padding: 12px 16px;\n    background-color: #E50045;\n    border-radius: 8px;\n    width: 500px;\n    color: #FFFFFF;\n    border: 1px solid #A80033;\n    text-align: center;\n    margin: 0;\n  }\n  \n  .connectivity-error a {\n    color: #FFFFFF;\n    text-decoration: underline;\n  }\n\\`;\n`;\n}\n"]}

package/dist/src/sveltekit/templates.js

@@ -118,6 +118,7 @@ Feel free to delete this file and the entire sentry route.
     <button
       type="button"
       onclick={getSentryData}
+      disabled={!isConnected}
     >
       <span>
         Throw Sample Error
@@ -130,16 +131,12 @@ Feel free to delete this file and the entire sentry route.
       </p>
     {:else if !isConnected}
       <div class="connectivity-error">
-        <p>The Sentry SDK is not able to reach Sentry right now - this may be due to an adblocker. For more information, see <a target="_blank" href="https://docs.sentry.io/platforms/javascript/guides/sveltekit/troubleshooting/#the-sdk-is-not-sending-any-data">the troubleshooting guide</a>.</p>
+        <p>It looks like network requests to Sentry are being blocked, which will prevent errors from being captured. Try disabling your ad-blocker to complete the test.</p>
       </div>
     {:else}
       <div class="success_placeholder"></div>
     {/if}
-
-    <div class="flex-spacer"></div> 
-    <p class="description">
-      Adblockers will prevent errors from being sent to Sentry.
-    </p>
+  <div class="flex-spacer"></div>
   </main>
 </div>
 
@@ -218,6 +215,16 @@ Feel free to delete this file and the entire sentry route.
     &:active > span {
       transform: translateY(0);
     }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+
+      & > span {
+        transform: translateY(0);
+        border: none;
+      }
+    }
   }
 
   .description {

package/dist/src/sveltekit/templates.js.map

@@ -1 +1 @@
-{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../../src/sveltekit/templates.ts"],"names":[],"mappings":";;;AAAA,SAAgB,sBAAsB,CACpC,GAAW,EACX,gBAGC;IAED,OAAO;;;;UAIC,GAAG;EAEX,gBAAgB,CAAC,WAAW;QAC1B,CAAC,CAAC;;CAEL;QACG,CAAC,CAAC,EACN;EAEE,gBAAgB,CAAC,MAAM;QACrB,CAAC,CAAC;;;;;;;;;uCASiC;QACnC,CAAC,CAAC,EACN;;;;;CAKC,CAAC;AACF,CAAC;AAtCD,wDAsCC;AAED,SAAgB,sBAAsB,CACpC,GAAW,EACX,gBAGC;IAED,OAAO;;;;;UAKC,GAAG;EAEX,gBAAgB,CAAC,WAAW;QAC1B,CAAC,CAAC;;CAEL;QACG,CAAC,CAAC,EACN;;;;;;;;;;CAUC,CAAC;AACF,CAAC;AA9BD,wDA8BC;AAED;;GAEG;AACH,SAAgB,0BAA0B,CAAC,OAK1C;IACC,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU;QACvC,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,iBAAiB,OAAO,CAAC,OAAO,oBAAoB,OAAO,CAAC,SAAS,EAAE;QACvF,CAAC,CAAC,WAAW,OAAO,CAAC,OAAO,8BAA8B,OAAO,CAAC,SAAS,EAAE,CAAC;IAEhF,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iGAiDwF,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2J9G,CAAC;AACF,CAAC;AAvND,gEAuNC;AAED,SAAgB,wBAAwB;IACtC,OAAO;;;;;;CAMR,CAAC;AACF,CAAC;AARD,4DAQC","sourcesContent":["export function getClientHooksTemplate(\n  dsn: string,\n  selectedFeatures: {\n    performance: boolean;\n    replay: boolean;\n  },\n) {\n  return `import { handleErrorWithSentry, replayIntegration } from \"@sentry/sveltekit\";\nimport * as Sentry from '@sentry/sveltekit';\n\nSentry.init({\n  dsn: '${dsn}',\n${\n  selectedFeatures.performance\n    ? `\n  tracesSampleRate: 1.0,\n`\n    : ''\n}\n${\n  selectedFeatures.replay\n    ? `  // This sets the sample rate to be 10%. You may want this to be 100% while\n  // in development and sample at a lower rate in production\n  replaysSessionSampleRate: 0.1,\n\n  // If the entire session is not sampled, use the below sample rate to sample\n  // sessions when an error occurs.\n  replaysOnErrorSampleRate: 1.0,\n\n  // If you don't want to use Session Replay, just remove the line below:\n  integrations: [replayIntegration()],`\n    : ''\n}\n});\n\n// If you have a custom error handler, pass it to \\`handleErrorWithSentry\\`\nexport const handleError = handleErrorWithSentry();\n`;\n}\n\nexport function getServerHooksTemplate(\n  dsn: string,\n  selectedFeatures: {\n    performance: boolean;\n    replay: boolean;\n  },\n) {\n  return `import { sequence } from \"@sveltejs/kit/hooks\";\nimport { handleErrorWithSentry, sentryHandle } from \"@sentry/sveltekit\";\nimport * as Sentry from '@sentry/sveltekit';\n\nSentry.init({\n  dsn: '${dsn}',\n${\n  selectedFeatures.performance\n    ? `\n  tracesSampleRate: 1.0,\n`\n    : ''\n}\n  // uncomment the line below to enable Spotlight (https://spotlightjs.com)\n  // spotlight: import.meta.env.DEV,\n});\n\n// If you have custom handlers, make sure to place them after \\`sentryHandle()\\` in the \\`sequence\\` function.\nexport const handle = sequence(sentryHandle());\n\n// If you have a custom error handler, pass it to \\`handleErrorWithSentry\\`\nexport const handleError = handleErrorWithSentry();\n`;\n}\n\n/**\n * +page.svelte with Sentry example\n */\nexport function getSentryExampleSveltePage(options: {\n  selfHosted: boolean;\n  url: string;\n  orgSlug: string;\n  projectId: string;\n}) {\n  const issuesPageLink = options.selfHosted\n    ? `${options.url}organizations/${options.orgSlug}/issues/?project=${options.projectId}`\n    : `https://${options.orgSlug}.sentry.io/issues/?project=${options.projectId}`;\n\n  return `<!--\nThis is just a very simple page with a button to throw an example error.\nFeel free to delete this file and the entire sentry route.\n-->\n\n<script>\n  import * as Sentry from '@sentry/sveltekit';\n  import { onMount } from 'svelte';\n  \n  // Svelte Runes (requires Svelte 5)\n  // let hasSentError = $state(false);\n  let hasSentError = false;\n  let isConnected = true;\n\n  onMount(async () => {\n    const result = await Sentry.diagnoseSdkConnectivity();\n    isConnected = result !== 'sentry-unreachable';\n  });\n\n  function getSentryData() {\n    Sentry.startSpan(\n      {\n        name: 'Example Frontend Span',\n        op: 'test'\n      },\n      async () => {\n        const res = await fetch('/sentry-example-page');\n        if (!res.ok) {\n          hasSentError = true;\n          throw new Error('Sentry Example Frontend Error');\n        }\n      }\n    );\n  }\n</script>\n\n<title>sentry-example-page</title>\n\n<div>\n  <main>\n    <div class=\"flex-spacer\"></div>\n    <svg height=\"40\" width=\"40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z\" fill=\"currentcolor\"/>\n    </svg>\n    <h1>\n      sentry-example-page\n    </h1>\n\n    <p class=\"description\">\n      Click the button below, and view the sample error on the Sentry <a target=\"_blank\" href=\"${issuesPageLink}\">Issues Page</a>. \n      For more details about setting up Sentry, <a target=\"_blank\" href=\"https://docs.sentry.io/platforms/javascript/guides/sveltekit/\">read our docs</a>.\n    </p>\n\n    <button\n      type=\"button\"\n      onclick={getSentryData}\n    >\n      <span>\n        Throw Sample Error\n      </span>\n    </button>\n\n    {#if hasSentError}\n      <p class=\"success\">\n        Sample error was sent to Sentry.\n      </p>\n    {:else if !isConnected}\n      <div class=\"connectivity-error\">\n        <p>The Sentry SDK is not able to reach Sentry right now - this may be due to an adblocker. For more information, see <a target=\"_blank\" href=\"https://docs.sentry.io/platforms/javascript/guides/sveltekit/troubleshooting/#the-sdk-is-not-sending-any-data\">the troubleshooting guide</a>.</p>\n      </div>\n    {:else}\n      <div class=\"success_placeholder\"></div>\n    {/if}\n\n    <div class=\"flex-spacer\"></div> \n    <p class=\"description\">\n      Adblockers will prevent errors from being sent to Sentry.\n    </p>\n  </main>\n</div>\n\n<style>\n  :global(body) {\n    margin: 0;\n\n    @media (prefers-color-scheme: dark) {\n      color: #ededed;\n      background-color: #0a0a0a;\n    }\n  }\n\n  main {\n    display: flex;\n    min-height: 100vh;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    gap: 16px;\n    margin: 0;\n    padding: 16px;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n  }\n\n  h1 {\n    padding: 0px 4px;\n    border-radius: 4px;\n    background-color: rgba(24, 20, 35, 0.03);\n    font-family: monospace;\n    font-size: 20px;\n    line-height: 1.2;\n  }\n\n  p {\n    margin: 0;\n    font-size: 20px;\n  }\n\n  a {\n    color: #6341F0;\n    text-decoration: underline;\n    cursor: pointer;\n\n    @media (prefers-color-scheme: dark) {\n      color: #B3A1FF;\n    }\n  }\n\n  button {\n    border-radius: 8px;\n    color: white;\n    cursor: pointer;\n    background-color: #553DB8;\n    border: none;\n    padding: 0;\n    margin-top: 4px;\n\n    & > span {\n      display: inline-block;\n      padding: 12px 16px;\n      border-radius: inherit;\n      font-size: 20px;\n      font-weight: bold;\n      line-height: 1;\n      background-color: #7553FF;\n      border: 1px solid #553DB8;\n      transform: translateY(-4px);\n    }\n\n    &:hover > span {\n      transform: translateY(-8px);\n    }\n\n    &:active > span {\n      transform: translateY(0);\n    }\n  }\n\n  .description {\n    text-align: center;\n    color: #6E6C75;\n    max-width: 500px;\n    line-height: 1.5;\n    font-size: 20px;\n\n    @media (prefers-color-scheme: dark) {\n      color: #A49FB5;\n    }\n  }\n\n  .flex-spacer {\n    flex: 1;\n  }\n\n  .success {\n    padding: 12px 16px;\n    border-radius: 8px;\n    font-size: 20px;\n    line-height: 1;\n    background-color: #00F261;\n    border: 1px solid #00BF4D;\n    color: #181423;\n  }\n\n  .success_placeholder {\n    height: 46px;\n  }\n\n  .connectivity-error {\n    padding: 12px 16px;\n    background-color: #E50045;\n    border-radius: 8px;\n    width: 500px;\n    color: #FFFFFF;\n    border: 1px solid #A80033;\n    text-align: center;\n    margin: 0;\n  }\n  \n  .connectivity-error a {\n    color: #FFFFFF;\n    text-decoration: underline;\n  }\n</style>\n`;\n}\n\nexport function getSentryExampleApiRoute() {\n  return `// This is just a very simple API route that throws an example error.\n// Feel free to delete this file and the entire sentry route.\n\nexport const GET = async () => {\n  throw new Error(\"Sentry Example API Route Error\");\n};\n`;\n}\n"]}
+{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../../src/sveltekit/templates.ts"],"names":[],"mappings":";;;AAAA,SAAgB,sBAAsB,CACpC,GAAW,EACX,gBAGC;IAED,OAAO;;;;UAIC,GAAG;EAEX,gBAAgB,CAAC,WAAW;QAC1B,CAAC,CAAC;;CAEL;QACG,CAAC,CAAC,EACN;EAEE,gBAAgB,CAAC,MAAM;QACrB,CAAC,CAAC;;;;;;;;;uCASiC;QACnC,CAAC,CAAC,EACN;;;;;CAKC,CAAC;AACF,CAAC;AAtCD,wDAsCC;AAED,SAAgB,sBAAsB,CACpC,GAAW,EACX,gBAGC;IAED,OAAO;;;;;UAKC,GAAG;EAEX,gBAAgB,CAAC,WAAW;QAC1B,CAAC,CAAC;;CAEL;QACG,CAAC,CAAC,EACN;;;;;;;;;;CAUC,CAAC;AACF,CAAC;AA9BD,wDA8BC;AAED;;GAEG;AACH,SAAgB,0BAA0B,CAAC,OAK1C;IACC,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU;QACvC,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,iBAAiB,OAAO,CAAC,OAAO,oBAAoB,OAAO,CAAC,SAAS,EAAE;QACvF,CAAC,CAAC,WAAW,OAAO,CAAC,OAAO,8BAA8B,OAAO,CAAC,SAAS,EAAE,CAAC;IAEhF,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iGAiDwF,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkK9G,CAAC;AACF,CAAC;AA9ND,gEA8NC;AAED,SAAgB,wBAAwB;IACtC,OAAO;;;;;;CAMR,CAAC;AACF,CAAC;AARD,4DAQC","sourcesContent":["export function getClientHooksTemplate(\n  dsn: string,\n  selectedFeatures: {\n    performance: boolean;\n    replay: boolean;\n  },\n) {\n  return `import { handleErrorWithSentry, replayIntegration } from \"@sentry/sveltekit\";\nimport * as Sentry from '@sentry/sveltekit';\n\nSentry.init({\n  dsn: '${dsn}',\n${\n  selectedFeatures.performance\n    ? `\n  tracesSampleRate: 1.0,\n`\n    : ''\n}\n${\n  selectedFeatures.replay\n    ? `  // This sets the sample rate to be 10%. You may want this to be 100% while\n  // in development and sample at a lower rate in production\n  replaysSessionSampleRate: 0.1,\n\n  // If the entire session is not sampled, use the below sample rate to sample\n  // sessions when an error occurs.\n  replaysOnErrorSampleRate: 1.0,\n\n  // If you don't want to use Session Replay, just remove the line below:\n  integrations: [replayIntegration()],`\n    : ''\n}\n});\n\n// If you have a custom error handler, pass it to \\`handleErrorWithSentry\\`\nexport const handleError = handleErrorWithSentry();\n`;\n}\n\nexport function getServerHooksTemplate(\n  dsn: string,\n  selectedFeatures: {\n    performance: boolean;\n    replay: boolean;\n  },\n) {\n  return `import { sequence } from \"@sveltejs/kit/hooks\";\nimport { handleErrorWithSentry, sentryHandle } from \"@sentry/sveltekit\";\nimport * as Sentry from '@sentry/sveltekit';\n\nSentry.init({\n  dsn: '${dsn}',\n${\n  selectedFeatures.performance\n    ? `\n  tracesSampleRate: 1.0,\n`\n    : ''\n}\n  // uncomment the line below to enable Spotlight (https://spotlightjs.com)\n  // spotlight: import.meta.env.DEV,\n});\n\n// If you have custom handlers, make sure to place them after \\`sentryHandle()\\` in the \\`sequence\\` function.\nexport const handle = sequence(sentryHandle());\n\n// If you have a custom error handler, pass it to \\`handleErrorWithSentry\\`\nexport const handleError = handleErrorWithSentry();\n`;\n}\n\n/**\n * +page.svelte with Sentry example\n */\nexport function getSentryExampleSveltePage(options: {\n  selfHosted: boolean;\n  url: string;\n  orgSlug: string;\n  projectId: string;\n}) {\n  const issuesPageLink = options.selfHosted\n    ? `${options.url}organizations/${options.orgSlug}/issues/?project=${options.projectId}`\n    : `https://${options.orgSlug}.sentry.io/issues/?project=${options.projectId}`;\n\n  return `<!--\nThis is just a very simple page with a button to throw an example error.\nFeel free to delete this file and the entire sentry route.\n-->\n\n<script>\n  import * as Sentry from '@sentry/sveltekit';\n  import { onMount } from 'svelte';\n  \n  // Svelte Runes (requires Svelte 5)\n  // let hasSentError = $state(false);\n  let hasSentError = false;\n  let isConnected = true;\n\n  onMount(async () => {\n    const result = await Sentry.diagnoseSdkConnectivity();\n    isConnected = result !== 'sentry-unreachable';\n  });\n\n  function getSentryData() {\n    Sentry.startSpan(\n      {\n        name: 'Example Frontend Span',\n        op: 'test'\n      },\n      async () => {\n        const res = await fetch('/sentry-example-page');\n        if (!res.ok) {\n          hasSentError = true;\n          throw new Error('Sentry Example Frontend Error');\n        }\n      }\n    );\n  }\n</script>\n\n<title>sentry-example-page</title>\n\n<div>\n  <main>\n    <div class=\"flex-spacer\"></div>\n    <svg height=\"40\" width=\"40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z\" fill=\"currentcolor\"/>\n    </svg>\n    <h1>\n      sentry-example-page\n    </h1>\n\n    <p class=\"description\">\n      Click the button below, and view the sample error on the Sentry <a target=\"_blank\" href=\"${issuesPageLink}\">Issues Page</a>. \n      For more details about setting up Sentry, <a target=\"_blank\" href=\"https://docs.sentry.io/platforms/javascript/guides/sveltekit/\">read our docs</a>.\n    </p>\n\n    <button\n      type=\"button\"\n      onclick={getSentryData}\n      disabled={!isConnected}\n    >\n      <span>\n        Throw Sample Error\n      </span>\n    </button>\n\n    {#if hasSentError}\n      <p class=\"success\">\n        Sample error was sent to Sentry.\n      </p>\n    {:else if !isConnected}\n      <div class=\"connectivity-error\">\n        <p>It looks like network requests to Sentry are being blocked, which will prevent errors from being captured. Try disabling your ad-blocker to complete the test.</p>\n      </div>\n    {:else}\n      <div class=\"success_placeholder\"></div>\n    {/if}\n  <div class=\"flex-spacer\"></div>\n  </main>\n</div>\n\n<style>\n  :global(body) {\n    margin: 0;\n\n    @media (prefers-color-scheme: dark) {\n      color: #ededed;\n      background-color: #0a0a0a;\n    }\n  }\n\n  main {\n    display: flex;\n    min-height: 100vh;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    gap: 16px;\n    margin: 0;\n    padding: 16px;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n  }\n\n  h1 {\n    padding: 0px 4px;\n    border-radius: 4px;\n    background-color: rgba(24, 20, 35, 0.03);\n    font-family: monospace;\n    font-size: 20px;\n    line-height: 1.2;\n  }\n\n  p {\n    margin: 0;\n    font-size: 20px;\n  }\n\n  a {\n    color: #6341F0;\n    text-decoration: underline;\n    cursor: pointer;\n\n    @media (prefers-color-scheme: dark) {\n      color: #B3A1FF;\n    }\n  }\n\n  button {\n    border-radius: 8px;\n    color: white;\n    cursor: pointer;\n    background-color: #553DB8;\n    border: none;\n    padding: 0;\n    margin-top: 4px;\n\n    & > span {\n      display: inline-block;\n      padding: 12px 16px;\n      border-radius: inherit;\n      font-size: 20px;\n      font-weight: bold;\n      line-height: 1;\n      background-color: #7553FF;\n      border: 1px solid #553DB8;\n      transform: translateY(-4px);\n    }\n\n    &:hover > span {\n      transform: translateY(-8px);\n    }\n\n    &:active > span {\n      transform: translateY(0);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.6;\n\n      & > span {\n        transform: translateY(0);\n        border: none;\n      }\n    }\n  }\n\n  .description {\n    text-align: center;\n    color: #6E6C75;\n    max-width: 500px;\n    line-height: 1.5;\n    font-size: 20px;\n\n    @media (prefers-color-scheme: dark) {\n      color: #A49FB5;\n    }\n  }\n\n  .flex-spacer {\n    flex: 1;\n  }\n\n  .success {\n    padding: 12px 16px;\n    border-radius: 8px;\n    font-size: 20px;\n    line-height: 1;\n    background-color: #00F261;\n    border: 1px solid #00BF4D;\n    color: #181423;\n  }\n\n  .success_placeholder {\n    height: 46px;\n  }\n\n  .connectivity-error {\n    padding: 12px 16px;\n    background-color: #E50045;\n    border-radius: 8px;\n    width: 500px;\n    color: #FFFFFF;\n    border: 1px solid #A80033;\n    text-align: center;\n    margin: 0;\n  }\n  \n  .connectivity-error a {\n    color: #FFFFFF;\n    text-decoration: underline;\n  }\n</style>\n`;\n}\n\nexport function getSentryExampleApiRoute() {\n  return `// This is just a very simple API route that throws an example error.\n// Feel free to delete this file and the entire sentry route.\n\nexport const GET = async () => {\n  throw new Error(\"Sentry Example API Route Error\");\n};\n`;\n}\n"]}

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const WIZARD_VERSION = "5.1.0";
+export declare const WIZARD_VERSION = "5.2.0";

package/dist/src/version.js

@@ -3,5 +3,5 @@
 // This is file is updated at release time.
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WIZARD_VERSION = void 0;
-exports.WIZARD_VERSION = '5.1.0';
+exports.WIZARD_VERSION = '5.2.0';
 //# sourceMappingURL=version.js.map

package/dist/src/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":";AAAA,oCAAoC;AACpC,2CAA2C;;;AAE9B,QAAA,cAAc,GAAG,OAAO,CAAC","sourcesContent":["// DO NOT modify this file manually!\n// This is file is updated at release time.\n\nexport const WIZARD_VERSION = '5.1.0';\n"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":";AAAA,oCAAoC;AACpC,2CAA2C;;;AAE9B,QAAA,cAAc,GAAG,OAAO,CAAC","sourcesContent":["// DO NOT modify this file manually!\n// This is file is updated at release time.\n\nexport const WIZARD_VERSION = '5.2.0';\n"]}

package/dist/test/nextjs/templates.test.js

@@ -500,5 +500,83 @@ const templates_1 = require("../../src/nextjs/templates");
       `);
         });
     });
+    (0, vitest_1.describe)('getSentryExamplePageContents', () => {
+        (0, vitest_1.it)('generates example page with TypeScript types', () => {
+            const template = (0, templates_1.getSentryExamplePageContents)({
+                selfHosted: false,
+                sentryUrl: 'https://sentry.io',
+                orgSlug: 'my-org',
+                projectId: '123',
+                useClient: true,
+                isTypeScript: true,
+            });
+            (0, vitest_1.expect)(template).toContain('"use client";');
+            (0, vitest_1.expect)(template).toContain('constructor(message: string | undefined)');
+            (0, vitest_1.expect)(template).toContain('class SentryExampleFrontendError extends Error');
+        });
+        (0, vitest_1.it)('generates example page without TypeScript types', () => {
+            const template = (0, templates_1.getSentryExamplePageContents)({
+                selfHosted: false,
+                sentryUrl: 'https://sentry.io',
+                orgSlug: 'my-org',
+                projectId: '123',
+                useClient: true,
+                isTypeScript: false,
+            });
+            (0, vitest_1.expect)(template).toContain('"use client";');
+            (0, vitest_1.expect)(template).toContain('constructor(message)');
+            (0, vitest_1.expect)(template).toContain('class SentryExampleFrontendError extends Error');
+        });
+        (0, vitest_1.it)('generates example page without useClient directive', () => {
+            const template = (0, templates_1.getSentryExamplePageContents)({
+                selfHosted: false,
+                sentryUrl: 'https://sentry.io',
+                orgSlug: 'my-org',
+                projectId: '123',
+                useClient: false,
+                isTypeScript: true,
+            });
+            (0, vitest_1.expect)(template).not.toContain('"use client";');
+            (0, vitest_1.expect)(template).toContain('https://my-org.sentry.io/issues/?project=123');
+        });
+    });
+    (0, vitest_1.describe)('getSentryExamplePagesDirApiRoute', () => {
+        (0, vitest_1.it)('generates Pages Router API route with TypeScript types', () => {
+            const template = (0, templates_1.getSentryExamplePagesDirApiRoute)({
+                isTypeScript: true,
+            });
+            (0, vitest_1.expect)(template).toContain('constructor(message: string | undefined)');
+            (0, vitest_1.expect)(template).toContain('class SentryExampleAPIError extends Error');
+            (0, vitest_1.expect)(template).toContain('export default function handler(_req, res)');
+        });
+        (0, vitest_1.it)('generates Pages Router API route without TypeScript types', () => {
+            const template = (0, templates_1.getSentryExamplePagesDirApiRoute)({
+                isTypeScript: false,
+            });
+            (0, vitest_1.expect)(template).toContain('constructor(message)');
+            (0, vitest_1.expect)(template).toContain('class SentryExampleAPIError extends Error');
+            (0, vitest_1.expect)(template).toContain('export default function handler(_req, res)');
+        });
+    });
+    (0, vitest_1.describe)('getSentryExampleAppDirApiRoute', () => {
+        (0, vitest_1.it)('generates App Router API route with TypeScript types', () => {
+            const template = (0, templates_1.getSentryExampleAppDirApiRoute)({
+                isTypeScript: true,
+            });
+            (0, vitest_1.expect)(template).toContain('constructor(message: string | undefined)');
+            (0, vitest_1.expect)(template).toContain('class SentryExampleAPIError extends Error');
+            (0, vitest_1.expect)(template).toContain('export function GET()');
+            (0, vitest_1.expect)(template).toContain('export const dynamic = "force-dynamic";');
+        });
+        (0, vitest_1.it)('generates App Router API route without TypeScript types', () => {
+            const template = (0, templates_1.getSentryExampleAppDirApiRoute)({
+                isTypeScript: false,
+            });
+            (0, vitest_1.expect)(template).toContain('constructor(message)');
+            (0, vitest_1.expect)(template).toContain('class SentryExampleAPIError extends Error');
+            (0, vitest_1.expect)(template).toContain('export function GET()');
+            (0, vitest_1.expect)(template).toContain('export const dynamic = "force-dynamic";');
+        });
+    });
 });
 //# sourceMappingURL=templates.test.js.map