Adam Wardecki

One of Checkly's strengths is the capability to monitor key transactions on your site. It'd be missed opportunity if we didn't reuse it to monitor our own product! But for some important flows that comes with a couple of pitfalls. In this post, we'll take a closer look at how we monitor one of our top key flows: signup.

First, a quick overview of the steps we want to perform. Here we are looking at a user signing up using email and password.

In addition, we'll want to remove the created account:

Go to the account deletion section of the settings page

Type in the account name to confirm the intent

Click the delete account button in the modal window

This is how the full script will look like when using Playwright:

Alright, we've created our check and tested it on the staging environment. Everything works great so we enable it for production, high-five ourselves for doing a great job, and move on to other tasks. A couple of hours pass, and suddenly we notice a little message from our CEO on Slack. Oops!

We at Checkly care a lot about product and marketing metrics. We have more than 450 paying customers and thousands of engineering teams who depend on us getting things right. So interpreting data, KPIs and input from various channels like our public roadmap is vital in keeping us connected to our users (so is talking to customers, one of our core values). Essentially, all this input comes together to inform us and enable us to identify and prioritize the next steps and future initiatives. Knowing this, it is no surprise that clean data is mission-critical.

Hannes' message reminded us we also need to filter out the check from the tracking tools. To do that, we'll need to alter the application code. This will vary depending on the choice of the analytics tools, but this is how we do it in our Vue frontend app where we use Segment as the events broker.

As you can see, we just skip the call to the analytics when the user is in our email domain. Other analytics methods (page, group, track in this case) are wrapped in a similar fashion.

There's one more thing. If you look at the URL we target with the E2E check, you'll notice it has the utm_source="monitoring" query param added. This will allow you to filter out traffic from your analytics solution of choice, like Google Analytics or Plausible. You can read more about it in this guide.

As you just saw, setting up proper E2E monitoring of the important flows is more about making sure that you don't mess up the Really Vital Metrics™ or flood your DB with ghost accounts.

What we described here is not a one-size-fits-all solution of course:

You may find out that your check takes too long and times out. If that's the case you could think about having a check for an account creation where the account deletion is handled via an API call (axios is available in the script runtime).

In case there are several checks that would use the account creation flow, you could think of introducing reusability with code snippets.

We hope this little guide will help you get set up monitoring your signups... without getting the CEO involved!

How (not) to test signup and keep your CEO happy

Detect

Communicate

Resolve

Monitoring as Code

Developers

Resources

Community

How (not) to test signup and keep your CEO happy