JavaScript and TypeScript: Best practice for maintaining an Error's origin

Question

JavaScript and TypeScript: Best practice for maintaining an Error's origin

Coming from a Java developer background, I am relatively new to JavaScript/TypeScript.

Is there a standard approach for handling and preserving the cause of an Error in JavaScript/TypeScript?

I aim to obtain a comprehensive stack trace when wrapping an Error within another, akin to how Java Exception stack traces work:

Message of exception 1
...
Caused by: Message of exception 2
...
Caused by: Message of the root exception

I attempted the following code, but err1 does not retain the reference to err2:

// CODE
try {
    try {
        throw new Error("Error no2");
    } catch (err2) {
        console.log("========================================");
        console.log(err2);
        throw new Error("Error no1");
    }
} catch (err1) {
    console.log("========================================");
    console.log(err1);
}

// CONSOLE OUTPUT
$ node test.ts 
========================================
Error: Error no2
    at Object.<anonymous> (/tmp/test.ts:3:15)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11
========================================
Error: Error no1
    at Object.<anonymous> (/tmp/test.ts:7:15)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11

Additionally, I have not found any property named cause in the Error class. While there is a stack property, modifying it may not be considered good practice.

Thank you!

javascript typescript error-handling stack-trace

Answer 1

Answer №1

New in 2021: There is a recent development in error management - the Error() constructor can now accept an options object as its second argument. This options object should include a cause property, which typically refers to another Error, although it is not mandatory.

For example

throw new Error('Outer Error', {cause: new Error('Inner Error')});

Compatibility

As of October 2021, this new constructor is supported by Firefox, Chrome, and Safari. To access the cause of an Error, you would need to examine its cause property. Additionally, Firefox provides additional information in the console, such as:

Uncaught Error: Outer Error
    <anonymous> debugger eval code:1
Caused by: Error: Inner Error
    <anonymous> debugger eval code:1

Currently, Edge does not recognize the second constructor property.

References

Mozilla documentation: https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/error

ECMAScript proposal: https://github.com/tc39/proposal-error-cause

Answer 2

New in 2021: There is a recent development in error management - the Error() constructor can now accept an options object as its second argument. This options object should include a cause property, which typically refers to another Error, although it is not mandatory.

For example

throw new Error('Outer Error', {cause: new Error('Inner Error')});

Compatibility

As of October 2021, this new constructor is supported by Firefox, Chrome, and Safari. To access the cause of an Error, you would need to examine its cause property. Additionally, Firefox provides additional information in the console, such as:

Uncaught Error: Outer Error
    <anonymous> debugger eval code:1
Caused by: Error: Inner Error
    <anonymous> debugger eval code:1

Currently, Edge does not recognize the second constructor property.

References

Mozilla documentation: https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/error

ECMAScript proposal: https://github.com/tc39/proposal-error-cause

Answer 3

Answer №2

I have always relied on a modified version of Kristian's solution mentioned here

class TraceableError extends Error {
  trace: Error;

  constructor(message?: string, innerError?: Error) {
    super(message); 
    this.trace = innerError;

    const actualProto = new.target.prototype;

    if (Object.setPrototypeOf) { Object.setPrototypeOf(this, actualProto); } 
    else { this.__proto__ = actualProto; } 
  }
}

To throw an error using this approach:

try {
    try {
        throw new Error("Error no2");
    } catch (err2) {
        console.log("========================================");
        console.log(err2);
        throw new TraceableError("Error no1", err2);
    }
} catch (err1) {
    console.log("========================================");
    console.log(err1);
}

Please note that if left unhandled, the error message in the trace section of the new error will not be displayed in the console.

Answer 4

I have always relied on a modified version of Kristian's solution mentioned here

class TraceableError extends Error {
  trace: Error;

  constructor(message?: string, innerError?: Error) {
    super(message); 
    this.trace = innerError;

    const actualProto = new.target.prototype;

    if (Object.setPrototypeOf) { Object.setPrototypeOf(this, actualProto); } 
    else { this.__proto__ = actualProto; } 
  }
}

To throw an error using this approach:

try {
    try {
        throw new Error("Error no2");
    } catch (err2) {
        console.log("========================================");
        console.log(err2);
        throw new TraceableError("Error no1", err2);
    }
} catch (err1) {
    console.log("========================================");
    console.log(err1);
}

Please note that if left unhandled, the error message in the trace section of the new error will not be displayed in the console.

Answer 5

Answer №3

One feature that I find very useful is the Error cause option. Here's a snippet of my text building function utilized by loggers:

export function getErrorMessageWithCausedByParts(err: Error, stack=true): string {
  const doNewLines = stack;
  let txt = "";
  
  if(stack) {
    txt+=err.stack;
  } else {
    txt+=err.message;
  }

  if(err.cause != null) {
    if (err.cause instanceof Error) {
      if(doNewLines) {
        txt+="\n[caused by] ";
      } else {
        txt += " [caused by] ";
      }
      
      txt += getErrorMessageWithCausedByParts(err.cause, stack);
    } else {
      txt += `[Unknown cause type?!]: ${JSON.stringify(err.cause)}`
    }
  }

  return txt;
}

Note: to access the cause option in the Error object, make sure to specify a newer ES version in your tsconfig.json file

"compilerOptions": {

    "lib": ["es2022"]

    ...
}

Answer 6

One feature that I find very useful is the Error cause option. Here's a snippet of my text building function utilized by loggers:

export function getErrorMessageWithCausedByParts(err: Error, stack=true): string {
  const doNewLines = stack;
  let txt = "";
  
  if(stack) {
    txt+=err.stack;
  } else {
    txt+=err.message;
  }

  if(err.cause != null) {
    if (err.cause instanceof Error) {
      if(doNewLines) {
        txt+="\n[caused by] ";
      } else {
        txt += " [caused by] ";
      }
      
      txt += getErrorMessageWithCausedByParts(err.cause, stack);
    } else {
      txt += `[Unknown cause type?!]: ${JSON.stringify(err.cause)}`
    }
  }

  return txt;
}

Note: to access the cause option in the Error object, make sure to specify a newer ES version in your tsconfig.json file

"compilerOptions": {

    "lib": ["es2022"]

    ...
}

JavaScript and TypeScript: Best practice for maintaining an Error's origin

Answer №1

Answer №2

Answer №3

Similar questions

Is it feasible to pre-load external websites using JavaScript?

Navigating websites: Clicking buttons and analyzing content

Steps for removing routing in Angular 2 after setting the folder as a dependency for another project

Display tables based on selected changes with dynamically changing options

Retrieving JSON data value without a key using AngularJS

What is the best way to choose a tag from an app within components or views?

Is the length of a complex match in Angular JS ng-if and ng-repeat greater than a specified value?

I am seeking to modify the CSS of the parent component upon the loading of the child component in Angular

Strategies for extracting special character codes from API data within a React functional component

Steps to Extract the key value from the parseJson() function

Is it true that document.execCommand only works with buttons and not links?

Strange behavior: JS object values disappear when accessed statically

Out of Sync Promise Chain

Traverse a computed attribute in Vue.js

The state initialization process is beginning with an [object Object] being passed into the setState function

Need help accessing data from an API using Axios.post and passing an ID?

Is it possible to retrieve a variable from a geojson file using Vue 3 and Vite?

Is there a way for me to direct to a different HTML page once I click on a certain data point?

Exploring point clouds with three.js and NSF OpenTopography data: What's the best way to configure the camera and implement a controls library for seamless data navigation?

Using jQuery to decrease the size of a div element containing an image