Issue with validating a slug causing browser to freeze
14 replies
Last updated: May 26, 2022
A
Hi,I am having some issues with the studio when validating a slug.
This is the code:
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.
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.";
}),
},May 26, 2022, 2:35 PM
A
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
V
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
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).
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
V
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
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
A
This blew it up as an example:
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.
😄
lorem-ipsum-lorem-ipsum-lorem-ipsum-
Yeh, the regex might not be best. Though I did not write it.
😄
May 26, 2022, 6:36 PM
A
I can't see anything in the console, because the browser isn't responding.
May 26, 2022, 6:40 PM
A
I have tried it with another slug regex I copied from stackoverflow:
Still crashing. The regex may not be the problem.
^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$
May 26, 2022, 6:46 PM
A
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
A
Not sure why, but apparently it was the regex.I wrote a different regex:
Now it is working.
Can have lowercase letters or numbers, but it can't start with a number. And allow
^[a-z][a-z0-9]*((\/|-)?[a-z0-9])*$
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
A
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.