Vue router path dynamic param with empty parenthesis doesn't match corresponding url

[thomaspaillot]

Describe the bug

Vue router route path can contain parenthesis at the end of a dynamic param like this /:projects()/all and when you use path-to-regexp to match a potential url the regex generated by path-to-regexp doesn't work because of the parenthesis.

Steps to reproduce

import pathToRegexp from 'path-to-regexp';

'/my-project-name/all'.match(pathToRegexp('/:projects()/all')) // return false
'/my-project-name/all'.match(pathToRegexp('/:projects(\\S+)/all')) // return true
'/my-project-name/all'.match(pathToRegexp('/:projects/all')) // return true

Environment

• BugSnag Performance library version: 2.6.0
• BugSnag Vue Router Performance library version: 2.4.0
• Browser framework version (if any):
  • Vue: 3.4.27

Example Repo

Reproduction

Possible fix

I tried to use createRouterMatcher function from vue-router and it seems to works (I didn't flatten the routes as getRoutes() was already a flat array in my case):

import { START_LOCATION, createRouterMatcher } from 'vue-router';

const matcher = createRouterMatcher(router.getRoutes(), { strict: false, sensitive: false });

function resolveRoute(url) {
  try {
    const location = matcher.resolve({ path: url.pathname }, START_LOCATION);
    return location.matched.length > 0 ? location.matched[0].path : 'no-route-found';
  } catch (err) {
    return 'no-route-found';
  }
}

[clr182]

Hi @thomaspaillot

By default, path-to-regexp does not handle paths with parentheses unless they are properly escaped or used in a way that the library expects.

Sanitizing your paths with the use of escape characters is the recommended approach to handling pattern matches on params for pathToRegexp

Alternatively you could implement some custom parsing logic if the use of special characters are unavoidable.

const projectId = encodeURIComponent('/:projects()/all');
this.$router.push(`/projects/${projectId}/all`);

[thomaspaillot]

It's Nuxt that is generating the path automatically so I cannot change this unfortunately. I'll use my custom provider if you're not willing to change this but keep in mind that this affects all Nuxt users.

[mclack]

Hi @thomaspaillot

We've added a task to our backlog to investigate this further and consider solutions. We'll make sure to post any updates on this thread.