✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Issue with validating a slug causing browser to freeze

14 replies
Last updated: May 26, 2022
Hi,I am having some issues with the studio when validating a slug.
This is the code:

    {
      name: "slug",
      type: "slug",
      title: "Slug",
      validation: (Rule) =>
        Rule.custom((slug) => {
          if (typeof slug === "undefined") {
            return "Slug is required.";
          }
          const regex = /^[a-z]([a-z0-9/]*(?:-[a-z0-9]+)*)+$/;
          if (regex.test(slug.current)) {
            return true;
          }
          return "Not a valid slug.";
        }),
    },
The studio blows up the browser (completely freezes). Not sure how to debug it, and I didn't find a pattern when it blows up. It does not blow up, if the slug is simply invalid. More likely, it blows up, if the slug is invalid and gets a bit longer. But I have no idea.
May 26, 2022, 2:35 PM
But it is sure this code, because removing it fixes the freezing.
May 26, 2022, 2:49 PM
Hi User. Can you give an example of a slug that freezes the browser (and which browser/OS you’ve tried)?
May 26, 2022, 3:45 PM
Is it possible also that it's a semantic thing, and it's interpreting the semicolon as part of the regex?
I know that's not typically the case (like you have to take extra steps to include it as part of a pattern, probably for reasons of making sure it still treats it normally) but I thought it worth mentioning because no examples I can find seem to include it
May 26, 2022, 3:49 PM
The semicolon should be fine as it’s outside of the regex boundaries
I’m curious about the capturing and non-capturing groups and what they’re for; I can’t think of why you’d need to specify them as the only anticipated goal is a match (or not).
May 26, 2022, 3:56 PM
I figured as much with the slash; they aren't designed to not obey the rules at large, after all. Just trying to think outside the box 😃
I tested the pattern itself in a linter and it seems to be a viable format (it appears that way anyway, just seeing if there was a goof)

I have to imagine anything freeze-level would have logged an error in the console
May 26, 2022, 4:07 PM
This blew it up as an example:
lorem-ipsum-lorem-ipsum-lorem-ipsum-
It looks as though it is doing some heavy processing when the string becomes long and if it is invalid.

Yeh, the regex might not be best. Though I did not write it.
😄
May 26, 2022, 6:36 PM
I can't see anything in the console, because the browser isn't responding.
May 26, 2022, 6:40 PM
I have tried it with another slug regex I copied from stackoverflow:
^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$
Still crashing. The regex may not be the problem.
May 26, 2022, 6:46 PM
Or maybe it is, but then it shouldn't crash.
May 26, 2022, 6:48 PM
Can you say in words what you want the regex to permit?
May 26, 2022, 6:50 PM
From your first example, it looks like you want slugs that contain lowercase letters, numbers, or dashes, but they must start with a lowercase letter or number. Is that accurate?
May 26, 2022, 6:51 PM
Not sure why, but apparently it was the regex.I wrote a different regex:

^[a-z][a-z0-9]*((\/|-)?[a-z0-9])*$
Now it is working.
Can have lowercase letters or numbers, but it can't start with a number. And allow
/
or
-
between letters/numbers.
May 26, 2022, 7:12 PM
Thank you for helping!
May 26, 2022, 7:13 PM
No problem! Glad you got it working!
May 26, 2022, 7:13 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?