Nuxt/Vue: error 500 when exception captured #72696

[saint-james-fr]

Environment

SaaS (https://sentry.io/)

Steps to Reproduce

Dependencies:
"@sentry/vue": "8.7.0"
"nuxt": "3.11.2"
"h3": "1.11.1",
...

This is my Nuxt/Vue config inside plugins/sentry.ts

import * as Sentry from "@sentry/vue";


export default defineNuxtPlugin((nuxtApp) => {
  const router = useRouter();
  const {
    public: { sentry },
  } = useRuntimeConfig();

  if (!sentry.dsnFront) {
    return;
  }

  Sentry.init({
    app: nuxtApp.vueApp,
    dsn: sentry.dsnFront,
    environment: sentry.environment,
    enabled: true,
    tracesSampleRate: 1.0,
    replaysSessionSampleRate: 1.0,
    replaysOnErrorSampleRate: 0.25,

·
  });
});

I run a single vue component

<template>
      <button @click="triggerError">Error ?</button>
</template>

<script setup lang="ts">

const triggerError = () => {
  throw new Error("Ceci est une erreur!");
};
</script>

Expected Result

It should capture the error and don't crash the app.

Actual Result

The app crashed with a 500 error (even if it happens on front-end side only)

Product Area

Unknown

Link

No response

DSN

No response

Version

No response

[getsantry]

Assigning to @getsentry/support for routing ⏲️

[AbhiPrasad]

Hi @saint-james-fr, could you share a minimal reproduction of this error happening? Thanks!

[saint-james-fr]

Hi @AbhiPrasad,

here it is: https://github.com/saint-james-fr/sentry-error

Simple nuxt app created with npx nuxi@latest init

Then I pinned the same versions of packages mentioned in my earlier post.

And i've got the same result:

[AbhiPrasad]

@saint-james-fr This seems to work as intended. You are not handling the error so it leads to an error state. Sentry should still capture the error, but you have to code some fallback UI for these error states.

I recommend taking a look at Nuxt's error handling docs.