🚨

Nuxt3のアプリケーションにSentryを導入する

2024/05/16に公開

Nuxt

Sentry

Nuxt 3

tech

同じ情報を調べる人の参考になれば嬉しいです

Nuxt3にSentryを導入するには？

現時点でNuxt3はSentryにサポートされていないようです

ただ、2022年5月からサポートに向けて動いているようでした。

導入したいけどどうしたらいいの？

NuxtやUnJSのコミッターのAlex Lichterさんが書いてくれたNuxt3にSentryを導入するガイドがあるので、それを参考に作成すると良さそうです。

Now that being said, there's a good guide how to use Sentry with Nuxt written by Alex Lichter:
https://www.lichter.io/articles/nuxt3-sentry-recipe/

実際に試してみた

実際にエラーを確認することができました。

今回確認したエラーの出し方とは違いますが、一例を置いておきます

フロントエンドの確認

pages/index.vue を作成し、buttonをclickする

<template>
  <div>
    <h1>Nuxt 3 Sentry Test</h1>
    <button @click="throwError">Throw Error</button>
  </div>
</template>

<script setup lang="ts">
const throwError = () => {
  throw new Error("This is a test error from the client side!");
};
</script>

バックエンドの確認

server/api/error.ts を以下の内容で作成し、 http://localhost:3000/api/error に接続

export default defineEventHandler(() => {
  throw new Error("This is a test error from the server side!");
});