My objective: Test out my error handling functionality.

Temporary solution: Have a custom route: /error, which contains code which purposefully produces fatal error.

var a = undefined;
a.b.c // Breaks.

The above works, but I can't use it to test production site as the page is not required. I was looking for a way to test it via the browser. I tried simply adding" throw new Error("Custom error thrown here") to the console. That doesn't actually break it during runtime.

I tried adding a break point and adding the same code: throw new Error("Custom error thrown here"). That didn't work either.

Any other easier ways to do this rather than the above?

I was looking for a way where I can do it via browser only.

Thanks.

My objective: Test out my error handling functionality.

Temporary solution: Have a custom route: /error, which contains code which purposefully produces fatal error.

var a = undefined;
a.b.c // Breaks.

The above works, but I can't use it to test production site as the page is not required. I was looking for a way to test it via the browser. I tried simply adding" throw new Error("Custom error thrown here") to the console. That doesn't actually break it during runtime.

I tried adding a break point and adding the same code: throw new Error("Custom error thrown here"). That didn't work either.

Any other easier ways to do this rather than the above?

I was looking for a way where I can do it via browser only.

Thanks.

• javascript
• reactjs
• testing
• error-handling

• add debug; keyword – xdeepakv Commented Oct 16, 2021 at 16:59
• @xdeepakv Not ideal for production. – Nevin Commented Oct 18, 2021 at 2:27

7 Answers 7

If I got your question right, this is How you can do it from the console:

var script_tag = document.createElement('script');
script_tag.type = 'text/javascript';
script_tag.text = 'throw new Error("Custom error thrown here")';
document.body.appendChild(script_tag);

Or if you want you can trigger it on click:

var script_tag = document.createElement('script');
script_tag.type = 'text/javascript';
script_tag.text = 'window.document.onclick = function() { throw new Error("Custom error thrown here")}';
document.body.appendChild(script_tag);

And then you click anywhere on the page, to throw the error;

You did not clearly mention how and where the error should be thrown. I will assume that you can use a modified copy of your JavaScript file to throw errors. The modified file will reside on your computer and only be used when you're using Chrome developer tools. This feature is called Local Overrides. The steps are as follows:

• Open the webpage
• Open Chrome developer tools for that webpage
• In Sources panel go to Overrides tab
• Click Select folder for overrides and choose a folder on your computer
  • A warning appears on the webpage which reads "DevTools requests full access to ..." which you must allow
• In Sources panel go to Page tab
• Locate the file in which you need to inject the "throw error" code
• Right click and choose Save for overrides

Now you can edit the copy of the file on your computer or from within developer tools. Insert the code that produces the error at the desired location. When you reload the page with developer tools open, Chrome will load the local copy of the JavaScript file and throw the error. The error thrown that way will contain the context from where it originated e.g. call stack. If the developer tools are closed then live copy will be used.

I would use the exec function which actually takes string and runs the code within at compile time.

exec('a.b.c')

You won't be able to throw an error inside your application from the console, since you are out of scope of the app.

Having said that, one slightly awkward way you could do this is by adding a breakpoint at the start of the javascript file.

Reload the page and your app will pause at the breakpoint - you can then modify the code as you need - like adding a throw new Error("something...") - and save your edits.

Then allow the code to run and you will see your error.

A downside is if you reload the changes will be gone, but I believe it's as close as you can get to modifying code at runtime.

Add this code to your production code

window.addEventListener('err', () => {
  throw new Error('break it');
})

and when you want to create an error simply

dispatchEvent(new Event('err'))

in the console

You can use a global variable, which is accessible from your app and from debug console.

if (window.shouldThrow) {
    throw new Error("Custom error thrown here");
}

This way you can turn on/off the exception throwing using the window.shouldThrow variable.

Try this way to catch error detail on run time

try 
{
   var a = undefined;
   a.b.c // Breaks.
} 
catch ( e )
{
   alert("Error: " + e.description );
}