DEV Community: Malek Hijazi

Setting up projects & SDKs for Sentry self-hosted

Malek Hijazi — Wed, 23 Mar 2022 14:25:34 +0000

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:

dsn : can be found in the project settings
tracingOrigins : the URLs you will be reporting from
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!

Configuring mail for sentry self-hosted

Malek Hijazi — Fri, 18 Mar 2022 11:18:33 +0000

This blog is the fourth post in the Sentry self-hosted series. We will set up the mail configuration for your Sentry self-hosted instance in this post. This post will assume you already went over the previous posts in the series to set up the Sentry instance and configure the DNS AND NGINX configuration.

There are two ways to configure mail on Sentry:

Built-in mail server
Third-party mail server

Built-in mail server

Sentry ships with a built-in outgoing SMTP server set up out of the box.

Self-hosted Sentry ships with a built-in outgoing SMTP server powered by exim4. The default configuration is set to use this server. All you need to do is to set a valid address for mail.from setting in config.yml and the FQDN of your Sentry instance for SENTRY_MAIL_HOST in .env. Keep in mind that if you start sending too many emails to public addresses, your new server may get marked as a spammer and banned.

To enable the default mail server, you will need to update the config.yml file under path_to_installation/sentry/config.yml

You will need to change the mail.from to the email from which you wish to receive emails. It could be something like sentry@yourdomain.com

After saving the changes to config.yaml, you must restart Sentry instance. You can do so with the following command in the root directory of your installation.

docker-composer restart

Third-party mail server

If you prefer to use a third-party service for sending emails, you can also do that. There are a lot of services that you can use; here are a few:

...

After signup up to an account, you would need the following information:

SMTP host : this is a URL to the mail server host
SMTP port : the port number
SMTP username
SMTP password

After retrieving the following information, you will need to update the config.yaml file with the above information.

After saving the changes to config.yaml, you must restart Sentry instance. You can do so with the following command in the root directory of your installation.

docker-composer restart

Conclusion

After updating the config.yaml file and initiating a restart. You can go into the sentry instance and send a test email in the settings

If you send a test mail and do not receive it, check your spam folder as it might have been marked as spam. If the email was not being sent for other reasons, like misconfiguration, Sentry would display a message with the error. If it fails with no message, you will need to put on your debugging hat and check the logs for more details.

If you have any questions or need any help, don't hesitate to DM me or ask your question in the comments.

Good luck!

Configuring NGINX configuration for Sentry self-hosted

Malek Hijazi — Tue, 15 Mar 2022 14:32:50 +0000

This blog is the third post in the Sentry self-hosted series. You will set up the NGINX configuration for your Sentry self-hosted instance in this post. This post will assume you already went over the previous post that explains how to set up your custom subdomain to point to the server with Sentry self-hosted instance installed.

If you did everything correctly, your domain would still not be working as we need to tell NGINX how to redirect to the port Sentry is running on. To do so, you will need to set up the NGINX configuration.

There's an article on the DigitalOcean blog that explains this in detail. However, I will go through the needed steps to set it up.

First, you will need to ssh into the server.

The NGINX configuration directory is usually at /etc/nginx. Inside this directory, you will see a few directories/files. We will be using 2 of these directories.

sites-available: This is where we will configure the available domains.
sites-enabled: This is where we will configure the enabled domains.

Note: you can have many domains available but not enabled. If a domain is not enabled, it won't be publicly accessible.

We will be creating a new configuration file inside the sites-available directory. cd into the sites-available directory, and you should have a default file present in the directory. You can either copy this file into a new file using the below command:

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/sentry.domain.com

PS: make sure to change the name of the second file from sentry.domain.com to the domain you used in the previous article.

Or you can copy the below code and modify the content:

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/sentry.domain.com;
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
             # this will route to port 9000
            proxy_pass http://localhost:9000;
        }
}

Once you're done, save the file.

Now you have your site available, but it is not enabled yet.

We can create symbolic links from the file you just created to the sites-enabled directory, which Nginx reads from during startup.

To enable the domain, you will need to use the below command:

sudo ln -s /etc/nginx/sites-available/sentry.domain.com /etc/nginx/sites-enabled/

PS: don't forget to change the sentry.domain.com to the one you used while setting up.

Your site is now enabled, though it won't be working just yet. There's one more step you need to do for it to work. We need to restart NGINX so that the configuration would be applied.

Restart NGINX with the below command:

sudo systemctl restart nginx

After NGINX restarts, the domain should be working.

Good luck!

Configuring domain name for Sentry self-hosted

Malek Hijazi — Sat, 19 Feb 2022 19:23:52 +0000

This blog post is the second post in the Sentry self-hosted series. In this post, we will set up a domain name for your Sentry self-hosted instance. This post will assume you already went over the previous post that explains the setup process and requirements for Sentry.

To proceed with this tutorial, you will need a domain name and access to change its DNS configuration. If you are not familiar with this, you can check with your domain registrar's FAQs or help center. The most popular registrar (at least from my side of the world) is GoDaddy, and this link will provide you with the details on how to do so. For those who are you using CloudFlare, this is the link to help you accomplish that

After you've set up Sentry and logged in with the user you've created, you will be presented with a configuration screen like the one below (this might be different depending on the version you installed, as of the time of writing the below is what it shows)

Setup screen

Root URL

The first input ( Root URL ) is the URL address of the current installation. Sentry uses this to prefix links and any redirection URLs to the following instance.

You should enter the URL that your instance will reside behind in this input field. So let us say your domain is xyz.com. You will enter xyz.com into that input field. It's a good practice to use a subdomain in this case. Something like sentry.xyz.com

Admin email

The second input is the admin email for this installation. This email is used as a technical contact for this Sentry installation.

You should add the email that you want to receive technical information on.

Outbound email

This section is dedicated to setting up the email server that will be used for sending email notifications from your Sentry self-hosted installation.

Self-hosted Sentry ships with a built-in outgoing SMTP server powered by exim4. The default configuration is set to use this server. If you're not very familiar with what this is, I suggest leaving this section as is. I'll be covering how to set up your email configuration in the next part of this series.

Authentication

This section has one toggle. If you have this toggle turned on, it will allow people to signup for an account on your self-hosted Sentry. If you're using this for personal reasons or work-related reasons, most probably you want this option turned off.

Beacon

This section is about sending information (usage statistics and security information) to Sentry about this installation. This is totally up to you, in the end, you are getting software for free, the least you can do is help out Sentry with anonymous usage statistics.

DNS setup

As previously mentioned, to be able to accomplish setting up the domain. You will need access to the domain DNS configuration page of your registrar provider.

Head to the DNS configuration page and check for the Add record button.

Type

It will prompt you to select the type. You will need to choose the A type (it should be selected by default).

Name

Then for the name field, this should be the same as the one you entered into the Sentry setup page after logging in. The one we discussed at the beginning of this article sentry.xyz.com.

IPv4

In the IPv4 field, you will enter the IP address of your server.

This way the registrar will know to forward any request with sentry.xyz.com domain to your server (using the IP address you provided).

DNS configuration takes up to 24 hours to propagate, but depending on your registrar this might take a few minutes. In some cases though, it takes more than that. So don't get frustrated if it doesn't work right away.

After the DNS propagation has gone through, you should be able to access your self-hosted Sentry installation using the domain name you chose.

Let me know if you have any questions or run into any problems in the comments.

Good luck!

Setting up Sentry self-hosted

Malek Hijazi — Thu, 17 Feb 2022 20:32:47 +0000

Sentry is an open-source full-stack error tracking system which supports a wide range of platforms. Sentry is a paid service that offers a lot of features but it also offers a free plan for developers with limited events and features. The free plan is a good place to start experimenting with Sentry and its features. If you have an enormous amount of projects connected to sentry, the free plan won't be sufficient anymore as it has a limit of 5000 events per month. You can either upgrade to a paid plan or deploy Sentry on your own servers.

Since Sentry is an open-source system, the code is available online to deploy on your own infrastructure. In this post we will be going through the steps to deploy sentry on your own server using DigitalOcean. If you're not familiar with DIgitalOcean, it is an affordable cloud computing provider. You can signup here for 100$ in credit valid for 2 month.

According to the Github repository you will need the following requirements:

Docker 19.03.6+
Compose 1.28.0+
4 CPU Cores
8 GB RAM
20 GB Free Disk Space

These are the most optimal server requirements. On digital ocean you can get these requirements for 40$ a month. If this is not in your current budget, use a 20$ server that can do the job but with slower performance (I've personally tried it for a while on a 20$ server, but had to upgrade it later on as our user base and platforms grew)

After creating a server on DigitalOcean (or any other provider you might be using), you will need to connect to the server using SSH.

Installing Docker

Docker is a set of platform as a service products that uses OS-level virtualization to deliver software in packages called containers. The service has both free and premium tiers. The software that hosts the containers is called Docker Engine. It was first started in 2013 and is developed by Docker, Inc.

You can follow the instructions on the DigitalOcean community blog post to install Docker.

Installing Docker Composer

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services. Then, with a single command, you create and start all the services from your configuration.

You can follow the instructions on the DigitalOcean community blog post to install Docker Compose.

PS: Make sure you replace the version with the newest version found on the Github repository or you will have an outdated version of Docker Compose.

Installation

To get started with a default installation, we will need to clone the repository.

git clone https://github.com/getsentry/self-hosted sentry

The above will clone the repository into a folder called sentry. You can change the directory name by changing the sentry at the end of the command to the desired directory name. Then cd into the directory you just created and run the below command to start the installation process:

./install.sh

During the installation, a prompt will ask if you want to create a user account. If you require that the install not be blocked by the prompt, run:

./install.sh --skip-user-prompt

This will take a while, grab a cup of coffee in the meantime ^^.

If the installation is successful you should see the following

Now run the following command to start sentry:

docker-compose up -d

Once the command finishes you can then open the installation on

http://{server_ip}:9000/

Creating a user

If you used --skip-user-prompt when running the install command, you will need to create a user through the terminal.

sentry createuser

You might run into an error: sentry command not found

Run this command to create an alias for sentry

alias sentry="docker-compose run --rm web"

Rerun the createuser command and it should prompt you for an email, password, confirm password, and superuser confirmation.

Tada! Now you can login to your self-hosted instance of Sentry.io.

In later posts, I will be walking you through the configuration options, configuring SSL, domain name, and integrations.

If you have any questions don't hesitate to ask me in the comments.

Cheers!

Automatic injection of Vue router routes

Malek Hijazi — Wed, 10 Nov 2021 06:36:55 +0000

Have you ever had your Vue router file get so big that it started getting messy to maintain?

How about if you had a separate JS file for each route that can be organized into folders and sub folders. And these files are auto injected into the Vue router.

Create a folder in your /src directory called /router and inside it create an index.js file and /routes directory

Inside the routes directory start creating files for each route you have in your app. You could also create these file in subdirectories inside the routes directory.

Each file should have the below structure.

//this lazy loads the component
const ViewComponent = () => import("@/views/ViewOne");

export default {
    path: "/view-one",
    name: "View One",
    component: ViewComponent,
    show_in_menu: false,
    meta: {
        search: {
            enabled: false,
        },
    },
};

As you can see each file would have the normal attributes you would normally find in a vue router config array.

Loading the view component is using an arrow function, the only difference is that using an arrow function lazy loads the component instead of loading it directly.

You might also find additional attributes, e.g:show_in_menu, search object in the meta.

I use these to auto configure routes based on these configurations. The show_in_menu value, if true, will inject this route into the side navigation menu. For the search, if enabled, it will show a search bar in the Toolbar.

Now once you add all your routes in different files, you need to update the index.js we previously created to the following:

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

//automatically load all files from ./routes directory and register them
const autoLoadedFiles = require.context(
    "./routes", // Look for files in the current directory
    true, // include subdirectories
    /\.js$/ // Only include files that end with .js
);

const routes = [];
//loop over the files in the ./routes directory
autoLoadedFiles.keys().forEach((fileName) => {
    //get the default exported object from the route file and push it to the routes array
    routes.push(autoLoadedFiles(fileName).default);
});

const router = new VueRouter({
    base: '/base-url,
    routes,
});

export default router;

And finally you need to import this file in your main.js or app.js file

import router from "./router";

BONUS:

To retrieve the show_in_menu attribute you can loop over the routes as follows:

this.$router.options.routes.forEach((route) => {
    if (route.show_in_menu) {
        navItems.push(this.createNavItem(route));            
    }
});

To retrieve the meta object you can do so as follows:

this.$router.currentRoute.meta

Let me know what do you think of this solution in the comments and if this is something you might use in your projects.

Cheers!

Setting up Laravel 8 with Vue.js and Tailwind css

Malek Hijazi — Tue, 09 Nov 2021 04:26:19 +0000

This article assumes you already have the environment setup for running and installing Laravel & Vue.js

Laravel Installation

We will be using Laravel Installer to create a new project of the latest Laravel version.

Before running the below command make sure you cd to the directory you want to create your project in

laravel new project-name

Once installed you will need to run your project using a php server. I use Laravel Valet. It is easy to setup and use.

If you want a detailed installation guide head over to the documentation

In brief instructions:
Install

composer global require laravel/valet

valet install

Park: is used to tell valet which folder contains all projects you want to serve. By doing so, all folders in this directory will be served on project-directory.test in the browser

cd ~/Sites

valet park

Valet will automatically start its daemon each time your machine boots. There is no need to run valet start or valet install ever again once the initial Valet installation is complete.

After opening project-directory.test in the browser you will see the default Laravel welcome page.

Vue.js Installation

We will be using Vue Cli to install and create a boilerplate vue project. Its easy to install and gives you a few config options when creating vue projects. Head over to the documentation for installation instructions.

After installing it, cd int your project directory and run:

vue ui

When the command runs successfully you will have a browser tab open with a visual interface. Head on to the Create Tab and select the following destination project-directory/resources

Then click on create project.

You will then be asked to fill in some information like the folder name and package manager. I use npm as a package manager but you can select whatever option you prefer. The folder name should be the Vue app name. For example:

You might have a frontend interface and a backend interface so you can create 2 projects one called frontend and one backend. This will be useful when you want different configurations for each app.
You might have multiple modules. So each module can have its own project. This will be useful when you want different configurations for each module.

I will be setting the folder name as app in the following post

After going through the features tab, select what features you want installed by default (vuex, vue-router, unit testing ...)

This is my current configuration:

Vue-Router: is for routing pages using vue
Vuex: is for state management. I'll be writing a post about this soon.
E2E Testing: I use Cypress (new to it actually) its an automated UI testing library.

After setting up and creating the project you will see the following folder structure.

Vue ui can also be used to manage plugins and manage package manager tasks. Take some time and play around with it.

To run your newly created project you have 2 ways:

1- cd into project-directory/resources/app/ and run npm run serve
2- modify the project-directory/package.json script to add the following script

"serve:app": "cd resources/app && npm run serve"

After that run the command (based on which method you went with)

npm run serve:app

If all is successful you will see the serve url in the terminal an that url will give the following:

Tailwind CSS Installation

Since we have Vue ui installed. We can install the Tailwind css pluging using the plugins section. Head over to the plugins section and click on add plugin button on the top right. Search for tailwind and you will see the plugin in the search results

Click on it and then go through the installation process. You will be asked for the default config file. Choosing on full will generate a file that has all the options which is very big. So if you are new to Tailwind css its better to choose the minimal config file.

When you're done you will have a tailwind.config.js file in the main directory of your Vue app.

You can test if the Tailwind css installation is successful by heading over to their Components page and copy the code for a component. Then replace the content of Home.vue with the code you just copied. Then check the browser and you should see the component ready.

If you've added linting to your project you might face some issues. Add this configuration object for the eslintConfig object and this will disable some linting checks (but then the linting will be useless:p).

"rules": {
    "no-console": "off",
    "no-unused-expressions": "off",
    "no-unused-vars": "off",
    "vue/no-unused-components": "off"
}