[Player] payload without "message" property crashes the Player when trying to show Step Details

[BloodyRain2k]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I acknowledge that I will attach a full debug log, otherwise the issue will be closed with no response.

Environment information

  System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 13.54 GB / 31.73 GB
  Binaries:
    Node: 14.21.1 - C:\Program Files\NodeJS\node.EXE
  npmPackages:
    @cypress/angular:  0.0.0-development
    @cypress/mount-utils:  0.0.0-development
    @cypress/react:  0.0.0-development
    @cypress/react18:  0.0.0-development
    @cypress/svelte:  0.0.0-development
    @cypress/vue:  0.0.0-development
    @cypress/vue2:  0.0.0-development
    @fluentui/react: ^8.20.1 => 8.48.0
    @fortawesome/fontawesome-svg-core: ^1.2.35 => 1.2.36
    @fortawesome/free-solid-svg-icons: ^5.15.3 => 5.15.4
    @fortawesome/react-fontawesome: ^0.1.14 => 0.1.16
    @microsoft/microsoft-graph-types: 1.1.0 => 1.1.0 (2.14.0, 2.25.0)
    @microsoft/rush-stack-compiler-3.9: 0.4.47 => 0.4.47
    @microsoft/sp-build-web: 1.13.1 => 1.13.1
    @microsoft/sp-core-library: 1.13.1 => 1.13.1 (1.12.1)
    @microsoft/sp-lodash-subset: 1.13.1 => 1.13.1 (1.12.1)
    @microsoft/sp-module-interfaces: 1.13.1 => 1.13.1 (1.12.1)
    @microsoft/sp-office-ui-fabric-core: 1.13.1 => 1.13.1
    @microsoft/sp-property-pane: 1.13.1 => 1.13.1
    @microsoft/sp-tslint-rules: 1.13.1 => 1.13.1
    @microsoft/sp-webpart-base: 1.13.1 => 1.13.1
    @pnp/common: ^2.8.0 => 2.11.0 (2.14.0, 2.5.0)
    @pnp/core: 3.4.1 => 3.4.1
    @pnp/graph: 2.14.0 => 2.14.0
    @pnp/logging: ^2.8.0 => 2.11.0 (2.14.0, 2.5.0)
    @pnp/odata: ^2.8.0 => 2.11.0 (2.14.0, 2.5.0)
    @pnp/queryable: 3.4.1 => 3.4.1
    @pnp/sp: ^2.8.0 => 2.11.0 (2.5.0)
    @pnp/spfx-controls-react: ^3.6.0 => 3.6.0
    @types/react: 16.9.51 => 16.9.51 (17.0.37)
    @types/react-dom: 16.9.8 => 16.9.8
    @types/webpack-env: 1.13.1 => 1.13.1
    @wojtekmaj/react-daterange-picker: ^3.3.2 => 3.3.2
    ajv: ~5.2.2 => 5.2.5 (6.12.6)
    cypress: ^12.17.4 => 12.17.4
    cypress-debugger: ^1.0.9 => 1.0.9
    cypress-on-fix: ^1.0.2 => 1.0.2
    gulp: ~4.0.2 => 4.0.2
    moment: ^2.29.1 => 2.29.1
    office-ui-fabric-react: 7.174.1 => 7.174.1 (7.176.2)
    react: 16.13.1 => 16.13.1
    react-dom: 16.13.1 => 16.13.1
    react-grid-layout: ^1.3.0 => 1.3.0
    react-lock-screen: ^0.1.1 => 0.1.1
    react-promise-tracker: ^2.1.0 => 2.1.0
    react-spinners: ^0.11.0 => 0.11.0
    sp-pnp-js: ^3.0.10 => 3.0.10
    spfx-fast-serve-helpers: ~1.13.0 => 1.13.7
    stream-json: ^1.8.0 => 1.8.0
    typescript: ^3.7.7 => 3.9.10 (4.2.4)
    uuid: ^8.3.2 => 8.3.2 (3.4.0, 3.1.0)
  npmGlobalPackages:
    @microsoft/generator-sharepoint: 1.17.4
    gulp: 4.0.2
    spfx-fast-serve: 3.0.6
    yo: 4.3.1

Describe the bug

I'm working on a SharePoint app for which Cypress is used for testing. Due to SharePoint and Cypress' nature, debugging tests with Open Mode is limited and Cypress by default gives unfortunately next to zero insight why a test failed outside of that.

Which is how I ended up here, and I'm glad that I finally get some insight as to what happened before a failure.

However, there's a small issue with the Player where it expects every payload to have a .message property.
But "name": "route" payloads never have that property. I have at least never found any in a dump that had a "message" property.
If one of these is clicked the Player throws an exception and breaks itself, requiring a reload of the page to use it again.

I also verified that manually adding said property prevents the exception and with that the entire issue.

I've included a basic Cypress Test script that causes a dump which allows manual causing of the issue.
It should create a dump that when loaded has a [pending] route as 4th step.

Before clicking that step, the browser should be set to break on caught exceptions.
Otherwise the exception will be thrown after the end of the error handler that just handed it down until no one handled it anymore.

After setting that, clicking on [pending] route will stop right at the point where it fails to handle the missing .message property.
Edit: I've found out that this only happens when the "Step Details" tab is active, which makes sense because it's the one trying to read the missing property. Clicking the item while the "Console" tab is active for example works fine.

Expected behavior

Not crashing the entire Player from a missing "message" property.

Command and Setup

Cypress test script:
"player_issue.cy.ts"

try {
  // preventing "only one instance of polyfill"
  require('cypress-debugger').debuggerSupport();
}
catch {}

describe('Player crash demo', () => {
  beforeEach(() => {
    cy.intercept("GET", "google.com")
      .as("intercepted");
  });
  it('visiting with route', () => {
    cy.visit("https://www.google.com")
      .should("not.exist"); // only to fail the test to ensure that a dump is created
  });
});

Command (share the exact cypress or cypress-cloud command you're running)

Batchfile because PowerShell is annoying about ENV variables => "debug_runner.bat":

set ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=9222
cmd /c npx cypress run -s %*

Actual command entered in PowerShell:
.\debug_runner.bat .\player_issue.cy.ts

# Put output below this line
Nothing special, just the normal output that results from running a test.

Setup files cypress.config.ts

# Put output below this line
import { defineConfig } from "cypress";
import { debuggerPlugin } from "cypress-debugger";

export default defineConfig({
  viewportWidth: 1280,
  viewportHeight: 800,

  trashAssetsBeforeRuns: false,
  e2e: {
    experimentalMemoryManagement: true,
    
    chromeWebSecurity: false,
    modifyObstructiveCode: true,
    experimentalModifyObstructiveThirdPartyCode: true,
    
    setupNodeEvents(on, config) {
    debuggerPlugin(on, config, {
      failedTestsOnly: true,
    },
  },
});

Full log and debug output

I have no debug log because this issue is with the Player, not the module running during testing.

[gustavo-almeida]

Hey, guys. Any news about this bug?