You might get lots of error which are unknow and it have to be tracked and fixed for this you can use a Sentry.io error tracking tools, it will support error tracking in multiple programming language but here we are going to use it to track error in Nextjs.
First lets create a new project in sentry, choose the tech stack for which you want to track the error logs, then setup the error alert frequency based on your need. Give a project name, choose the team and create the project.
Note: Create seperate project for development and production environment to track error separately.
- Create a project in sentry and choose the platform for which you want to integrate
- Then run this command to setup the sentry with nextjs.
npx @sentry/wizard@latest -i nextjs
It will create
sentry.edge.config.ts with the default
Sentry.init, and it also create a files in
src\app\sentry-example-page\page.jsx to test initial error tracking.
While installing the required sentry package it will ask for the authentication and project setup. After successfully installation you will see similar logs in terminal.
next.config.js will also be update, you should check the file before deploying because you might have different config based on your project requirement, it might be affected.
By running the code you can simulate error tracking in sentry for nextjs api route, remove this after testing.
throw new Error("Sentry Example API Route Error");
Similarly running the code you can simulate error tracking in sentry for client side.
throw new Error("Sentry Example Frontend Error");
In the below screenshot you can see the error which are tracking in sentry from nextjs project.