Ayooluwa Isaiah

In this tutorial, we will learn to implement the slash commands in a Chatkit powered React app. In the end, you should have a chat app that looks and works like this:

![slash-cmd-react-chatroom-img1](//images.ctfassets.net/1es3ne0caaid/5Xczy5jsIpwNQqTaA6Xnrb/86a45682d9d9b0818cc13775bf6fbf45/slash-cmd-react-chatroom-img1.gif)

Slash commands have long existed in chat since the IRC days, but they have been reimagined by modern chat apps such as Slack. They act as shortcuts for simple or complex workflows within an application.

## Prerequisites

To follow along with this tutorial, you need need to:


- Have prior experience with working with React and Chatkit.
- Have Node.js (version 8 or later), and npm installed on your machine. Installation instructions can be found on [this page](https://www.npmjs.com/get-npm).

## Create a new Chatkit instance

Go to your [Chatkit dashboard](https://dash.pusher.com), create a new Chatkit instance for this tutorial and take note of your **Instance Locator** and **Secret Key** in the **Credentials** tab.


![slash-cmd-react-chatroom-img2](//images.ctfassets.net/1es3ne0caaid/51tKEy2QUKlwz7DIXlyy46/93ff5840c02c2b1ad77c2c82ce9d639c/slash-cmd-react-chatroom-img2.png)

Also make sure your Test Token Provider is enabled as shown below. Once enabled, the endpoint from which the test token will be generated will be displayed for you to copy and paste. Note that the test token is not to be used in production. More information on the authentication process for production apps can be found [here](https://pusher.com/docs/chatkit/authentication).

![slash-cmd-react-chatroom-img3](//images.ctfassets.net/1es3ne0caaid/6vkG69dT63a4YZWeCrJHvu/99d6a0b98ba63d8581f68785f17bfb64/slash-cmd-react-chatroom-img3.png)

Next, click the **Console** tab and create a new user and a brand new room for your instance. Take note of the room ID as we’ll be needing it later on.

## Create a new React app

Run the command below to install [create-react-app](https://github.com/facebook/create-react-app) globally on your machine, then use it to bootstrap a new react React application:

```
    npm install -g create-react-app
    create-react-app chatkit-slash-cmd
```

Once the app has been created, `cd` into the new `chatkit-slash-cmd` directory and install the following additional dependencies that we’ll be needing in the course of building the chat app:

```
    npm install @pusher/chatkit-client prop-types skeleton-css --save
```

You can now start your development server by running `npm start` then navigate to http://localhost:3000 in your browser to view the app.


## Add the styles for the app

Open up `src/App.css` in your code editor, and change it to look like this:

```css
    // src/App.css
    
    .App {
      width: 100vw;
      height: 100vh;
      display: flex;
      overflow: hidden;
    }
    
    .sidebar {
      height: 100%;
      width: 20%;
      background-color: darkcyan;
    }
    
    .login {
      padding: 5px 20px;
    }
    
    .sidebar input {
      width: 100%;
    }
    
    .chat-rooms .active {
      background-color: whitesmoke;
      color: #181919;
    }
    
    .chat-rooms li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px;
      font-size: 18px;
      color: #181919;
      cursor: pointer;
      border-bottom: 1px solid #eee;
      margin-bottom: 0;
    }
    
    .room-list h3 {
      padding-left: 20px;
      padding-right: 20px;
    }
    
    .room-unread {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 50%;
      font-size: 16px;
      text-align: center;
      padding: 5px;
      background-color: greenyellow;
      color: #222;
    }
    
    .chat-rooms li:hover {
      background-color: #D8D1D1;
    }
    
    .chat-screen {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: calc(100vw - 20%);
    }
    
    .chat-header {
      height: 70px;
      flex-shrink: 0;
      border-bottom: 1px solid #ccc;
      padding-left: 10px;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .chat-header h3 {
      margin-bottom: 0;
      text-align: center;
    }
    
    .chat-messages {
      flex-grow: 1;
      overflow-y: scroll;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      margin-bottom: 0;
      min-height: min-content;
    }
    
    .message {
      padding-left: 20px;
      padding-right: 20px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    
    .message span {
      display: block;
      text-align: left;
    }
    
    .message .user-id {
      font-weight: bold;
    }
    
    .message-form {
      border-top: 1px solid #ccc;
    }
    
    .message-form, .message-input {
      width: 100%;
      margin-bottom: 0;
    }
    
    input[type="text"].message-input {
      height: 50px;
      border: none;
      padding-left: 20px;
    }
```

## Create a basic chat application

Next, let’s set up a basic chat interface so we can add the slash command functionality.

```javascript
    // src/App.js
    
    import React, { Component } from "react";
    import {
      handleInput,
      connectToChatkit,
      connectToRoom,
      sendMessage,
    } from "./methods";
    
    import "skeleton-css/css/normalize.css";
    import "skeleton-css/css/skeleton.css";
    import "./App.css";
    
    class App extends Component {
      constructor() {
        super();
        this.state = {
          userId: "",
          currentUser: null,
          currentRoom: null,
          rooms: [],
          messages: [],
          newMessage: "",
        };
    
        this.handleInput = handleInput.bind(this);
        this.connectToChatkit = connectToChatkit.bind(this);
        this.connectToRoom = connectToRoom.bind(this);
        this.sendMessage = sendMessage.bind(this);
      }
    
      render() {
        const {
          rooms,
          currentRoom,
          currentUser,
          messages,
          newMessage,
        } = this.state;
    
        const roomList = rooms.map(room => {
          const isRoomActive = room.id === currentRoom.id ? 'active' : '';
          return (
            <li
              className={isRoomActive}
              key={room.id}
              onClick={() => this.connectToRoom(room.id)}
            >
              <span className="room-name">{room.name}</span>
            </li>
          );
        });
    
        const messageList = messages.map(message => {
          const arr = message.parts.map(p => {
              return (
                <span className="message-text">{p.payload.content}</span>
              );
          });
    
          return (
            <li className="message" key={message.id}>
              <div>
                <span className="user-id">{message.senderId}</span>
                {arr}
              </div>
            </li>
          )
        });
    
        return (
          <div className="App">
            <aside className="sidebar left-sidebar">
              {!currentUser ? (
                  <div className="login">
                    <h3>Join Chat</h3>
                    <form id="login" onSubmit={this.connectToChatkit}>
                      <input
                        onChange={this.handleInput}
                        className="userId"
                        type="text"
                        name="userId"
                        placeholder="Enter your username"
                      />
                    </form>
                  </div>
                ) : null
              }
              {currentRoom ? (
                <div className="room-list">
                  <h3>Rooms</h3>
                  <ul className="chat-rooms">
                    {roomList}
                  </ul>
                </div>
                ) : null
              }
            </aside>
            {
              currentUser ? (
                <section className="chat-screen">
                  <ul className="chat-messages">
                    {messageList}
                  </ul>
                  <footer className="chat-footer">
                    <form onSubmit={this.sendMessage} className="message-form">
                      <input
                        type="text"
                        value={newMessage}
                        name="newMessage"
                        className="message-input"
                        placeholder="Type your message and hit ENTER to send"
                        onChange={this.handleInput}
                      />
                    </form>
                  </footer>
                </section>
              ) : null
            }
          </div>
        );
      }
    }
    
    export default App;
```

Create a new `methods.js` file within the `src` directory and add the following code into it:

```javascript
    // src/methods.js
    
    import { ChatManager, TokenProvider } from "@pusher/chatkit-client";
    
    function handleInput(event) {
      const { value, name } = event.target;
    
      this.setState({
        [name]: value
      });
    }
    
    function connectToChatkit(event) {
      event.preventDefault();
      const { userId } = this.state;
    
      const tokenProvider = new TokenProvider({
        url:
          "<test token provider endpoint>"
      });
    
      const chatManager = new ChatManager({
        instanceLocator: "<your chatkit instance locator>",
        userId,
        tokenProvider
      });
    
      return chatManager
        .connect()
        .then(currentUser => {
          this.setState(
            {
              currentUser,
            },
            () => connectToRoom.call(this)
          );
        })
        .catch(console.error);
    }
    
    function connectToRoom(roomId = "<your chatkit room id>") {
      const { currentUser } = this.state;
      this.setState({
        messages: []
      });
    
      return currentUser
        .subscribeToRoomMultipart({
          roomId,
          messageLimit: 10,
          hooks: {
            onMessage: message => {
              this.setState({
                messages: [...this.state.messages, message],
              });
            },
          }
        })
        .then(currentRoom => {
          this.setState({
            currentRoom,
            rooms: currentUser.rooms,
          });
        })
        .catch(console.error);
    }
    
    function sendMessage(event) {
      event.preventDefault();
      const { newMessage, currentUser, currentRoom } = this.state;
      const parts = [];
    
      if (newMessage.trim() === "") return;
    
      parts.push({
        type: "text/plain",
        content: newMessage
      });
    
      currentUser.sendMultipartMessage({
        roomId: `${currentRoom.id}`,
        parts
      });
    
      this.setState({
        newMessage: "",
      });
    }
    
    export {
      handleInput,
      connectToRoom,
      connectToChatkit,
      sendMessage,
    }
```

Make sure to replace the `<test token provider endpoint>`, `<your chatkit instance locator>` and `<your chatkit room id>` placeholders above with the appropriate values from your Chatkit dashboard.

## Create a slash command

At this point, users can converse in a room. What is left is to add slash commands to the room. To demonstrate this functionality, we’ll make a `/news [topic]` command that will look up news headlines on the provided topic, and post the first three results to the room.

Head over to https://newsapi.org and [register for a free account](https://newsapi.org/register). Once your account is created, your API key will be presented to you. Take note of it as we’ll be using it shortly.

Next, modify your `methods.js` file to look like this:

```javascript
    // src/methods.js
    
    // [..]
    
    function handleSlashCommand(message) {
      const cmd = message.split(" ")[0];
      const query = message.slice(cmd.length)
    
      if (cmd !== "/news") {
        alert(`${cmd} is not a valid command`);
        return;
      }
    
       return sendNews.call(this, query);
    }
    
    function sendMessage(event) {
      event.preventDefault();
      const { newMessage, currentUser, currentRoom } = this.state;
      const parts = [];
    
      if (newMessage.trim() === "") return;
    
      if (newMessage.startsWith("/")) {
        handleSlashCommand.call(this, newMessage);
    
        this.setState({
          newMessage: "",
        });
    
        return;
      }
    
      parts.push({
        type: "text/plain",
        content: newMessage
      });
    
      currentUser.sendMultipartMessage({
        roomId: `${currentRoom.id}`,
        parts
      });
    
      this.setState({
        newMessage: "",
      });
    }
    
    // [..]
```

In `sendMessage()`, we check if the message starts with a slash character. If so, the message is passed to the `handleSlashCommand()` function where we retrieve the command name and the query after the command. If the command is not `/news`, a “Command not found” message will be displayed to the user. Otherwise, the query is passed off to the `sendNews()` function which you should create above `handleSlashCommand()`:

```javascript
    // src/methods.js
    
    function sendNews(query) {
      const { currentUser, currentRoom } = this.state;
    
      fetch(`https://newsapi.org/v2/everything?q=${query}&pageSize=3&apiKey=<your news api key>`)
        .then(res => res.json())
        .then(data => {
          const parts = [];
          data.articles.forEach(article => {
            parts.push({
              type: "text/plain",
              content: `${article.title} - ${article.source.name} - ${article.url}`
            });
          });
    
          currentUser.sendMultipartMessage({
            roomId: `${currentRoom.id}`,
            parts
          });
        })
        .catch(console.error);
    }
```

In `sendNews()`, a request for the top three headlines on the requested topic is made to newsapi.org, and the results are sent to the current room. You need to replace `<your news api key>` your API key  in the URL endpoint above.

Since the news results will contain links, let’s account for that in the way we’re displaying the messages in the room so that the links don’t display as plain text:

```javascript
    // src/App.js
    
    // [..]
    
    class App extends Component {
      // [..]
    
      render() {
        // [..]
    
        const insertTextAtIndices = (text, obj) => {
          return text.replace(/./g, function(character, index) {
            return obj[index] ? obj[index] + character : character;
          });
        };
    
        const messageList = messages.map(message => {
          const arr = message.parts.map(p => {
            const urlMatches = p.payload.content.match(/\b(http|https)?:\/\/\S+/gi) || [];
            let text = p.payload.content;
            urlMatches.forEach(link => {
              const startIndex = text.indexOf(link);
              const endIndex = startIndex + link.length;
              text = insertTextAtIndices(text, {
                [startIndex]: `<a href="${link}" target="_blank" rel="noopener noreferrer" class="embedded-link">`,
                [endIndex]: "</a>"
              });
            });
    
              return (
                <span className="message-text" dangerouslySetInnerHTML={{
                  __html: text
                }}></span>
              );
          });
    
          return (
            <li className="message" key={message.id}>
              <div>
                <span className="user-id">{message.senderId}</span>
                {arr}
              </div>
            </li>
          )
        });
    
        // [..]
      }
    }
    
    export default App;
```

Try it out! Test the app by using the `/news` command along with any topic of your choice. It should work similarly to the GIF below:


![slash-cmd-react-chatroom-img4](//images.ctfassets.net/1es3ne0caaid/7dI9ERkbnB2nfYkppoQTYp/296c9e5766656338466ce9715ad2270c/slash-cmd-react-chatroom-img4.gif)

## Wrap up

In this tutorial, you learned about how slash commands work and how to implement them in a React chat app.  You can checkout other things Chatkit can do by viewing its extensive [documentation](https://docs.pusher.com/chatkit). 

Don't forget to grab the complete source code in this [GitHub repository](https://github.com/ayoisaiah/chatkit-slash-cmd).

Slash commands have long existed in chat since the IRC days, but they have been reimagined by modern chat apps such as Slack. They act as shortcuts for simple or complex workflows within an application. In this tutorial, implement slash commands in a React chat app. 

How to add slash commands to a React chatroom

Chatkit

Lotanna Nwose

Learn about how lazy loading is handled by Angular and the reasoning behind it with practical illustrations.

![lazy-loading-angular-img1](//images.ctfassets.net/1es3ne0caaid/3EXxli3tynRHDNA43lrEhX/f0e1fff5e3c6dae1ff72f855a5d9ceff/lazy-loading-angular-img1.jpeg)

## Prerequisites

To be able to follow through in this article's demonstration you should have:


- Node version 11.0 installed on your machine.
- Node Package Manager version 6.7 (usually ships with Node installation).
- Visual Studio Code (as it will be used in the demo)
- [Angular CLI](https://cli.angular.io/) version 7.0
- The latest version of Angular (version 7.0)

```
    // run the command in a terminal
    ng version
```

Confirm that you are using version 8, and update to 8 if you are not.

- Download the [Augury Chrome extension here](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en).
- Download this tutorial's starter project [here](https://github.com/viclotana/typicode-app) to follow through the demonstrations.
- Unzip the project and initialize the node modules in your terminal with this command:

```
    npm install
```

Other things that will be nice-to-haves are:

- A working knowledge of the Angular framework at a beginner level.
- Familiarity with the Angular constructor will be a plus but not a requirement.

## Why is lazy loading important

Firstly, bundling involves aligning our code components in progression and putting them in one JavaScript chunk that it passes to the browser, this is called eagerly loading components and it is the default behavior of Angular and every other framework. However, as your application grows, we notice that bundle gets very cumbersome in size and this can quickly make using your application very hard and especially slow. 

With code splitting, the bundle can be split to smaller chunks where the most important chunk can be loaded first and then every other secondary one lazily loaded.

Also, while building applications we know that as a best practice consideration should be made for users using mobile internet data and others with really slow internet connections. We the developers should always be able to control the user experience even during a suspense period when resources are being loaded to the DOM.

## How Angular handles lazy loading

The way Angular handles lazy loading is through modules. Every application has a central module called `ngModule`, which is located in the app module file and contains all the imports and component declarations. This module is what is then bundled at compilation and pushed to the browser, so when the Angular team wanted to facilitate lazy loading they did so through modules. Splitting the central module into smaller bundles and then loading the most important first in the DOM.

![lazy-loading-angular-img2](//images.ctfassets.net/1es3ne0caaid/4Rm5NmJI8Mgyd3tFWvEUj6/6b27c639b1cc333b50ea471b6d88ee69/lazy-loading-angular-img2.jpeg)

This is how lazy loading is configured through routing with component modules. 
There are four main steps to setting up a lazy loaded feature module:

1. Create the feature module.
2. Remove eager loading capabilities.
3. Create the feature module's routing module.
4. Configure the routes.

## What you will build

![lazy-loading-angular-img3](//images.ctfassets.net/1es3ne0caaid/uunXnn9UuSuHoGiwYr6do/bb1b71623d1e3be8cf906697853fddab/lazy-loading-angular-img3.gif)

This is a simple user-blog application that uses Angular services to make get requests to a remote server for building demo or test applications. It has four components: details, posts, sidebar and the users component.

This is the demo that will be used to illustrate lazy loading in this tutorial, if you followed this post from the start you must have downloaded and unzipped this project and you must have downloaded [Augury](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en) too. Let us start going through the three steps listed above:

## Creating feature modules

For every feature or in our application’s case component, we have to create a module. This is because as you have learnt, lazy loading can only be carried out at the module level of abstraction of the Angular application instance. Open up the unzipped project with VS Code and open a new terminal. To create a new module, use the Angular CLI command below:

```
    ng generate module components/details
```

This creates a details module inside the details component, in the same way create modules for posts and users components respectively.

```
    ng generate module components/posts
    ng generate module components/users
```

Copy the code below into your newly generated details module file:

```typescript
    // src/app/components/details/details.module.ts
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { DetailsComponent } from './details.component';
    import { RouterModule } from '@angular/router';
    import { DetailsRoutes } from './details.routes';
    @NgModule({
    declarations: [DetailsComponent],
    exports: [DetailsComponent],
    imports: [
    RouterModule.forChild(DetailsRoutes),
    CommonModule
    ]
    })
    export class DetailsModule { }
```

This declares the detail component and lists it to be exported to the app module on request. Another very important thing here is that the router module is pointed to the details route we are yet to create. 

If you are a little confused at this point, look back at the flowchart image you saw at the start of this post. You will do exactly the same thing in the remaining two module files, so copy the code block below into the users module.

```typescript
    // src/app/components/users/users.module.ts
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { UsersComponent } from './users.component';
    import { RouterModule } from '@angular/router';
    import { UsersRoutes } from './users.routes';
    @NgModule({
    declarations: [UsersComponent],
    exports: [UsersComponent],
    imports: [
    RouterModule.forChild(UsersRoutes),
    CommonModule
    ]
    })
    export class UsersModule { }
```

Then go ahead and also copy the code block below into the posts module file:

```typescript
    // src/app/components/posts/posts.module.ts
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { PostsComponent } from './posts.component';
    import { RouterModule } from '@angular/router';
    import { PostsRoutes } from './posts.routes';
    @NgModule({
    declarations: [PostsComponent],
    exports: [PostsComponent],
    imports: [
    RouterModule.forChild(PostsRoutes),
    CommonModule
    ]
    })
    export class PostsModule { }
```

## Remove eager loading capabilities

Now that the modules have been generated to lazily load these component, the next thing is to remove the eager loading capability from these components. To do that, open your `app.module.ts` file and remove import statements of these components. Your `app.module.ts` file will now look like this:

```typescript
    // src/app/app.module.ts
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { HttpClientModule } from '@angular/common/http';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
    import { SidebarComponent } from './components/sidebar/sidebar.component';
    @NgModule({
    declarations: [
    AppComponent,
    SidebarComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
```

You can see that all the imports have been removed from the app module, this ensures that Angular does not default to eagerly loading them on initialization. 

## Create the feature module's routing module

Each of the components to be loaded lazily has to have a separate routing module created for them. You can either generate a module with the CLI or manually create the file yourself. We have tried generating modules, so this time you will create the files manually. In the details component folder, create a file call it `details.routes.ts` , then do the same in the posts component folder and the users component folder.


![lazy-loading-angular-img4](//images.ctfassets.net/1es3ne0caaid/6Mp1Ja08GmAhdQlQkEffiD/3acbf905e0fd8ba735c1585ac98548de/lazy-loading-angular-img4.png)

Inside the `details.routes.ts` file, copy in the code below:

```typescript
    // src/app/components/details/details.routes.ts
    import { Route } from '@angular/router';
    import { DetailsComponent } from './details.component'
    export const DetailsRoutes: Route[]=[
    {
    path: '',
    component: DetailsComponent
    }
    ]
```

Here, the lazily loaded component's route is set, in this same way, you will do it for the posts and the users components respectively. 

```typescript
    // src/app/components/posts/posts.routes.ts
    import { Route } from '@angular/router';
    import { PostsComponent } from './posts.component'
    export const PostsRoutes: Route[]=[
    {
    path: '',
    component: PostsComponent
    }
    ]
```

Also, copy the code block below into the `users.route.ts` file:

```typescript
    // src/app/components/users/users.routes.ts
    import { Route } from '@angular/router';
    import { UsersComponent } from './users.component'
    export const UsersRoutes: Route[]=[
    {
    path: '',
    component: UsersComponent
    }
    ]
```

## Configure the routes

This is the final stage, at this point you have finished setting up the modules for all the components you want to lazily load and their separate routes. You have to tell your main app routing module that these routes should be lazily loaded. copy the code block below into your `app-routing.module.ts` file:

```typescript
    // src/app/app-routing.module.ts
    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    const routes: Routes = [
    {
    path: '',
    loadChildren: './components/users/users.module#UsersModule'
    },
    {
    path: 'details/:id',
    loadChildren: './components/details/details.module#DetailsModule'
    },
    {
    path: 'posts',
    loadChildren: './components/posts/posts.module#PostsModule'
    }
    ];
    @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
    })
    export class AppRoutingModule { }
```

Here you tell Angular it should be loaded lazily by specifying loadChildren in the place of components in an eager loading situation. Everything in the four stages are completely setup, it is time to run your application:

```
    ng serve
```

You will see that while bundling up the application, it is now split into those modules we created.

![lazy-loading-angular-img5](//images.ctfassets.net/1es3ne0caaid/1v2P7zl6im8UEu7pkb9I7c/19ed2a1cb341957848504bc45b273afa/lazy-loading-angular-img5.png)

## Inspecting with Augury

Augury is one of the most used Angular application debuggers and profilers. One of the great features which is really of importance to us is the router tree analysis. If you have not, you can download the [Augury Chrome extension here](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en). Open your browser on [http://localhost:4200/](http://localhost:4200/) go to the settings and open developer tools and select the **Augury** tab.


![lazy-loading-angular-img6](//images.ctfassets.net/1es3ne0caaid/5kP7QN4YPKe2kirzdvdM3K/6bb9cfb959c239af96282a763b4bd575/lazy-loading-angular-img6.png)

Here you see that all components present are lazy loaded and currently, the only component loaded to the DOM is the users. You will also notice that the other components will be lazily loaded to the DOM (on request)as you interact with the app.


![lazy-loading-angular-img7](//images.ctfassets.net/1es3ne0caaid/5vhYMukwkkXs0fMilFRnM1/c62635794d1da0a09d18003ed50f9421/lazy-loading-angular-img7.gif)

[Here is the link to the complete illustration code on GitHub](https://github.com/viclotana/lazy-loading).

## Conclusion

This is an introduction to how Angular handles lazy loading at the module level of abstraction with the help of routers. The use cases of applying lazy loading might not be obvious for small Angular projects, but it is very clear that big projects with different nests of components will load faster and be more resource efficient with it. Happy hacking!

This tutorial will explore how lazy loading is handled by Angular and the reasoning behind it with practical illustrations. Big projects with different nests of components will load faster and be more resource efficient with lazy loading, which this tutorial will demonstrate.

Lazy loading in Angular 7

no pusher tech

In this tutorial, we’ll go over how this feature works in Chatkit. In the end, you should have a chat app that looks and works like this:


![unread-messages-react-img1](//images.ctfassets.net/1es3ne0caaid/14YkltKozJBTGo9QERerJm/acc324dde657d086f2bb9ab5f5854a1a/unread-messages-react-img1.gif)

Most chat apps present the unread count for messages in a room somewhere in the application interface. This allows the user to scan the interface and quickly see how many unread messages they have and in what rooms.

## Prerequisites

This tutorial assumes prior experience with working with React and Chatkit. If this is your first attempt at using Chatkit, you should probably [start here](https://pusher.com/tutorials/messaging-react-chatkit) first, then come back to this tutorial at a later time.

You also need to have Node.js (version 8 or later), and npm installed on your machine. Installation instructions can be found on [this page](https://www.npmjs.com/get-npm).

## Sign up for Chatkit

Open [this link](https://dash.pusher.com/chatkit) in a new browser tab, and create a new Chatkit account or sign into your existing account. Once you are logged in, create a new Chatkit instance for this tutorial and take note of your **Instance Locator** and **Secret Key** in the **Credentials** tab.


![unread-messages-react-img2](//images.ctfassets.net/1es3ne0caaid/4lnRxg6gJbhvmHh44gEKyF/b6828d8eda8ba9b1dbe5a091177346ec/unread-messages-react-img2.png)

Also make sure your Test Token Provider is enabled as shown below. One enabled, the endpoint from which the test token will be generated will be displayed for you to copy and paste.


![unread-messages-react-img3](//images.ctfassets.net/1es3ne0caaid/5JPVqpecv91wpSV8krqeIJ/600a62b1a88f065250422c9747745d87/unread-messages-react-img3.png)


Next, click the **Console** tab and create a new user and room for your instance. You can [follow the instructions on this page](https://docs.pusher.com/chatkit/quick_start/javascript#create-a-user) to learn how to do so. Once the room has been created, take note of the room ID as we’ll be using it later on.

![unread-messages-react-img4](//images.ctfassets.net/1es3ne0caaid/7n36dkDeV3E0zXj7fTEShn/d931dd24adaf76a4c9be63e00d96b8b0/unread-messages-react-img4.png)


## Create a new React app

Run the command below to install [create-react-app](https://github.com/facebook/create-react-app) globally on your machine, then use it to bootstrap a new react React application:

```
    npm install -g create-react-app
    create-react-app chatkit-unread-messages
```

Once the app has been created, `cd` into the new `chatkit-unread-messages` directory and install the following additional dependencies that we’ll be needing in the course of building the chat app:

```
    npm install @pusher/chatkit-client prop-types skeleton-css --save
```

You can now start your development server by running `npm start` then navigate to http://localhost:3000 in your browser to view the app.


## Add the styles for the app

Open up `src/App.css` in your code editor, and change it to look like this:

```css
    // src/App.css
    
    .App {
      width: 100vw;
      height: 100vh;
      display: flex;
      overflow: hidden;
    }
    
    .sidebar {
      height: 100%;
      width: 20%;
      background-color: blanchedalmond;
    }
    
    .login {
      padding: 5px 20px;
    }
    
    .sidebar input {
      width: 100%;
    }
    
    .chat-rooms .active {
      background-color: whitesmoke;
      color: #181919;
    }
    
    .chat-rooms li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px;
      font-size: 18px;
      color: #181919;
      cursor: pointer;
      border-bottom: 1px solid #eee;
      margin-bottom: 0;
    }
    
    .room-list h3 {
      padding-left: 20px;
      padding-right: 20px;
    }
    
    .room-unread {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 50%;
      font-size: 16px;
      text-align: center;
      padding: 5px;
      background-color: greenyellow;
      color: #222;
    }
    
    .chat-rooms li:hover {
      background-color: #D8D1D1;
    }
    
    .chat-screen {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: calc(100vw - 20%);
    }
    
    .chat-header {
      height: 70px;
      flex-shrink: 0;
      border-bottom: 1px solid #ccc;
      padding-left: 10px;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .chat-header h3 {
      margin-bottom: 0;
      text-align: center;
    }
    
    .chat-messages {
      flex-grow: 1;
      overflow-y: scroll;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      margin-bottom: 0;
      min-height: min-content;
    }
    
    .message {
      padding-left: 20px;
      padding-right: 20px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    
    .message span {
      display: block;
      text-align: left;
    }
    
    .message .user-id {
      font-weight: bold;
    }
    
    .message-form {
      border-top: 1px solid #ccc;
    }
    
    .message-form, .message-input {
      width: 100%;
      margin-bottom: 0;
    }
    
    input[type="text"].message-input {
      height: 50px;
      border: none;
      padding-left: 20px;
    }
```

## Create a basic chat application

Let’s set up a basic chat interface so that we can add the functionality to show the unread message count. The code below should be straight-forward enough to understand if you’ve worked with Chatkit before:

```javascript
    // src/App.js
    
    import React, { Component } from "react";
    import {
      handleInput,
      connectToChatkit,
      connectToRoom,
      sendMessage,
    } from "./methods";
    
    import "skeleton-css/css/normalize.css";
    import "skeleton-css/css/skeleton.css";
    import "./App.css";
    
    class App extends Component {
      constructor() {
        super();
        this.state = {
          userId: "",
          currentUser: null,
          currentRoom: null,
          rooms: [],
          messages: [],
          newMessage: "",
        };
    
        this.handleInput = handleInput.bind(this);
        this.connectToChatkit = connectToChatkit.bind(this);
        this.connectToRoom = connectToRoom.bind(this);
        this.sendMessage = sendMessage.bind(this);
      }
    
      render() {
        const {
          rooms,
          currentRoom,
          currentUser,
          messages,
          newMessage,
        } = this.state;
    
        const roomList = rooms.map(room => {
          const isRoomActive = room.id === currentRoom.id ? 'active' : '';
          return (
            <li
              className={isRoomActive}
              key={room.id}
              onClick={() => this.connectToRoom(room.id)}
            >
              <span className="room-name">{room.name}</span>
            </li>
          );
        });
    
        const messageList = messages.map(message => {
          const arr = message.parts.map(p => {
              return (
                <span className="message-text">{p.payload.content}</span>
              );
          });
    
          return (
            <li className="message" key={message.id}>
              <div>
                <span className="user-id">{message.senderId}</span>
                {arr}
              </div>
            </li>
          )
        });
    
        return (
          <div className="App">
            <aside className="sidebar left-sidebar">
              {!currentUser ? (
                  <div className="login">
                    <h3>Join Chat</h3>
                    <form id="login" onSubmit={this.connectToChatkit}>
                      <input
                        onChange={this.handleInput}
                        className="userId"
                        type="text"
                        name="userId"
                        placeholder="Enter your username"
                      />
                    </form>
                  </div>
                ) : null
              }
              {currentRoom ? (
                <div className="room-list">
                  <h3>Rooms</h3>
                  <ul className="chat-rooms">
                    {roomList}
                  </ul>
                </div>
                ) : null
              }
            </aside>
            {
              currentUser ? (
                <section className="chat-screen">
                  <ul className="chat-messages">
                    {messageList}
                  </ul>
                  <footer className="chat-footer">
                    <form onSubmit={this.sendMessage} className="message-form">
                      <input
                        type="text"
                        value={newMessage}
                        name="newMessage"
                        className="message-input"
                        placeholder="Type your message and hit ENTER to send"
                        onChange={this.handleInput}
                      />
                    </form>
                  </footer>
                </section>
              ) : null
            }
          </div>
        );
      }
    }
    
    export default App;
```

Create a new `methods.js` file within the `src` directory and add the following code into it:

```javascript
    // src/methods.js
    
    import { ChatManager, TokenProvider } from "@pusher/chatkit-client";
    
    function handleInput(event) {
      const { value, name } = event.target;
    
      this.setState({
        [name]: value
      });
    }
    
    function connectToChatkit(event) {
      event.preventDefault();
      const { userId } = this.state;
    
      const tokenProvider = new TokenProvider({
        url:
          "<test token provider endpoint>"
      });
    
      const chatManager = new ChatManager({
        instanceLocator: "<your chatkit instance locator>",
        userId,
        tokenProvider
      });
    
      return chatManager
        .connect()
        .then(currentUser => {
          this.setState(
            {
              currentUser,
            },
            () => connectToRoom.call(this)
          );
        })
        .catch(console.error);
    }
    
    function connectToRoom(roomId = "<your chatkit room id>") {
      const { currentUser } = this.state;
      this.setState({
        messages: []
      });
    
      return currentUser
        .subscribeToRoomMultipart({
          roomId,
          messageLimit: 10,
          hooks: {
            onMessage: message => {
              this.setState({
                messages: [...this.state.messages, message],
              });
            },
          }
        })
        .then(currentRoom => {
          this.setState({
            currentRoom,
            rooms: currentUser.rooms,
          });
        })
        .catch(console.error);
    }
    
    function sendMessage(event) {
      event.preventDefault();
      const { newMessage, currentUser, currentRoom } = this.state;
      const parts = [];
    
      if (newMessage.trim() === "") return;
    
      parts.push({
        type: "text/plain",
        content: newMessage
      });
    
      currentUser.sendMultipartMessage({
        roomId: `${currentRoom.id}`,
        parts
      });
    
      this.setState({
        newMessage: "",
      });
    }
    
    export {
      handleInput,
      connectToRoom,
      connectToChatkit,
      sendMessage,
    }
```

Make sure to replace the `<test token provider endpoint>`, `<your chatkit instance locator>` and `<your chatkit room id>` placeholders above with the appropriate values from your Chatkit dashboard.

Open the app in a few different tabs and join the chatroom under different usernames. Send a few messages for each user. It should work just fine, similar to the GIF below:

![unread-messages-react-img5](//images.ctfassets.net/1es3ne0caaid/6XlTQXYcX2fZRg8b6Z5OKg/c859b0a7867658d8733c542bde4ec791/unread-messages-react-img5.gif)


## Show the unread message count

Chatkit provides an `unreadCount` [property](https://pusher.com/docs/chatkit/reference/javascript#room-properties) that we can hook into to display the number of unread messages for the current user in a room. But how do we know when a user has read a message? This is where [read cursors](https://pusher.com/docs/chatkit/reference/javascript#cursors) come in.

When a user enters a room, messages in the room are loaded into the chat interface according to the `messageLimit` property. At this point, it is safe to say that the user has read all the messages in that room and we can indicate this by setting a read cursor on the last message.

Change the `onMessage` hook in the `connectToRoom` function as follows:

```javascript
    // src/methods.js
    
    function connectToRoom(roomId = "21431542") {
      const { currentUser } = this.state;
      this.setState({
        messages: []
      });
    
      return currentUser
        .subscribeToRoomMultipart({
          roomId,
          messageLimit: 10,
          hooks: {
            onMessage: message => {
              this.setState({
                messages: [...this.state.messages, message],
              });
    
              const { currentRoom } = this.state;
    
              if (currentRoom === null) return;
    
              return currentUser.setReadCursor({
                roomId: currentRoom.id,
                position: message.id,
              });
            },
          }
        })
        .then(currentRoom => {
          this.setState({
            currentRoom,
            rooms: currentUser.rooms,
          });
        })
        .catch(console.error);
    }
```

What this means is that, if the user leaves the room by any means (such as by going offline, or switching to another room) any messages sent after the last read cursor position would count towards the `unreadCount`.

We can then use the `onRoomUpdated` [connection hook](https://pusher.com/docs/chatkit/reference/javascript#connection-hooks) to update the room in the application state and display the unread count in the chat interface. Add the hook as shown below:

```javascript
    // src/methods.js
    
    function connectToChatkit(event) {
      // [..]
    
      return chatManager
        .connect({
          onRoomUpdated: room => {
            const { rooms } = this.state;
            const index = rooms.findIndex(r => r.id === room.id);
            rooms[index] = room;
            this.setState({
              rooms,
            });
          }
        })
        .then(currentUser => {
          this.setState(
            {
              currentUser,
            },
            () => connectToRoom.call(this)
          );
        })
        .catch(console.error);
    }
```

Finally, we want to display a room’s unread count if the number of unread messages is greater than zero. Update the `roomList` variable in the `render()` method of our chat app as shown below:

```javascript
    // src/App.js
    
    const roomList = rooms.map(room => {
      const isRoomActive = room.id === currentRoom.id ? 'active' : '';
      return (
        <li
          className={isRoomActive}
          key={room.id}
          onClick={() => this.connectToRoom(room.id)}
        >
          <span className="room-name">{room.name}</span>
          {room.unreadCount > 0 ? (
            <span className="room-unread">{room.unreadCount}</span>
          ): null}
        </li>
      );
    });  
```

You can simulate unread messages by creating a different room and switching to it as one user, then send messages to the first room as another user. It will display the unread count for any of the users as appropriate:

![unread-messages-react-img6](//images.ctfassets.net/1es3ne0caaid/1Y9HPyWwhLiFjTqBQTQGhL/0d5074dbd9f7b07b681c92cb2f188a83/unread-messages-react-img6.gif)


## Wrap up

In this tutorial, you learned how add unread message count to your Chatkit app. We explored how to use read cursors to determine if a user has read a message, and how to display the number of unread messages in the application interface.

You can checkout other things Chatkit can do by viewing its extensive [documentation](https://docs.pusher.com/chatkit). Don't forget to grab the complete source code in this [GitHub repository](https://github.com/ayoisaiah/chatkit-unread-messages).

Most chat apps present the unread count for messages in a room somewhere in the application interface. In this tutorial, learn how add unread message count to your Chatkit app, how to use read cursors to determine if a user has read a message, and how to display the number of unread messages in the application interface.


Most chat apps present the unread count for messages in a room somewhere in the application interface. In this tutorial, learn how add unread message count to your app, how to use read cursors to determine if a user has read a message, and how to display the number of unread messages.

How to show unread message count with React

Aman Mittal

This tutorial is a step-by-step guide to connect AWS Amplify and AWS AppSync services with your React Native application. Build a cross-platform mobile app by integrating frameworks like React Native and Expo CLI, with services AWS AppSync and Amplify.

Build a serverless app with React Native and AWS Amplify

How to build a serverless mobile app with React Native and AWS Amplify

Neo Ighodaro

Ephemeral messages are messages that last for a short while. This tutorial will show you how to build a chat app for Android that implements ephemeral messages: the media messages will be erased from the chatroom and all connected devices after the other user has seen the message. This is great for privacy.

Ephemeral messages are messages that last for a short while. This tutorial will show you how to build a chat app for Android that implements ephemeral messages: the media messages will be erased from the chatroom and all connected devices after the other user has seen the message.

Building ephemeral media messaging for Android

In this turorial, you will be introduced to errors tracking in Angular 7 using the errorHandler class and Rollbar.

![angular-errorhandler-rollbar-img1](//images.ctfassets.net/1es3ne0caaid/3yB85QZ84GXIMsJLPTe0ta/5a8a3b9a1972e2ba153ec581a3816684/angular-errorhandler-rollbar-img1.png)

This is the last part of the Angular 7 error handling series, you can refer to [the first part here](https://pusher.com/tutorials/error-handling-angular-part-1), and [the second here](https://pusher.com/tutorials/error-handling-angular-part-2) and [the third part here](https://pusher.com/tutorials/error-handling-angular-part-3).


## Prerequisites

To be able to follow through in this article's demonstration you should have:

- Node version 11.0 installed on your machine.
- Node Package Manager version 6.7 (usually ships with Node installation).
- [Angular CLI](https://cli.angular.io/) version 7.0
- The latest version of Angular (version 7)

```
    // run the command in a terminal
    ng version
```

Confirm that you are using version 7, and update to 7 if you are not.
Other things that will be nice-to-haves are:


- A working knowledge of the Angular framework at a beginner level.
- Familiarity with Angular services will be a plus but not a requirement.

In this series, you have been introduced earlier to handling client side errors and then HTTP errors gracefully in Angular 7 with tools like errorHandlers, Interceptors and even RxJS operators. In this post you will be shown how to track these errors in a remote tracking environment.

## The problem

Let’s review the problems we face with testing and error tracking in production. You can skip this if you read part three.

### Tracking errors
When your Angular application is running in the development server with ng serve you can easily track errors in the application. The fastest way you can do this for JavaScript errors is with the errorHandler as it was illustrated in [this introductory post here](https://pusher.com/tutorials/error-handling-angular-part-1). The errorHandler logs this error for you, the developer, in the browser console you test your application with. This is standard procedure for the development environment.

### ErrorHandler limitations
When you build out the application in production and ship it to your users however, there is a big problem that should be obvious by now. Testing the shipped applications become an issue. If your application is in say beta stage, you might maybe send it to family and friends to use, you have to also be on those different devices to be able to spot the errors in their various browser consoles. This is of course not a scalable solution if you have many users who might not even be in the same location as you. 

### Leaving error reporting to users
Initially, the solution to this problem will be to build a system in such a way that your users can report errors on the application. However, this is rarely the case as users have been reported to be really impatient and this is confirmed by the [statistics on the high churn rate of users](https://www.statista.com/statistics/384224/monthly-app-launches-churn/) with applications. The more likely situation that is more commonly seen in the place of error reporting is one-star ratings and high churn rate.

A user is more likely not to use your application and even give a bad review of it than they are to report the error experienced while using the app. This is very practical and it shows an underlying question of responsibility. The responsibility of reporting errors should not be on the user but the developer of the application.

### Remote error tracking
What if there was a way you can still track errors in your application from all the users using the application in real time, remotely and in a centralized location. Thanks to advancement in code testing and monitoring services that has improved in web development over the years, you can now. There are a lot of services in the market right now that lets you do exactly that, some of which are Sentry, Rollbar, Airbrake, Raygun and a host of others.

In this article, you will be introduced to Rollbar and how it uses the Angular errorHandler class to remotely track and report errors in your Angular applications. 

## Introducing Rollbar

[Rollbar](https://rollbar.com/) is a software as a service product that shows you exception and crash reports in real-time in one centralized dashboard so you can track and debug bugs in record time. In your dashboard, similar errors are automatically grouped using Rollbar's fingerprinting technology to reduce noise, and all errors include detailed data to help you assess impact and assign priority.

Rollbar automatically collects all the data you need to replicate and debug an error, presented in ways optimized for debugging speed and it works with JavaScript source maps. With [Telemetry](https://en.wikipedia.org/wiki/Telemetry), you can debug client-side JavaScript errors faster. It works like a black box recorder, but for errors.

## Getting started

To get started using Rollbar, visit [the website here](https://rollbar.com) and click the **Sign Up** button to create an account. You will see options to sign up with GitHub, Google account or any email account. If successfully created, you will see this welcome screen displayed..

![angular-errorhandler-rollbar-img2](//images.ctfassets.net/1es3ne0caaid/31qfrdmImEkqvr6yOJfs1Q/d45c5666167c9ee2539d60f7b37074d9/angular-errorhandler-rollbar-img2.png)

The next step is to click the **LET'S DO IT** button at the end of the page to open the new project creation page.

## Creating your first project

The next page that appears on the interface will show you input elements where you can type in the name of the new project you want to create. 

![angular-errorhandler-rollbar-img3](//images.ctfassets.net/1es3ne0caaid/51Tp1s4UgzhbbISFQfgC2J/b6aef478577c38bbb2383207dacef491/angular-errorhandler-rollbar-img3.png)

I call mine ng-errors, you can call it any name of your choice. After deciding on that, click **CONTINUE** and proceed to the next stage of the onboarding process, which is to choose the SDK. For Angular 7, choose the **Angular 2+** tab in the array of other languages and frameworks, then click **CONTINUE**.

The very next interface you will see is your Rollbar dashboard, which shows installation instructions along with the SDK configuration containing your unique private access token.

## Using Rollbar

If you have followed this post from the start, you should have Angular 7 all setup in your machine, you have also now setup a Rollbar account and created a new project. Now download this demo project from our [introductory article here](https://github.com/viclotana/ng_errors). After unzipping it, open the project folder in VS Code and install Rollbar for browser use in a terminal inside the project with this command:

```
    npm install rollbar
```

This installs the Rollbar SDK into the project, making the Angular API available for use. Now you have to make changes in two files, go into the `error.service.ts` file and copy in the code block below:

```typescript
    // src/app/error.service.ts
    import * as Rollbar from 'rollbar';
    import {
    Injectable,
    Inject,
    InjectionToken,
    ErrorHandler
    } from '@angular/core';
    const rollbarConfig = {
    accessToken: 'COPY THIS FROM YOUR DASHBOARD',
    captureUncaught: true,
    captureUnhandledRejections: true,
    };
    export const RollbarService = new InjectionToken<Rollbar>('rollbar');
    @Injectable()
    export class RollbarErrorHandler implements ErrorHandler {
    constructor(@Inject(RollbarService) private rollbar: Rollbar) {}
    handleError(err:any) : void {
    this.rollbar.error(err.originalError || err);
    console.log('error occured here brooo');
    }
    }
    export function rollbarFactory() {
    return new Rollbar(rollbarConfig);
    }
```

This code block comes directly from the Rollbar Angular API, you can now modify the error handler in any custom way you like so long as you do not change class names. I added a console log message just to see the number of times errors are logged. Also, if you copy the code exactly from here, you will get an invalid token error which will be fixed when you use your own unique token from your dashboard. 

The next thing to do is to make sure to import and register the new error handler and the service in the `app.module.ts` file. Copy in the code below to do that:

```typescript
    // src/app/app.module.ts
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, ErrorHandler } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { RollbarErrorHandler, RollbarService, rollbarFactory } from './error.service';
    import { ErrorComponent } from './error/error.component';
    @NgModule({
    declarations: [
    AppComponent,
    ErrorComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule
    ],
    providers: [
    {
    provide: ErrorHandler,
    useClass: RollbarErrorHandler,
    },
    {
    provide: RollbarService,
    useFactory: rollbarFactory,
    },
    ],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
```

To test it, run your application in development environment:

```
    ng serve
```

This displays our application below


![angular-errorhandler-rollbar-img4](//images.ctfassets.net/1es3ne0caaid/1ZHkE0EbEomTmJCChfTEnp/ffb9ae432d68fcc1137d930dee854c49/angular-errorhandler-rollbar-img4.png)

To trigger an exception click the button with try catch, once you do that the app breaks. Now go to your Rollbar dashboard in your browser and you will see the error tracked in real time.


![angular-errorhandler-rollbar-img5](//images.ctfassets.net/1es3ne0caaid/5BzksWQLBUp4CfGtHFJHAy/e18f3fe32985524e3eff5b8e48540e06/angular-errorhandler-rollbar-img5.png)

If you click on the error, you will see a very well detailed and comprehensive analysis of the said error. With a lot of important sections including tracebacks, occurrences, number of users experiencing the error and even possible community solutions to the error, based off a wide range of data already collected on similar errors by Rollbar.


![angular-errorhandler-rollbar-img6](//images.ctfassets.net/1es3ne0caaid/3Odgeq9FzDtP7yWDKGjJcS/80968714ce0466cad81ef06bc6c4835e/angular-errorhandler-rollbar-img6.png)

## Collaboration tool

Rollbar also provides a very significant feature that makes it seamless for you and your development team to be on top of your workflow with error tracking for your application. You can create a team, or be invited into one where you can all now get updates and email alerts on these errors as they occur and so you can work together towards fixing them.

![angular-errorhandler-rollbar-img7](//images.ctfassets.net/1es3ne0caaid/1G25qFfPlI1opMfGRgUi4d/5b3a8edc90f14951fc2de5dfed8a13b2/angular-errorhandler-rollbar-img7.png)

## Numerous integrations

Rollbar also has a very seamless platform to integrate your application with your core open source development environment, be it GitHub, GitLab or Bitbucket. This way, you will not only be able to track errors, but have a straightforward way of fixing them and running tests all in a painless approach. 


![angular-errorhandler-rollbar-img8](//images.ctfassets.net/1es3ne0caaid/3meP6gL59vIUu5Gb4sSGuz/56178887064152948a886423d85e3a07/angular-errorhandler-rollbar-img8.png)

## Deploy tracking

Not only is Rollbar great for source control integration, it is also great for tracking your application deployment and continuous integration. There a lot of ways you can deploy your Angular application and Rollbar integrates with most of them to ensure you have a pain-free workflow, be it Heroku, or MS Build or Powershell or Circle CI.


![angular-errorhandler-rollbar-img9](//images.ctfassets.net/1es3ne0caaid/l1eWZCidF9wMRFAPkTp1e/d4a1db627000447a190a51c8805cfdfc/angular-errorhandler-rollbar-img9.png)

## About security

Rollbar ensures the complete security of your application data. As part of this commitment,  they have a variety of industry-standard security technologies and procedures to protect your information from unauthorized access, use, or disclosure, strongly adhering to HIPAA and ISO 27001 compliance and meet industry best practices where applicable. Learn more about the security policy and their compliance [here](https://docs.rollbar.com/docs/security).

## Conclusion

Rollbar is one of the best error tracking services around for web applications. In addition to the well laid out documentation, it has a good number of integrations with tools you might already be using in your workflow and that makes adopting it an attractive option. Try Rollbar today!

This tutorial series will introduce you to errors in Angular 7. In this final part, part four, learn about errors tracking in Angular 7 using the errorHandler class and Rollbar. Rollbar is one of the best error tracking services around for web applications.

Introduction to error handling in Angular 7 - Part 4

Introduction to error handling in Angular 7: Part 4 - Rollbar 

Suragch

The tutorial will help you understand what each part of the Beams API does in a client iOS app. You will look at an iOS project demonstrating the full API of the iOS Beams SDK, and receive pointers for how to set the demo project up as well as how to send push notifications to test it.


Pusher Beams client API demo for iOS

Beams

Wern Ancheta

Automated software for monitoring chat rooms helps prevent users' bad behavior from affecting other users. This tutorial will explain how you can moderate profanity by masking it and automatically banning users who engage in it. We’ll be using React Native and WebPurify to implement moderation.

Profanity moderation in a React Native chat app

Finally the stable official support for React Hooks!

![create-react-app-img (1)](//images.ctfassets.net/1es3ne0caaid/6b4BASUhPUTMEXKLEI6crg/a73e5830fb475f5ed85956e9a7d823df/create-react-app-img__1_.png)

> Create React App is a tool built by developers at Facebook to help you build React applications. It saves you from time-consuming setup and configuration. You simply run one command and create react app sets up the tools you need to start your React project — [Guil Hernandez](https://teamtreehouse.com/library/using-create-react-app)

Create-React-App which is arguably one of the most popular boilerplates of all times with 67,000 stars and used by over 5,000 projects on GitHub released its third [version (3.0.0)](https://github.com/facebook/create-react-app/releases/tag/v3.0.0) a few days ago; with a whole lot of improvements. Even though we all know React does not require build dependencies, it however depends on a lot of important tools to make the magic we see when we run npm start. 

Some of these tools include Babel, Webpack and Jest and a host of others which handle making code lighter for production, all kinds of testing and helping code to be modular and generally ease the way we code.


> Over time, these tools get updated to newer versions and it starts to become a pain to keep up with Create-React-App and the new versions of its supporting tools.

So the team of 167+ contributors who dedicated their lives to the maintenance of our lovely boilerplate came up with this very powerful version. In this article, we shall quickly look at the new features in [Create-React-App v 3.0.0](https://github.com/facebook/create-react-app/releases/tag/v3.0.0)

## Support for React hooks

React introduced Hooks officially in [version 16.8](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) which allowed changes to the way components can be written introducing things like stateful logic in functional components usually meant for classes alone. This new development encourages writing purer components and more optimal React code. However, [there are rules](https://reactjs.org/docs/hooks-rules.html) set in place by the React team to prevent abuse of hooks and these rules are that:


- Hooks cannot be called from regular functions but only from functional components.
- Hooks are to be used only at the top level of your functional component and not inside nested functions or even conditional statement blocks.

In this new version, alongside the support of the use of Hooks, Create-React-App ships with an ESLint plugin called [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks) that enforces these rules and other syntax conventions of hooks. This way, builds are sure to fail when any rule is broken. You can [learn more about this plugin here](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app) and also [how to make your IDE display these linting output here](https://facebook.github.io/create-react-app/docs/setting-up-your-editor#displaying-lint-output-in-the-editor).

## Linting support for TypeScript

Aside from the React hooks linting, this new version also ships with support to lint TypeScript code through the [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint) plugin. You can see the list of rules enforced through this plugin in the link [here](https://github.com/facebook/create-react-app/blob/eee8491d57d67dd76f0806a7512eaba2ce9c36f0/packages/eslint-config-react-app/index.js#L89:L98) or setup your IDE to reflect them from [this guide](https://facebook.github.io/create-react-app/docs/setting-up-your-editor#displaying-lint-output-in-the-editor). You can easily use TypeScript in your React application with a line of command:

```
    yarn create-react-app my-typescript-app --typescript
```

## Browserlist support

You can now use the browserlist config in your React project’s `package.json` file to control the browser output of your JavaScript files. Another exciting thing is that one configuration can be used for the development environment and another entirely different one can be used for production. A typical example can be this:

```json
    "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
```

Here, the production build will target all browsers that cover more than 0.2% of global usage which is almost every browser, while the development build will only target the last versions of Chrome, Firefox and Safari.

With this kind of clarity, you can install a babel polyfill as a project dependency and then import it in your root JavaScript file and browserlist will now include them when needed. By default, browserslist default targets a almost all browsers in production, you can change the default settings though from the [guide here](https://github.com/browserslist/browserslist#queries). 

## PostCSS Normalize support

This new version ships with support for Normalize.css so to handle a reset CSS, by default PostCSS Normalize will be used. It will use your browserlist settings to produce styles that fit each browser covered in the config. Remember to always add `@import-normalize`at the beginning of any of your CSS files to activate it. Read more about this change [here](https://facebook.github.io/create-react-app/docs/adding-css-reset).

## Absolute imports with jsconfig.json and tsconfig.json

So in this new version, we can now have a less stressful way to access import paths for our Node path environments, we no longer have to be bothered about all the paths complexities with slashes that becomes clumsy at some point. We can now have absolute import paths for both JavaScript and TypeScript files alike, this makes for more presentable code. To set this up, create a `jsconfig.json` file for JavaScript (or `tsconfig.json` for TypeScript) in the root directory and copy in the code below:

```json
    {
      "compilerOptions": {
        "baseUrl": "src"
      },
      "include": ["src"]
    }
```

With this your import statement that was initially like this:

```
    import Sidebar from 'project_name/src/components/Sidebar';
```

Can be as simple as this:

```
    import Sidebar from 'components/Sidebar';
```

## Jest 24

This version also brings a Jest update to life. Jest is a unit testing framework that runs in a Node JS environment instead of a browser. From the old Jest version 23 to the new [version 24.7.1](https://jestjs.io/), this new Jest version ships with a lot of new features including improved asset messages and logs, support for TypeScript and a lot of bug fixes.

## Breaking changes

Some of these new features will introduce breaking changes to your project’s workflow and it is very important that you be aware.


- The `--watchAll=false` from Jest replaces the `--no-watch` flag which is now removed from the start script.
- Both the NODE_ENV and PUBLIC_URL status has now been changed into readonly.
- Custom functions has now been added to generate asset manifest.
- There are some differences in snapshot serialisation in Jest and it may lead to slight changes to your tests after upgrading.

The official changelog for this version can be found [here](https://github.com/facebook/create-react-app/releases/tag/v3.0.0).

## Conclusion

Now you have seen all the new features of the React popular boilerplate, my favorite is the browserlist support. Read the [breaking changes](https://github.com/facebook/create-react-app/releases/tag/v3.0.0) and upgrade your version today. Happy hacking!

Create React App just released its third version (3.0.0). A tool to help you build React applications, it saves you from time-consuming setup and configuration. This tutorial will explore all the new features of the React popular boilerplate, including the browserlist support.

Learn & Discover Pusher

How to add slash commands to a React chatroom

Lazy loading in Angular 7

How to show unread message count with React

How to build a serverless mobile app with React Native and AWS Amplify

Building ephemeral media messaging for Android

Introduction to error handling in Angular 7: Part 4 - Rollbar

Pusher Beams client API demo for iOS

Profanity moderation in a React Native chat app

New features of Create-React-App version 3.0

Products

Developers

Company

Connect