@sentry/wizard/dist/src/nuxt/templates.js

Sentry wizard helping you to configure your project

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getSentryErrorButtonTemplate = exports.getSentryExampleApiTemplate = exports.getSentryExamplePageTemplate = exports.getIndexRouteTemplate = exports.getConfigBody = exports.getSentryConfigContents = exports.getNuxtModuleFallbackTemplate = exports.getDefaultNuxtConfig = void 0;
const url_1 = require("../utils/url");
function getDefaultNuxtConfig() {
    return `// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true }
})
`;
}
exports.getDefaultNuxtConfig = getDefaultNuxtConfig;
function getNuxtModuleFallbackTemplate(options, shouldTopLevelImport) {
    return `  modules: ["@sentry/nuxt/module"],
  sentry: {
    sourceMapsUploadOptions: {
      org: "${options.org}",
      project: "${options.project}",${options.selfHosted ? `\n      url: "${options.url}",` : ''}
    },${shouldTopLevelImport
        ? `\n    autoInjectServerSentry: "top-level-import",`
        : ''}
  },
  sourcemap: { client: "hidden" },`;
}
exports.getNuxtModuleFallbackTemplate = getNuxtModuleFallbackTemplate;
function getSentryConfigContents(dsn, config, selectedFeatures) {
    if (config === 'client') {
        return getSentryClientConfigContents(dsn, selectedFeatures);
    }
    return getSentryServerConfigContents(dsn, selectedFeatures);
}
exports.getSentryConfigContents = getSentryConfigContents;
const featuresConfigMap = {
    performance: [
        '  // We recommend adjusting this value in production, or using tracesSampler',
        '  // for finer control',
        '  tracesSampleRate: 1.0,',
    ].join('\n'),
    replay: [
        '  // This sets the sample rate to be 10%. You may want this to be 100% while',
        '  // in development and sample at a lower rate in production',
        '  replaysSessionSampleRate: 0.1,',
        '  ',
        '  // If the entire session is not sampled, use the below sample rate to sample',
        '  // sessions when an error occurs.',
        '  replaysOnErrorSampleRate: 1.0,',
        '  ',
        "  // If you don't want to use Session Replay, just remove the line below:",
        '  integrations: [Sentry.replayIntegration()],',
    ].join('\n'),
    logs: ['  // Enable logs to be sent to Sentry', '  enableLogs: true,'].join('\n'),
};
const featuresMap = {
    client: ['performance', 'replay', 'logs'],
    server: ['performance', 'logs'],
};
function getConfigBody(dsn, variant, selectedFeatures) {
    return [
        `dsn: "${dsn}",`,
        Object.entries(selectedFeatures)
            .map(([feature, activated]) => {
            return featuresMap[variant].includes(feature) && activated
                ? featuresConfigMap[feature]
                : null;
        })
            .filter(Boolean)
            .join('\n\n'),
    ]
        .filter(Boolean)
        .join('\n\n');
}
exports.getConfigBody = getConfigBody;
function getSentryClientConfigContents(dsn, selectedFeatures) {
    return `import * as Sentry from "@sentry/nuxt";

Sentry.init({
  // If set up, you can use your runtime config here
  // dsn: useRuntimeConfig().public.sentry.dsn,
  ${getConfigBody(dsn, 'client', selectedFeatures)}
  
  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,
});
`;
}
function getSentryServerConfigContents(dsn, selectedFeatures) {
    return `import * as Sentry from "@sentry/nuxt";
 
Sentry.init({
  ${getConfigBody(dsn, 'server', selectedFeatures)}
  
  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,
});
`;
}
function getIndexRouteTemplate() {
    return `<!--
This is just to verify the sentry-example-page.
Feel free to delete this file.
-->

<template></template>`;
}
exports.getIndexRouteTemplate = getIndexRouteTemplate;
function getSentryExamplePageTemplate(options) {
    const { url, org, projectId } = options;
    const issuesPageLink = (0, url_1.getIssueStreamUrl)({ url, orgSlug: org, projectId });
    return `<!--
This is just a very simple page with a button to throw an example error.
Feel free to delete this file.
-->

<script setup>
  import * as Sentry from '@sentry/nuxt';

  class SentryExampleFrontendError extends Error {
    constructor(message) {
      super(message);
      this.name = "SentryExampleFrontendError";
    }
  }

  const hasSentError = ref(false);
  const isConnected = ref(true);
  
  onMounted(async () => {
    try {
      const result = await Sentry.diagnoseSdkConnectivity();
      isConnected.value = result !== 'sentry-unreachable';
    } catch (error) {
      isConnected.value = false;
    }
  });
  
  async function getSentryData() {
    await Sentry.startSpan(
      {
        name: 'Example Frontend Span',
        op: 'test'
      },
      async () => {
        const res = await $fetch('/api/sentry-example-api', { 
          method: 'GET',
          ignoreResponseError: true 
        }).catch(() => null);
        if (!res) {
          hasSentError.value = true;
        }
      }
    );
    throw new SentryExampleFrontendError("This error is raised on the frontend of the example page.");
  }
</script>

<template>
  <title>Sentry Onboarding</title>
  <div>
    <main>
      <div class="flex-spacer" />
      <svg height="40" width="40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <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"/>
      </svg>
      <h1>
        sentry-example-page
      </h1>

      <p class="description">
        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
        </span>
      </button>

      <p v-if="hasSentError" class="success">
        Sample error was sent to Sentry.
      </p>
      <div v-else-if="!isConnected" class="connectivity-error">
        <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" />
    </main>
  </div>
</template>

<style scoped>
  :global(body) {
    margin: 0;

    @media (prefers-color-scheme: dark) {
      color: #ededed;
      background-color: #0a0a0a;
    }
  }

  main {
    display: flex;
    min-height: 100vh;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  }

  h1 {
    padding: 0px 4px;
    margin: 0;
    border-radius: 4px;
    background-color: rgba(24, 20, 35, 0.03);
    font-family: monospace;
    font-size: 20px;
    line-height: 1.2;
  }

  p {
    margin: 0;
    font-size: 20px;
  }

  a {
    color: #6341F0;
    text-decoration: underline;
    cursor: pointer;

    @media (prefers-color-scheme: dark) {
      color: #B3A1FF;
    }
  }

  button {
    border-radius: 8px;
    color: white;
    cursor: pointer;
    background-color: #553DB8;
    border: none;
    padding: 0;
    margin-top: 4px;

    & > span {
      display: inline-block;
      padding: 12px 16px;
      border-radius: inherit;
      font-size: 20px;
      font-weight: bold;
      line-height: 1;
      background-color: #7553FF;
      border: 1px solid #553DB8;
      transform: translateY(-4px);
    }

    &:hover > span {
      transform: translateY(-8px);
    }

    &:active > span {
      transform: translateY(0); 
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.6;

      & > span {
        transform: translateY(0);
        border: none;
      }
    }
  }

  .description {
    text-align: center;
    color: #6E6C75;
    max-width: 500px;
    line-height: 1.5;
    font-size: 20px;

    @media (prefers-color-scheme: dark) {
      color: #A49FB5;
    }
  }

  .flex-spacer {
    flex: 1;
  }

  .success {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 20px;
    line-height: 1;
    background-color: #00F261;
    border: 1px solid #00BF4D;
    color: #181423;
  }

  .success_placeholder {
    height: 46px;
  }
  
  .connectivity-error {
    padding: 12px 16px;
    background-color: #E50045;
    border-radius: 8px;
    width: 500px;
    color: #FFFFFF;
    border: 1px solid #A80033;
    text-align: center;
    margin: 0;
  }
  
  .connectivity-error a {
    color: #FFFFFF;
    text-decoration: underline;
  }
</style>

`;
}
exports.getSentryExamplePageTemplate = getSentryExamplePageTemplate;
function getSentryExampleApiTemplate() {
    return `// This is just a very simple API route that throws an example error.
// Feel free to delete this file.
import { defineEventHandler } from '#imports';

export default defineEventHandler(() => {
  throw new Error("Sentry Example API Route Error");
});
`;
}
exports.getSentryExampleApiTemplate = getSentryExampleApiTemplate;
function getSentryErrorButtonTemplate() {
    return `<!--
This is just a very simple component that throws an example error.
Feel free to delete this file.
-->

<script setup>
  import * as Sentry from '@sentry/nuxt';

  const hasSentError = ref(false);
  
  const throwError = () => {
    Sentry.startSpan(
      {
        name: 'Example Frontend Span',
        op: 'test'
      },
      () => {
        hasSentError.value = true;
        throw new Error('Sentry Example Error');
      }
    )
  };
</script>

<template>
  <div v-if="hasSentError" class="success">
    Sample error was sent to Sentry.
  </div>
  <button v-else @click="throwError">
    <span>Throw Sample Error</span>
  </button>
</template>

<style scoped>
  button {
    border-radius: 8px;
    color: white;
    cursor: pointer;
    background-color: #553DB8;
    border: none;
    padding: 0;
    margin-top: 4px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    & > span {
      display: inline-block;
      padding: 12px 16px;
      border-radius: inherit;
      font-size: 20px;
      font-weight: bold;
      line-height: 1;
      background-color: #7553FF;
      border: 1px solid #553DB8;
      transform: translateY(-4px);
    }

    &:hover > span {
      transform: translateY(-8px);
    }

    &:active > span {
      transform: translateY(0);
    }
  }

  .success {
    width: max-content;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 20px;
    line-height: 1;
    background-color: #00F261;
    border: 1px solid #00BF4D;
    color: #181423;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  }
</style>
`;
}
exports.getSentryErrorButtonTemplate = getSentryErrorButtonTemplate;
//# sourceMappingURL=templates.js.map