🐈

next app router に sentry を導入する

2023/10/13に公開

Next.js

Sentry

tech

app routerの場合sentryが記載されている手順に沿って導入してもエラーが通知されない

ハンドリングして明示的に通知してあげる必要がある

src/app/error.tsx

 "use client";

import { useEffect } from "react";

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

interface ErrorBoundaryProps {
  error: Error;
  reset: () => void;
}

const Error = ({ error, reset }: ErrorBoundaryProps) => {
  useEffect(() => {
    Sentry.captureException(error);
  }, [error]);

  return (
    <div>
      <h1>Error</h1>
      <p>{error.message}</p>
      <button onClick={reset}>Recover</button>
    </div>
  );
};

export default Error;

next Error Handling

next devだと通知されていたので通知されるもんだと思っていたが、next startだと通知されないようでした。

Discussion