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.
Setup sentry with nextjs
- 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.client.config.js, sentry.server.config.js and sentry.edge.config.ts with the default Sentry.init, and it also create a files in src\app\api\sentry-example-api\route.js and 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.
Running Sentry Wizard...
version: 3.13.0 | sentry-cli version: 1.75.2
Sentry Wizard will help you to configure your project
Thank you for using Sentry :)
Skipping connection to Sentry due files already patched
┌ Sentry Next.js Wizard
│
◇ ────────────────────────────────────────────────────────────────────────────╮
│ │
│ The Sentry Next.js Wizard will help you set up Sentry for your application. │
│ Thank you for using Sentry :) │
│ │
│ Version: 3.13.0 │
│ │
├───────────────────────────────────────────────────────────────────────────────╯
│
◇ Are you using Sentry SaaS or self-hosted Sentry?
│ Sentry SaaS (sentry.io)
│
◇ Do you already have a Sentry account?
│ Yes
│
● If the browser window didn't open automatically, please open the following link to log into Sentry:
│
│ https://sentry.io/account/settings/wizard/authtoken123/
│
◇ Login complete.
│
◇ Select your Sentry project.
│ myproject-126kk132c/javascript-nextjs-f9
│
◇ Installed @sentry/nextjs with NPM.
│
◆ Created fresh sentry.server.config.ts.
│
◆ Created fresh sentry.client.config.ts.
│
◆ Created fresh sentry.edge.config.ts.
│
◆ Added Sentry configuration to next.config.js. (you probably want to clean this up a bit!)
│
◆ Created src\app\sentry-example-page\page.jsx.
│
◆ Created src\app\api\sentry-example-api\route.js.
│
◆ Created .sentryclirc with auth token for you to test uploading source maps locally.
│
◆ Added .sentryclirc to .gitignore.
│
└ Everything is set up!
You can validate your setup by starting your dev environment (`next dev`) and visiting "/sentry-example-page".
If you encounter any issues, let us know here: https://github.com/getsentry/sentry-javascript/issues
🎉 Successfully set up Sentry for your project 🎉
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.
Top comments (0)