The Problem
We have a React JS application which sometimes exhibits issues on certain browsers or computers.
Currently we are prelaunch and have no customers. We also do not have a dedicated QA engineer.
One common issue that we face is that non-technical internal users encounter bugs using the application. They are well train enough to report the OS, browser vendor & version and any plugins/extensions they have as well as screen shots and a description of what they were doing and what they did before that. Unfortunately it's common that the issue they face isn't reliably reproducible even on their own machine using the same browser - let alone on a dev's workstation using a different set up.
We utilise browser stack to manually test the app. When these users encounter these issues we capture the reports in bug tracking software e.g JIRA.
I acknowledge that we do lack sufficient automation testing and this is something that we are working towards improving.
The main issue is that the developers and the business internal users both get frustrated by the situation - which is that the business users encounter bugs which they report and the development team often are reluctant to spend too much timing looking at issues they can't reproduce.
I am relatively experienced in backend engineering where we'd typically try to capture the state of a running application in conjunction with copies of databases, log files, immutable docker images etc to try to reproduce issues. I am not very knowledgable about frontend react engineering - although fundamentally my gut tells me that the key to reproducing and debugging such issues isn't really at heart that different - we'd benefit from the same environment (OS, browser vendor and version, extensions, plugins, settings), same version of the application, a copy of logs, if possible a copy of application state.
The frontend team haven't really yet put forth any suggestions which would appear to help us improve this situation.
Some Considerations I've Made
- Integration a product like https://sentry.io/welcome/ with specific React support to capture logs about errors.
- Integrating Percy.io https://percy.io/ again with react support into our PR workflow in github.
- Making heavier use of browser stack.
- Start getting more automation tests in place
- Adjust our attitude fundamentally when approaching these "unreproducible" issues.
I was wondering whether anyone can offer other suggestions. Is there any type of plugin/extension/product that can help debug a modern javascript application using ReactJS by capturing information about the user agent, OS, application state, component information etc that might help a non-technical user report issues in a better fashion and a technical user to gain extra runtime information to help determine what the issues are. Perhaps something that also captures the state of the console logs, warnings, errors, HTTP requests etc.
