Feat: add more information to serializeError

[Lemonexe]

Description

Followup to #16652

• add stackTrace to the new util serializeError
• redefine .toString() on TrezorError (a.k.a. TypedError)
  • currently it uses Error.prototype.toString() which omits the very important code property

ℹ️ when sending the error to sentry, it might get clipped. Different sources say different max size so idk, but it's typically the beginning of stack trace that's most pertinent.

Related Issue

Resolve #16584 (followup)

Logs:

This can be tested with the FW hash check.
I placed throw ERRORS.TypedError('Runtime', 'Mock Error Description') at this line.

Looking into redux state.device.selectedDevice.authenticityChecks.firmwareHash.errorPayload:
Desktop:

{"message":"Error (code: Runtime): Mock Error Description","stackTrace":"Error: Mock Error Description
    at Module.TypedError (/trezor-suite/packages/suite-desktop/dist/app.js:64291:37)
    at Device.checkFirmwareHash (/trezor-suite/packages/suite-desktop/dist/app.js:68745:63)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Device.checkFirmwareHashWithRetries (/trezor-suite/packages/suite-desktop/dist/app.js:68682:22)
    at async Device._runInner (/trezor-suite/packages/suite-desktop/dist/app.js:68533:5)"}

Web:

{"message":"Error (code: Runtime): Mock Error Description","stackTrace":"TrezorError@webpack://@trezor/connect-iframe/../connect/src/constants/errors.ts?:103:5
TypedError@webpack://@trezor/connect-iframe/../connect/src/constants/errors.ts?:113:37
checkFirmwareHash@webpack://@trezor/connect-iframe/../connect/src/device/Device.ts?:640:63
async*checkFirmwareHashWithRetries@webpack://@trezor/connect-iframe/../connect/src/device/Device.ts?:577:33
_runInner@webpack://@trezor/connect-iframe/../connect/src/device/Device.ts?:428:16
async*run@webpack://@trezor/connect-iframe/../connect/src/device/Device.ts?:306:10
handshake@webpack://@trezor/connect-iframe/../connect/src/device/Device.ts?:239:22
async*onDeviceConnected/<@webpack://@trezor/connect-iframe/../connect/src/device/DeviceList.ts?:216:22
invokeCallback@webpack://@trezor/connect-iframe/../../node_modules/es6-promise/dist/es6-promise.js?:408:15
then/<@webpack://@trezor/connect-iframe/../../node_modules/es6-promise/dist/es6-promise.js?:176:14
flush@webpack://@trezor/connect-iframe/../../node_modules/es6-promise/dist/es6-promise.js?:128:13
MutationCallback*useMutationObserver@webpack://@trezor/connect-iframe/../../node_modules/es6-promise/dist/es6-promise.js?:95:18
@webpack://@trezor/connect-iframe/../../node_modules/es6-promise/dist/es6-promise.js?:152:19
@webpack://@trezor/connect-iframe/../../node_modules/es6-promise/dist/es6-promise.js?:11:27
@webpack://@trezor/connect-iframe/../../node_modules/es6-promise/dist/es6-promise.js?:13:2
../../node_modules/es6-promise/dist/es6-promise.js@http://localhost:8000/js/core.js:4277:1
__webpack_require__@http://localhost:8000/js/core.js:7231:41
@webpack://@trezor/connect-iframe/../../node_modules/events/events.js?:1:60
../../node_modules/events/events.js@http://localhost:8000/js/core.js:4287:1
__webpack_require__@http://localhost:8000/js/core.js:7231:41
@webpack://@trezor/connect-iframe/../connect/src/core/index.ts?:5:83
../connect/src/core/index.ts@http://localhost:8000/js/core.js:1137:1
__webpack_require__@http://localhost:8000/js/core.js:7231:41
@http://localhost:8000/js/core.js:7546:55
"}

[Lemonexe]

ℹ️ Error.prototype.toString returns only ${this.name}: ${this.message}, but code is an important info for debug (see definition above in this file)

[Lemonexe]

Notes for context for anyone very curious about Javascript + Jest error handling internals:

I tried this, but with no effect, because this is just an initial state, it gets rewritten by Error.captureStackTrace:

beforeAll(() => {
    Object.defineProperty(Error.prototype, 'stack', { get: () => 'Mock Stack Trace', configurable: true });
});
afterAll(() => delete Error.prototype.stack);

So I tried this. In Jest you can mock almost anything. But not Error prototype, as it is used internally by Jest and it bugs out 🤣 This does do the job, but we cannot take this liberty specifically for error handling.

beforeAll(() => {
    jest.spyOn(Error, 'captureStackTrace').mockImplementation(error => {(error as Error).stack = 'Mock Stack Trace'; });
});
afterAll(() => {jest.restoreAllMocks(); });

You can play with this in Firefox browser console. In Chrome, the override still does not take effect. Interesting! 🤔

class CustomError extends Error { captureStackTrace() {console.log('YES, I have been called!!'); this.stack = 'CUSTOM mock stack';} }
Error.prototype.captureStackTrace = function() {this.stack = 'ERROR mock stack'; console.log('I have become Error, destroyer of code.')}

Error.prototype.captureStackTrace() // Lolwut? This is needed to somehow "activate" the overriden prototype method. The override does not take effect until you do this!

try{ throw new CustomError('Something happnd') } catch(err) { console.log(err.stack) } // now the override sets stack correctly, but "I have become Error" does not show!?