If you are using Slack at your company, then the chances are that you have the Slack client running on your desktop and phone. Having your errors more visible in a Slack channel will make it easier to find and notice them.

This solution is best suited in a smaller internal tool. When solutions grow, they need more advanced tooling for error tracking. But getting your errors to Slack is an easy way to get started. If you are not using Slack, you could convert the ideas behind this article to your tooling.

In this article, I will create a beautiful message and send it to a Slack channel. I will also show the steps needed to get your channel running.

I’m using Angular, but it could as well have been vanilla JavaScript or any other framework.

The example code is on Github.

What is Slack?

The name is an acronym for “Searchable Log of All Conversation and Knowledge.”

Basically, it is a communications tool for groups where you create a workspace with multiple channels. Every channel can be public or private with its own topic.

xkcd — it’s like IRC

There also are lots of different apps and integrations. You can, for example, have your builds in one channel and deploys in another by sending data to Slack from your chosen tool.

Or as Slack says: “Where work happens”

Why use Slack for Errors?

If your company is using Slack as a communication tool, then it makes sense to integrate it with your tooling. You can, for example, record your failing builds and deploys there. And why not then also log your errors there?

Since you probably already have Slack open on your desktop and maybe on your phone as well, all these logs will be more available to people.

Having Slack open on all devices makes it easier to notice when something bad is happening.

Every solution can have its Slack channel for errors. You can also differentiate for different environments like test and production. Errors can also be customized as needed as we will see later in this article.

Slack Account

If you are already using Slack, you can skip these next steps and jump right to the coding part.

To be able to test our code we need to have a Slack channel where to send the errors.

Follow this 5 step recipe:

Visit the workspace creation page: slack.com/create. Enter your email address. Make sure it’s an inbox you can access for the next step! Slack will send a confirmation code to the email address you entered. Keep an eye on your inbox for the email. When the email arrives, enter your confirmation code to continue. Follow the directions on each page. You’ll have a chance to select a display name, password, and workspace name.

For this example, I created the workspace Angular Avengers, and I got the URL: https://angular-avengers.slack.com/.

Webhook

Before we start coding, we need an address where to send our errors. For this, we need a Slack app with a Webhook. This is the way we add tooling to our workspace.

Incoming Webhooks are a simple way to post messages from apps into Slack. Creating an Incoming Webhook gives you a unique URL to which you send a JSON payload with the message text and some options.

Create a Slack app (if you don’t already have one). Enable Incoming Webhooks from the settings page. After the settings page refreshes, click Add New Webhook to Workspace. Pick a channel that the app will post to, then click Authorize. Use your Incoming Webhook URL to post a message to Slack.

OK, now that we have all the Slack infrastructure in place we can start coding our Angular application.