Skip to content

Add frontend pre and post debug message hooks to NR5 beta#5490

Closed
Steve-Mcl wants to merge 4 commits intodevfrom
5489-frontend-pre-post-debug-hooks
Closed

Add frontend pre and post debug message hooks to NR5 beta#5490
Steve-Mcl wants to merge 4 commits intodevfrom
5489-frontend-pre-post-debug-hooks

Conversation

@Steve-Mcl
Copy link
Copy Markdown
Contributor

@Steve-Mcl Steve-Mcl commented Feb 20, 2026

Types of changes

  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

closes #5489

Proposed changes

  • Updates editor-client/src/js/hooks.js
    • To support promise chaining (like the backend hooks in util/lib/hooks.js do)
    • Adds 2 known hooks debugPreProcessMessage and debugPostProcessMessage
    • Adds helper isKnownHook to permit node/plugin integrations to query if the hook they intend on attaching to is a known/supported hook
    • Various typedoc hints, linting and changing var to let/const
  • Updates nodes/core/common/lib/debug/debug-utils.js
    • handleDebugMessage
      • wrap call to processDebugMessage in the 2 new hooks debugPreProcessMessage and debugPostProcessMessage
    • processDebugMessage
      • allow extra tools to be passed to createObjectElement
      • always add red-ui-debug-msg-tools span element (function generated messages dont get a toolbar like all other messages)
      • return artifacts generated in the function - to permit debugPostProcessMessage hooks to affect the debug messages
        {
             message: o, // original debug message object, useful for any hook that might have tagged additional info onto it
             element: msg, // the top-level element for this debug message
             payload // the reconstructed debug message
         }

4.x stream

There is a separate PR here : #5495
If the 4.x PR is merged we can elect to either close this one (hooks will get picked up by NR5 at some future merge master sync) or keep/merge this one.

Checklist

  • I have read the contribution guidelines
  • For non-bugfix PRs, I have discussed this change on the forum/slack team.
  • I have run npm run test to verify the unit tests pass
  • I have added suitable unit tests to cover the new/changed functionality

@Steve-Mcl Steve-Mcl requested a review from knolleary February 20, 2026 13:03
@Steve-Mcl
Copy link
Copy Markdown
Contributor Author

Usage example - add extra button to warning & error level messages:

    if (RED.hooks.isKnownHook?.('debugPostProcessMessage')) {
        RED.hooks.add('debugPostProcessMessage.my-plugin', function (processedMessage) {
            const { message, element, payload } = processedMessage
            let tt = ''
            switch (message?.level) {
            case 20:
                tt = 'This is an error message. Click for details.'
                break
            case 30:
                tt = 'This is a warning message. Click for details.'
                break
            default:
                return // only interest in error and warning level messages
            }
            const metaRowTools = element.find('.red-ui-debug-msg-meta .red-ui-debug-msg-tools')
            if (metaRowTools.length) {
                const buttonEl = $('<button class="my-plugin-tool-button red-ui-button red-ui-button-small"><i class="fa fa-question"></i></button>')
                RED.popover.tooltip(buttonEl, tt)
                buttonEl.data('my-plugin-debug-data', { message, payload }) // for access to debug data in click handler
                buttonEl.on('click', function () {
                    const debugData = buttonEl.data('my-plugin-debug-data')
                    // Do the necessary with the debug data
                    if (debugData.message.level === 20) {
                        alert('Error messages are indicated by the red edges!\n\n' + JSON.stringify(debugData.message, null, 2))
                    } else if (debugData.message.level === 30) {
                        alert('Warning messages are indicated by the yellow edges!\n\n' + JSON.stringify(debugData.message, null, 2))
                    }
                })
                metaRowTools.append(buttonEl)
            }
        })
    } 

Example:

chrome_MCktEQjJ2R

@Steve-Mcl Steve-Mcl linked an issue Feb 20, 2026 that may be closed by this pull request
@Steve-Mcl Steve-Mcl changed the title Add frontend pre and post debug message hooks Add frontend pre and post debug message hooks to NR5 beta Feb 23, 2026
@knolleary
Copy link
Copy Markdown
Member

Closing in favour of #5495 - we're targeting 4.x for this, and it'll get into 5.x when master merges to dev - no need for a separate PR.

@knolleary knolleary closed this Feb 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

FR: Add frontend hooks for pre/post debug message

2 participants