This blog is the 5th post in the Sentry self-hosted series. In this article, we will be going through the process of creating a project with Sentry to track and monitor performance and errors. This post will assume you already went over the previous posts in the series to set up Sentry.

Creating a project

The first thing you need to do is create a project on sentry. To do that head to your Sentry self-hosted domain and click on the projects in the side menu: ![Screen Shot 2022-03-17 at 2.40.42 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647520846126/-

Next, create a project using the button at the top right:

Choose the needed SDK from the list of platforms

Add a project name and select the team (you can also create a new team)

Click on create project.

After creating, it will redirect you to a setup page where they have a tutorial on how to set it up. Follow the instructions and you should be good to go

I will setup Vue.js as an example, others should be similar (but platform specific):

Example Vue Configuration

Installing dependency

# Using yarn yarn add @sentry/vue @sentry/tracing # Using npm npm install --save @sentry/vue @sentry/tracing 

Configuration

For Vue 2

import Vue from "vue"; import Router from "vue-router"; import * as Sentry from "@sentry/vue"; import { BrowserTracing } from "@sentry/tracing"; Vue.use(Router); const router = new Router({ // ... }); Sentry.init({ Vue, dsn: "dsn_to_your_instance", integrations: [ new BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracingOrigins: ["localhost", "my-site-url.com", /^\//], }), ], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, }); // ... new Vue({ router, render: h => h(App), }).$mount("#app"); 

For Vue 3

import { createApp } from "vue"; import { createRouter } from "vue-router"; import * as Sentry from "@sentry/vue"; import { BrowserTracing } from "@sentry/tracing"; const app = createApp({ // ... }); const router = createRouter({ // ... }); Sentry.init({ app, dsn: "dsn_to_your_instance", integrations: [ new BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracingOrigins: ["localhost", "my-site-url.com", /^\//], }), ], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, }); app.use(router); app.mount("#app"); 

A few things to note that must be changed:

1. dsn : can be found in the project settings
2. tracingOrigins : the URLs you will be reporting from
3. tracesSampleRate : For development purposes you can keep it at 1.0. For production it is better to decrease this to 0.1 (meaning 10% of your user's will report performance analytics)

After changing the above fields, your Sentry SDK should start sending usage analytics back to your Sentry self-hosted instance. (it might take a few mins for data to start appearing).

As usual, if you have any questions don't hesitate to DM me or ask it in the comments.

Good Luck!