[Compiler Bug]: (BuildHIR::lowerStatement) Support ThrowStatement inside of try/catch

[a0m0rajab]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwBUyAjACgEp8wADpt8cVmAKEyuMvgC8+ANoBdEfnxkwATwb5aDZq3wBzBLgAKMCCSaUE-Qeo35cMbU9EuXTEvh4IMNYwAsJe3i64ABbWAO74gcEA3M4R+AC+qRliMnBR-ok4oVka4nSQ9gB0lBAmAUFFWZmizSLOMOawbDxZADwAfCXsCJJ9APSDonwpdM0gADQgZbYmKCBMALbYeK7amAiC+BaUUCZMdADymEbl2STWG-gA5FzcCJQAtJgnZ3QfHWRGB9xFs7IExoQmJInjMRDwwhoxmMQZg7DIWHQALIQYjIfBCEBkSiUAkidL4MDosC2EZHH7nK43MDTBbgKIQWIASTouECdCJYBQ5EoYAQ6SAA

Repro steps

1. go to the playground
2. use the next code:

export default function Tab() {
  const data = []
  async function getProfile() {
    try {
        if (error) {
          throw error;
        }
    } catch (error) {
      console.log(error)
    }
  }


  return (
    <>
     Test
    </>
  );
}

you will see the error

How often does this bug happen?

Every time

What version of React are you using?

latest

What version of React Compiler are you using?

latest

[whoistausif]

Hi, I’d like to work on this issue.
I’m exploring the compiler code and will update here if I have questions.

[whoistausif]

I tried locating the React Compiler code in the current main branch,
but it does not appear to be present in the open-source repository.

Could you confirm whether this issue is actionable externally,
or if it is tracked against an internal compiler repo?

[Agaba-Ed]

Hi @a0m0rajab and @whoistausif — there’s an explicit comment in BuildHIR.ts noting that throw inside a try/catch block is currently unsupported, since it’s often considered an anti-pattern (using exceptions for control flow).

[a0m0rajab]

@Agaba-Ed thanks, here is the related comment you refer to:

react/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts

Lines 274 to 291 in a056625

	case 'ThrowStatement': {
	const stmt = stmtPath as NodePath<t.ThrowStatement>;
	const value = lowerExpressionToTemporary(builder, stmt.get('argument'));
	const handler = builder.resolveThrowHandler();
	if (handler != null) {
	/*
	* NOTE: we could support this, but a `throw` inside try/catch is using exceptions
	* for control-flow and is generally considered an anti-pattern. we can likely
	* just not support this pattern, unless it really becomes necessary for some reason.
	*/
	builder.errors.push({
	reason:
	'(BuildHIR::lowerStatement) Support ThrowStatement inside of try/catch',
	category: ErrorCategory.Todo,
	loc: stmt.node.loc ?? null,
	suggestions: null,
	});
	}