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.
Running FullStory in a React + Redux + TypeScript application.
Reactshoppe uses Create React App. FullStory is installed with the Browser SDK on NPM.
- You'll need to have node.js installed on your machine and you'll need a FullStory account.
- Once you've cloned this repo,
cdinto the root of the project (the same directory with thepackage.jsonfile). - Run
npm install - Copy the .env_sample file to .env and update the
REACT_APP_FULLSTORY_ORGwith your FullStory Org Id. Find out how to get your Org Id here.
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.
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.
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.
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.