OpenReplay
Navigate back to the homepage
BLOG
Browse Repo
Back

Integrating OpenReplay with Slack in a Web Application

Samaila Bala
September 12th, 2021 · 3 min read

Session replay is a powerful tool to be able to get user’s insights from a web application. It provides a way to replay a user’s journey in a web application and investigate errors the user faced while using the application. OpenReplay is an open-source session replay tool that makes it easier to replay user sessions and troubleshoot issues. In this article, we will be looking at how to share sessions recorded by OpenReplay in a web application with teammates on Slack.

This tutorial assumes you know how to deploy OpenReplay to a platform of your choice, if not you can follow any of the guides listed here to get started. You will also need the below elements to follow along:

  • Knowledge of JavaScript and React
  • Node.js v12 or greater
  • npm
  • Access to a Slack workspace

Creating a Web Application

We will be creating a basic web application to fetch data from an API using React. To get started open a terminal and run the code below

1npx create-react-app sample-app

The above command bootstraps an application with Create React App. After the process is complete. Navigate to the created app folder and run the command below to start the application

1npm start

We will be creating a little application that guesses the age of a user based on the name. Open up the App.js file in a code editor and replace the code with the code below

1import React, { useState } from 'react';
2import './App.css';
3function App() {
4 const [name, setName] = useState('');
5 const [age, setAge] = useState(0);
6 const [isLoading, setIsLoading] = useState(false);
7 const [isError, setIsError] = useState(false);
8 const handleSubmit = async () => {
9 try {
10 setIsLoading(true);
11 setIsError(false);
12 const response = await fetch(`https://api.agify.io/?name=${name}`);
13 const { age } = await response.json();
14 setIsLoading(false);
15 if (age === null) {
16 setIsError(true);
17 throw new Error('Error fetching age');
18 }
19 setAge(age);
20 return;
21 } catch (error) {
22 setIsLoading(false);
23 setIsError(true);
24 console.log(error);
25 throw new Error('Error getting data');
26 }
27 };
28 return (
29 <main>
30 <h1> Guess your Age</h1>
31 <input
32 type="text"
33 aria-label="Enter your name"
34 placeholder="Enter your name"
35 value={name}
36 onChange={(e) => setName(e.target.value)}
37 required
38 />
39 <button onClick={handleSubmit}>Submit</button>
40 {isLoading && <p>Guessing age...</p>}
41 {!isLoading && isError && <p>Error guessing age</p>}
42 {!isLoading && age > 0 && age !== null && (
43 <p>Your are {age} years old.</p>
44 )}
45 </main>
46 );
47}
48export default App;

The code above accepts a value as input and when a user clicks on the submit button. It makes a call to an api to guess the age based on the input available. Save and view the application in your browser.

Demo Application

Open Source Session Replay

Debugging a web application in production may be challenging and time-consuming. OpenReplay is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue. It’s like having your browser’s inspector open while looking over your user’s shoulder. OpenReplay is the only open-source alternative currently available.

OpenReplay

Happy debugging, for modern frontend teams - Start monitoring your web app for free.

Connecting OpenReplay to a Web Application

Now that we have a working application the next step is integrating OpenReplay so we can start replaying the activities performed by users on the application. OpenReplay provides a JavaScript library that makes integration into web applications easy. Open a terminal in the root of your application and run the code below to install the OpenReplay SDK

1npm i @openreplay/tracker

After installation :

  1. Go to your deployed OpenReplay instance and click on “Add New Project” null

  2. Enter the name of the project in the modal that comes up and click on Add to create the project null

  3. Click the Settings icon to go to Preferences

null

  1. Select Projects
  2. Click on the “Tracking code” button for the Project created
  3. Copy the code in the usage section
  4. Open the App.js file and paste the copied code before the begininning of the App function

Our App.js file should now look like the code below

1import React, { useState } from 'react';
2import Tracker from '@openreplay/tracker';
3import './App.css';
4
5const tracker = new Tracker({
6 projectKey: "your project key",
7 ingestPoint: "your injest point url",
8});
9tracker.start();
10function App() {
11 const [name, setName] = useState('');
12 const [age, setAge] = useState(0);
13 const [isLoading, setIsLoading] = useState(false);
14 const [isError, setIsError] = useState(false);
15 const handleSubmit = async () => {
16
17//... the rest of the original code

The next step after this is deploying your app as OpenReplay’s tracking only works on a live environment, so commit your code to a repository and deploy the app to platforms like Netlify and Vercel (here is a quick tutorial on how to deploy your app on Netlify)

After deploying, visit the deployed app and perform some operations so OpenReplay can track and record the session.

Note: You have to close the window or tab of the deployed app when you’re done so OpenReplay can finish recording that particular session.

After recording a session, visit your OpenReplay dashboard to check the recorded session, it usually takes about 4 minutes after terminating a session for it to reflect on the OpenReplay dashboard so be patient if you don’t see the recorded session immediately.

null

Connecting OpenReplay to Slack

At this point, we have successfully integrated OpenReplay into our application and can now replay user sessions to view actions performed and errors that occurred. The next step is connecting OpenReplay with Slack so you can share these recorded sessions with teammates in a Slack group.

  1. Sign in to your Slack workspace and go to the app creation page

  2. Click on “Create new app”

  3. Select “From scratch” on the modal that pops up null

  4. Enter “OpenReplay” as the name of the app

  5. Select the workspace and save

  6. Select Incoming Webhooks from the sidebar of the created app

  7. Switch on the “Activate Incoming Webhooks” null

  8. Click on “Add new Webhook” and select the channel to share the recorded sessions to

  9. Click “Allow” and copy the webhook URL

  10. Go to OpenReplay dashboard then ‘Preferences > Integration’

  11. Select Slack and paste the copied Webhook URL before clicking ‘Add’

  12. You should get a welcome message similar to the screenshot below null

We are done connecting Slack to OpenReplay to share a recorded session to a Slack Group:

  1. Go to the OpenReplay dashboard
  2. Click on the recorded session
  3. Click on the Share button on the top right corner of the page

null

You can now share recorded sessions with team mates in a Slack group. The message will be similar to the screenshot below.

null

Conclusion

In this article, we’ve looked at how to connect OpenReplay to a web application and integrate slack with OpenReplay. This makes it easy for you to share recorded sessions of users who use your application with teammates on slack to foster collaboration and help resolve issues quickly.

OpenReplay also has a supportive community on Slack to help you with issues you come across.

More articles from OpenReplay Blog

Real-time Chat Application with Firebase and Material UI

Building a real-time chat application has never been this easy. Learn how to use React and Material UI coupled with Firebase to craft a real-time chat.

September 8th, 2021 · 5 min read

Virtualizing Large Data Lists with react-window

Rendering large dataset in the DOM without the right tools can be expensive, learn how to use react-window to simply this task

September 2nd, 2021 · 5 min read
© 2021 OpenReplay Blog
Link to $https://twitter.com/OpenReplayHQLink to $https://github.com/openreplay/openreplayLink to $https://www.linkedin.com/company/18257552