Is there an eslint rule warning about operator precedence when || ?? chaining is mixed with ternary operator?

[teetotum]

I had at least two bugs in the last two days that were caused by a wrong assumption about operator precedence with regard to || / ?? chaining combined with ternary operator.

Is there already a rule I can activate to warn me if I use anything like this in my code base without using parentheses?

The concrete bugs I had:

First Example

const errorMessage =
  error_data?.error?.upstream?.error_text ||
  error_data?.message ||
  typeof error_data === 'string'
    ? error_data
    : 'unknown error'

Expected outcome if error_data were an object like { error: { upstream: { error_text: 'warp core critical' }} } would be the string 'warp core critical'.
Actual outcome is the object itself.
Adding parentheses fixes the code:

const errorMessage =
  error_data?.error?.upstream?.error_text ||
  error_data?.message ||
  (typeof error_data === 'string'
    ? error_data
    : 'unknown error')

Second Example

const buttonAction =
  !config.button?.href ? () => state.loadMore() : undefined
const buttonText = config.button?.text ?? buttonAction ? 'Load more items' : 'Show all'

Expected outcome if config.button.text is set to anything meaningful would be that it is applied to buttonText.
Actual outcome is 'Load more items'.
Adding parentheses fixes the code:

const buttonAction =
  !config.button?.href ? () => state.loadMore() : undefined
const buttonText = config.button?.text ?? (buttonAction ? 'Load more items' : 'Show all')

[mdjermanovic]

I had at least two bugs in the last two days that were caused by a wrong assumption about operator precedence with regard to || / ?? chaining combined with ternery operator.

Is there already a rule I can activate to warn me if I use anything like this in my code base without using parentheses?

I think this is covered by the @stylistic/js/no-mixed-operators rule:

https://eslint.style/rules/js/no-mixed-operators

[teetotum]

Thank you, this seems to be what I'm looking for. I successfully added @stylistic and included the rule @stylistic/no-mixed-operators but failed to configure it to actually treat the two examples I posted as an error. So far the ternary is ignored by the rule.
My yaml config section for the rule:

  '@stylistic/no-mixed-operators':
    - error
    - groups:
        - ['+', '-', '*', '/', '%', '**']
        - ['&', '|', '^', '~', '<<', '>>', '>>>']
        - ['==', '!=', '===', '!==', '>', '>=', '<', '<=']
        - ['&&', '||']
        - ['in', 'instanceof']
        - ['??', '>>>']
        - ['?:', '>>>']

I tried to put the ternary into its own group, so as to trigger a warning when mixed with anything else, but single item groups aren't allowed by the rule, therefore I threw the >>> operator in.

Addendum

I solved my issues. I misunderstood the documentation regarding the groups parameter (will probably open a PR to propose a re-wording of the section in the docs to spare others the same detour; update: proposed re-wording).
For the interested reader: The no-mixed-operators rule checks each group separately - warnings or errors are only triggered if operators within the same group are mixed (and without using parentheses).
Inter-group usage is not checked.

My final configuration is thus:

  '@stylistic/no-mixed-operators':
    - error
    - groups:
        - ['+', '-', '*', '/', '%', '**']
        - ['&', '|', '^', '~', '<<', '>>', '>>>']
        - ['==', '!=', '===', '!==', '>', '>=', '<', '<=']
        - ['&&', '||', '??', '?:']
        - ['in', 'instanceof']

This is nearly identical with the default configuration of the rule, except that the logical operator group additionally contains ?? and ?:

Note regarding prettier

Adding parentheses alone will probably not work as prettier will strip them out again (see prettier/prettier#187 and prettier/prettier#3805 and https://stackoverflow.com/questions/68587819/prevent-prettier-from-removing-parentheses)
I solved it by disabling prettier for the affected line of code with // prettier-ignore