The first step to setting up application monitoring for your Vue JS 3 application is to set up a new project in Sentry. If you don't already have a Sentry account, go ahead and sign up for one, then come on back here. Once you're logged in to your account and have the dashboard open, you should go to the Projects tab. Then, click on the Create Project button.
Next, select the language or framework for your project. based on the code that you wish to monitor. In our case, we're going to use view. Under set your default alert settings, I'll select, I'll create my own alerts later.
And for the project name, let's call it Sentry course. Lastly, you can go with the default theme you've got here. Now, when I click create project, I'm presented with some instructions on how to install and use the Sentry SDK for view. That's awesome.
Let's not get ahead of ourselves though. First, we need a project to install it to. Well, I've provided a boilerplate VEEP powered project to help get us started. You can download it by running the following in your terminal at the location of your choice.
I'll type npx digit viewschool slash century course boilerplate. And this is going to copy that repo to our machine. Next, I'll also provide the folder name that I want this to install to. I'll call it SentryCourse.
Awesome. Once it's finished downloading, I'll open it up in VS Code. And looking around just a bit, what you'll see is that this is a Vite powered project that uses Vue 3. And it also has Tailwind, Vue Router, ESLint, and Prettier installed.
Just a few boilerplate kind of things to help get us started. Now, let's run npm install to get all the packages on our machine. After the packages are installed, you can run npm run dev to start the development server. Then, in the browser, you can open up the app.
js application that uses Vue Router to power a home and an about page, and uses Tailwind CSS for a bit of styling. Cool, so that's the application we're going to provide monitoring for. Alright, let's go back to the Sentry dashboard. And what we have here are some really great instructions.
They tell us exactly what comes next. It looks like the first thing we need to do is install a couple of packages. At Sentry View and at Sentry Tracing. I'll just copy this whole command here and use the built-in terminal in VS Code to run it.
As a note, if you're using a different IDE, don't worry about it. Use whatever you're comfortable with. Now that the packages are installed, the next step is to configure the Sentry SDK. Since we're using Vue 3 in our project, let's scroll down to the Vue 3 section.
js file. Then, I'll assign the Vue application instance. to a variable for use in the rest of the configure code in just a moment. Finally, I'll go back to the docs and copy this Sentry init portion of the config code and add it after the definition of the app.
With that, we've got Sentry installed in our project. The first step to setting up application monitoring for your Vue JS 3 application is to set up a new project in Sentry. If you don't already have a Sentry account, go ahead and sign up for one, then come on back here. Once you're logged in to your account and have the dashboard open, you should go to the Projects tab.
Then, click on the Create Project button. Next, select the language or framework for your project. based on the code that you wish to monitor. In our case, we're going to use view.
Under set your default alert settings, I'll select, I'll create my own alerts later. And for the project name, let's call it Sentry course. Lastly, you can go with the default theme you've got here. Now, when I click create project, I'm presented with some instructions on how to install and use the Sentry SDK for view.
That's awesome. Let's not get ahead of ourselves though. First, we need a project to install it to. Well, I've provided a boilerplate VEEP powered project to help get us started.
You can download it by running the following in your terminal at the location of your choice. I'll type npx digit viewschool slash century course boilerplate. And this is going to copy that repo to our machine. Next, I'll also provide the folder name that I want this to install to.
I'll call it SentryCourse. Awesome. Once it's finished downloading, I'll open it up in VS Code. And looking around just a bit, what you'll see is that this is a Vite powered project that uses Vue 3.
And it also has Tailwind, Vue Router, ESLint, and Prettier installed. Just a few boilerplate kind of things to help get us started. Now, let's run npm install to get all the packages on our machine. After the packages are installed, you can run npm run dev to start the development server.
Then, in the browser, you can open up the app. js application that uses Vue Router to power a home and an about page, and uses Tailwind CSS for a bit of styling. Cool, so that's the application we're going to provide monitoring for. Alright, let's go back to the Sentry dashboard.
And what we have here are some really great instructions. They tell us exactly what comes next. It looks like the first thing we need to do is install a couple of packages. At Sentry View and at Sentry Tracing.
I'll just copy this whole command here and use the built-in terminal in VS Code to run it. As a note, if you're using a different IDE, don't worry about it. Use whatever you're comfortable with. Now that the packages are installed, the next step is to configure the Sentry SDK.
Since we're using Vue 3 in our project, let's scroll down to the Vue 3 section. js file. Then, I'll assign the Vue application instance. to a variable for use in the rest of the configure code in just a moment.
Finally, I'll go back to the docs and copy this Sentry init portion of the config code and add it after the definition of the app. With that, we've got Sentry installed in our project.