Deprecation Notice

As of February 22nd, 2024, this repository will no longer have any maintenance performed, but will remain published in its current form for the time being. Please be sure to consider this when utilizing any of the information & code found within.

Reactshoppe

Running FullStory in a React + Redux + TypeScript application.

Reactshoppe uses Create React App. FullStory is installed with the Browser SDK on NPM.

Setup

• You'll need to have node.js installed on your machine and you'll need a FullStory account.
• Once you've cloned this repo, cd into the root of the project (the same directory with the package.json file).
• Run npm install
• Copy the .env_sample file to .env and update the REACT_APP_FULLSTORY_ORG with your FullStory Org Id. Find out how to get your Org Id here.

Getting Started

Run either npm start or yarn start to start up Reactshoppe on your machine (most likely running at http://localhost:3000/). FullStory will start recording right away. You can login to your account and look for your session. Sometimes it might take a minute for your very first session to show up.

Go Shoppe-ing

Reactshoppe is a very simple fake ecommerce site. You can add products to your cart from the product grid, edit your shoppe-ing cart, and checkout. No data is transacted and no products are purchased. This is all for fun.

Privacy Controls

During replay, you'll notice that the checkout form has billing and payment fields blocked.

These are FullStory's privacy controls in action. Learn more about how privacy controls work here.

Bonus Features

Every Redux action is logged to the FullStory console using the FS.log() function. You can view the action sequence in the FullStory Console during replay to help troubleshoot any issues that might be related to data flow:

• Actions running out of sequence
• Actions not occuring at all

This uses the recordAction middleware included in the source code.