diff --git a/plugins/toolbox/src/components/Encoders/UrlEncode.tsx b/plugins/toolbox/src/components/Encoders/UrlEncode.tsx
index 5034096..dd848ba 100644
--- a/plugins/toolbox/src/components/Encoders/UrlEncode.tsx
+++ b/plugins/toolbox/src/components/Encoders/UrlEncode.tsx
@@ -7,11 +7,16 @@ export const UrlEncode = () => {
   const [mode, setMode] = React.useState('Encode');
 
   useEffect(() => {
-    if (mode === 'Encode') {
-      setOutput(encodeURI(input));
-    } else {
-      setOutput(decodeURI(input));
+    let url = '';
+    let errorMessage = '';
+    try {
+      url = mode === 'Encode' ? encodeURI(input) : decodeURI(input);
+    } catch (error) {
+      errorMessage = `couldn't ${
+        mode === 'Encode' ? 'encode' : 'decode'
+      } URL...`;
     }
+    setOutput(url || errorMessage);
   }, [input, mode]);
 
   return (