OpenReplay
Navigate back to the homepage
BLOG
Browse Repo
Back

Integrating OpenReplay with GitHub

Samaila Bala
November 5th, 2021 · 3 min read

Recreating a user’s journey when they use your application goes a long way in resolving issues and improving the user experience. OpenReplay is a session replay tool that lets you see what your users do while using your application.

In this article, we will be looking at how to integrate OpenReplay with GitHub so you can create issues quickly from errors encountered by users in your application.

To follow along with this article, you’ll need to have a deployed OpenReplay instance. You can follow along with the guides listed here or use the SAAS solution. You’ll also need to have the following:

  • Knowledge of JavaScript and React
  • Node.js v12 or greater
  • npm
  • GitHub Account

Creating a Web Application

We will be creating a demo application using Create React App. To get started, open a terminal and run the code below:

1npx create-react-app sample-app

The code above creates a React application called sample-app. It is a basic React application. Navigate to the sample-app directory and run the line below to start the application

1npm start

We will be creating a basic counter application to increase and decrease the value of a number. Open the App.js file and paste the code below:

1import { useState } from 'react';
2import logo from './logo.svg';
3import './App.css';
4function App() {
5 const [counter, setCounter] = useState(0);
6 const handleClick = (operation = '+') => {
7 if (operation === '-') {
8 if (counter < 0) {
9 throw new Error('Number is less than zero');
10 }
11 setCounter((prevState) => (prevState -= 1));
12 return;
13 }
14 setCounter((prevState) => (prevState += 1));
15 };
16 return (
17 <div className='App'>
18 <header className='App-header'>
19 <img src={logo} className='App-logo' alt='logo' />
20 <p>
21 Edit <code>src/App.js</code> and save to reload.
22 </p>
23 <a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
24 Learn React
25 </a>
26 </header>
27 <main>
28 <button onClick={() => handleClick('-')}>-</button>
29 <p>{counter}</p>
30 <button onClick={() => handleClick()}>+</button>
31 </main>
32 </div>
33 );
34}
35export default App;

The code above allows a user to increase or decrease the value of a count with a catch. If the user decreases the value of count below zero, it throws an error.

null

Connecting OpenReplay to an Application

After creating the application, the next step is connecting OpenReplay to the application to start monitoring user events. OpenReplay provides a JavaScript library to help integrate OpenReplay into your web application. Run the code below to install the application:

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 { useState } from 'react';
2import logo from './logo.svg';
3import './App.css';
4import Tracker from '@openreplay/tracker';
5const tracker = new Tracker({
6 projectKey: 'O6Q7rBQdbxGMWgIeL7rd',
7 ingestPoint: 'https://app.openreplaytutorial.ga/ingest',
8});
9tracker.start();
10function App() {
11// rest of the original code

OpenReplay doesn’t work in dev environments, so you’ll need to push your code to a repository and deploy it to a server for the tracking to work. I recommend platforms like Netlify and Vercel (here is a quick tutorial on deploying your app on Netlify).

After a successful deployment, visit your deployed application and perform operations for a session to be recorded. Close the browser tab when done to stop recording the session. Visit your OpenReplay instance dashboard to view the recorded session afterwards. Note that after terminating a session, it usually takes about 4 minutes to reflect on the OpenReplay dashboard, so be patient if you don’t see the recorded session immediately.

null

Integrating OpenReplay with GitHub

You should be able to view a session recording on your OpenReplay Dashboard at this point. In this section, we will be looking at how to create a Github issue for a session recording.

  1. Go to Github and login

  2. After Authentication, go to Personal Access Tokens

  3. Enter a note for remembering the use of the token

  4. Select an expiry date

  5. Select repo:status, repo_deployment,public_repo, read:user, and user:email scopes null

  6. Click on Generate token null

  7. Copy the generated token to your clipboard

  8. Go to your OpenReplay dashboard then ‘Preferences > Integration’

  9. Click on Github

  10. Paste the copied generated token in the modal that opens up null

We’ve successfully integrated Github into OpenReplay!

The next step is creating an issue from a recorded session.

  1. Go to your OpenReplay dashboard

  2. Click on a recorded session

  3. Click on the Report issue button on the top right corner of the page. null

  4. Fill the details on the modal that opens

  5. Click on Create

After reporting the issue, go to the Issues page of your repository on Github and you’ll see a new issue with the details you provided and a link to OpenReplay like the screenshot below.

null

Conclusion

In this article, we’ve learned how to Integrate OpenReplay in an application so a developer can replay the actions a user took that resulted in an error. We’ve also looked at creating Github issues from OpenReplay sessions to foster collaboration and resolve errors with your team members.

As earlier stated, the ability to recreate the steps a user took that resulted in an error goes a long way in debugging issues, making OpenReplay an excellent tool to have in your arsenal as a developer. OpenReplay also has a supportive community on Slack to help you with issues you come across.

More articles from OpenReplay Blog

Beginner’s Guide to SWR: Data Fetching in React

Learn about SWR and what it means for your HTTP-needs

October 27th, 2021 · 3 min read

Jamstack: A new way to think about web development, build, and delivery

JAMStack is here to stay, learn what it means to develop applications without a back-end

October 27th, 2021 · 7 min read
© 2021 OpenReplay Blog
Link to $https://twitter.com/OpenReplayHQLink to $https://github.com/openreplay/openreplayLink to $https://www.linkedin.com/company/18257552