React Failed to decode param

[mehdux]

Hi ,
I have a problem with express, when enter the following url : http://localhost:3000/% i get the error : Failed to decode param.
I use react.

URIError: Failed to decode param '/%' at decodeURIComponent (<anonymous>) at decode_param (/Users/yassir./workspace/OnboardingFleet/node_modules/webpack-dev-server/node_modules/express/lib/router/layer.js:172:12) at Layer.match (/Users/yassir./workspace/OnboardingFleet/node_modules/webpack-dev-server/node_modules/express/lib/router/layer.js:123:27) at matchLayer (/Users/yassir./workspace/OnboardingFleet/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:585:18) at next (/Users/yassir./workspace/OnboardingFleet/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:226:15) at expressInit (/Users/yassir./workspace/OnboardingFleet/node_modules/webpack-dev-server/node_modules/express/lib/middleware/init.js:40:5) at Layer.handle [as handle_request] (/Users/yassir./workspace/OnboardingFleet/node_modules/webpack-dev-server/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/Users/yassir./workspace/OnboardingFleet/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:328:13) at /Users/yassir./workspace/OnboardingFleet/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:286:9 at Function.process_params (/Users/yassir./workspace/OnboardingFleet/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:346:12)

i need the help. please help me.

Best regards

[krzysdz]

% in URIs is used as a part of an encoded character/byte and must be followed by 2 hex digits.

You can use encodeURIComponent() function in JavaScript to encode URI fragments containing characters not allowed in URIs. For example if you want to encode the % character you would get %25 as the return value of encodeURIComponent("%").

In your case the valid URI would be http://localhost:3000/%25.

If you want to read more about encoding URLs e.g. on Wikipedia

[mehdux]

Hi @krzysdz ,

Thank you for your reply
I tried to use it in my react code but the route is not captured except in the react dom route library file in node_modules.
do you have any idea how can i use the function in my react code?

Best regards.

[krzysdz]

The proper way to avoid this problem is not typing invalid URLs into the browser and using encodeURIComponent when dynamically inserting links from data with potentially illegal characters.

You shouldn't try to handle this error on the server side, because there is no correct way to handle invalid URLs.

[psociety]

And how are we expected to tell visitors that the URL is invalid if... expressjs explodes and doesn't let us handle the error?

"You shouldn't try to handle this error on the server side, because there is no correct way to handle invalid URLs." of course it is -> just 404 rather than displaying a stack trace with no option to disable it :S

I had to add this after npm i to properly handle the situation:
sed -i 's/err.status = err.statusCode = 400;/return "";/g' node_modules/express/lib/router/layer.js

[AMalfez]

Hi,
the best way that i can think of is to not use encoded characters like %, instead use something else like string, number or combination of both...

[mehdux]

It's good