Ensuring the recorder captures early network requests
The Meticulous recorder captures all fetch, XHR and web socket network requests and responses. These same responses are then used when Meticulous later simulates the session to test your code. To do this Meticulous needs to be the first script to execute so that it can override and wrap window.fetch and XMLHttpRequest before any other scripts execute, since these scripts may take references to the original version of the objects.
How do I ensure the Meticulous recorder script is the first script to execute?
Please see the instructions here for installing the recorder on your particular framework.
If you're using @alwaysmeticulous/recorder-loader then you'll need to wait for the promise returned by tryLoadAndStartRecorder to resolve before you initialise your app, trigger any network requests, or load any libraries that might take a reference to window.fetch or XMLHttpRequest. If this isn't possible, consider installing the recorder as a script tag instead.
If you're adding the Meticulous recorder as a script tag, then you'll need to make sure that the script tag is the first script in the <head> tag, before any other scripts, and that you don't add the async or defer attributes to the script tag.
How can I detect if I installed it correctly?
The best way is to look at the network tab of the browser in the environment where you've added the recorder snippet. You should see a GET request to https://snippet.meticulous.ai/v1/meticulous.js prior to any other network activity (as a note, the Meticulous snippet makes a call to Sentry when it initializes, so you might see that early on in the network tab as well).
Meticulous can also sometimes automatically detect if the script is not installed correctly. The script monitors for window.performance entries to detect network requests that occured before the recorder script initialized. If it detects any missed network requests when recording a session a warning will be shown on the page for that session. However this only detects cases where the network requests occur before the recorder script initializes, and doesn't detect cases where another script or library which initializes before the recorder script stores a reference to the native window.fetch or XMLHttpRequest and then later uses that stored reference to make a network request, without Meticulous being able to intercept it.
Why does Meticulous record and replay network requests?
Recording and replaying network requests and responses has a couple key advantages:
(1) Meticulous does not need to hit your backend when running the tests, so there's no risk of a test causing side effects. This means you don't need to set up seperate test user accounts.
(2) Meticulous can replay the same responses every time, so that the tests are deterministic and don't depend on the state of your backend. This allows Meticulous to safely compare the results of the test runs from before your code change and after your code change, while ensuring that the only differences spotted come from your change to the code: your tests are automatically idempotent. As your BE APIs change Meticulous will automatically swap out old tests for new ones, keeping them up to date.
Where can I reach out for support?
Reach out to eng@meticulous.ai and we'll be happy to help. You can also join our community discord.