Part 6 - Deploying a simple web app with monitoring and analytics without Docker or containers for beginners
Tags: webdev, sentry, logging
Published: 2019-10-10 21:00:25

---
title: Part 6 - Deploying a simple web app with monitoring and analytics without Docker or containers for beginners
published: true
description: 
tags: webdev,sentry,logging
series: Deploying a simple web app with monitoring and analytics without Containers for beginners
---


In the previous post we went over using [GoAccess](https://goaccess.io/) to view server logs. In this part, I'll go over using [Sentry](https://sentry.io) to automatically report errors on the client-side.

Sentry has a [Developer tier](https://sentry.io/pricing/) that should meet our needs. As of time of writing this, the Developer tier supports Real-time error tracking, which is the main feature we want. Configuring this for our website will enable the following:

- Client-side errors will be logged and stored
- We will be able to view errors and the details surrounding them (such as browser type) 
- We will be notified via email when new errors are encountered by users

### Do I need a user consent banner to use this?

Sentry gathers some client-side info to use in tracking errors. If you decide to incorporate Sentry into your website I recommend adding a user consent banner with a Privacy Policy detailing what is done with the user's data. Sentry will help you meet [GDPR compliance](https://sentry.io/security/), but you should still notify your users with a Privacy Policy. There are a lot of way to handle this and I am not a lawyer so I will leave it up to you, the reader, to determine what's best for your website.

### Installing and configuring Sentry

First, you will need to make an account with Sentry. In this tutorial, we will be using the hosted version of Sentry, but they also have an [on-premise version](https://docs.sentry.io/server/). After making an account, during Sentry's 'Onboarding' step, they should ask you to Select a Platform for your application. If you are using the website provided for this tutorial, choose `React`. Otherwise, choose the one that best fits your needs.


![text](https://res.cloudinary.com/frannsoft/image/upload/v1570719312/x6klbrqn854ojg7qgvub.png)

Next, Sentry should display a short guide to installing and connecting the SDK to Sentry in your project. It boils down to this:

- Install the package (e.g., `npm i @sentry/browser`)
- Connect the SDK (`Sentry.init({dsn:'[your unique url]'}))`

You may notice Sentry is 'waiting' for a first event on this 'Onboarding' page. We'll set that up next.

Go ahead and copy that `Sentry.init({dsn:'[your unique url]'})` line above the `ReactDOM.render` method in our example project's `src/index.js` file. Don't forget to import Sentry `import * as Sentry from '@sentry/browser';`.

That's it! Sentry will now handle any uncaught errors in our website. Let's test it out.

In our example website, throw a new Error in the `src/App.js` file in the first line of `componentDidMount()`. Example:

`throw new Error('Hi Sentry!')`

Now reload your website locally. You should see the error on the browser page. If you still have the Sentry 'Onboarding' page open notice how that 'waiting for first event' control has updated and our error event was received. 

You should even see a button `Take me to my event` on the Sentry Onboarding page. Go ahead and click that. Take some time to check out the page showing this error. There's lots of great info!

### Disabling storing of IP Addresses

Ultimately, this is up to you, but minimizing the amount of data we collect is usually a good idea. Unless you have a specific need to collect IP addresses we can turn this off. Click the 'Projects' item in the sidebar and then click the title of the Project you created for this tutorial. Scrolling down, you should see a `Data Privacy` section:

![text](https://res.cloudinary.com/frannsoft/image/upload/v1570719324/qhqzgi5cksdwpfnbydui.png)

Turn the `Prevent Storing of IP Addresses` option on. Going forwards, IP Addresses will no longer be stored for events. Unless you really need this data, it's a good idea to turn this setting on. If you want to read more about these settings Sentry has [documentation for that](https://docs.sentry.io/data-management/sensitive-data/).

### Configuring Email Alerts for new Issues

Sentry is now receiving events from our website, but it would be nice if we were emailed the details of an event the first time it happens. Support for this is built-in to Sentry. To configure it, click the `Settings` item in the sidebar. In the `Organization` sidebar you now see, click the `Projects` item. Now click your Project in the list of Projects. You should be taken to a `Project Settings` pane. 

From here, click the `Alerts` item in the `General Settings` section of the `Project` sidebar. You should see the following:


![text](https://res.cloudinary.com/frannsoft/image/upload/v1570719334/b8tdrxtx7hbkfri1cbs8.png)

Click the `Edit Rule` button in the upper right. In the `Edit Alert Rule` page look for the `Take these actions` section. In the `Select` dropdown, select the `Send a notification via {service}` option:


![text](https://res.cloudinary.com/frannsoft/image/upload/v1570719342/ypqxfxsfjtvegrbusgvm.png)

You should see a new action added, using `Mail` as the default, which is what we want in this case. Now click `Save Rule`.

Let's go back to our website code and modify our `Error` so Sentry receives it as a new event. Change the `Hi Sentry!` string to some other text (e.g., `Mail time!`) and move it to inside `render()` in `src/App.js` so Sentry does not think this event can be grouped with the previous one. Now reload the page locally to cause the error to happen again. You should receive an email with a summary of the error!

It's important to note Sentry supports a variety of services to use for alerts rather than just mail. For example, [Slack](https://sentry.io/integrations/slack/), if you prefer it to email.

Great! We have covered the absolute basics of adding Sentry to our website to automatically report errors. This gives us a powerful tool to see issues on our site without requiring users to log issues for us so we are aware of them. Between, Sentry and GoAccess, we have some very useful infrastructure with regards to logging and error analysis.

Thanks for reading! In the next and final part, we will go over some next steps for you to take.