DEV Community

Cover image for Setting up projects & SDKs for Sentry self-hosted
Malek Hijazi
Malek Hijazi

Posted on • Originally published at theappsguy.dev on

4 2

Setting up projects & SDKs for Sentry self-hosted

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: Screen Shot 2022-03-17 at 2.41.15 PM.png

Choose the needed SDK from the list of platforms

Screen Shot 2022-03-17 at 2.42.34 PM.png

Add a project name and select the team (you can also create a new team) Screen Shot 2022-03-17 at 2.43.13 PM.png

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

Enter fullscreen mode Exit fullscreen mode

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");

Enter fullscreen mode Exit fullscreen mode

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");

Enter fullscreen mode Exit fullscreen mode

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!

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more