Skip to content

[bug] error-boundaries false positives when react code appears in the catch #1617

@controversial

Description

@controversial

Describe the bug

The docs for error-boundaries say:

✅ Try/catch is fine for non-rendering operations

however, it false-positives when when the rendering operation appears in the catch; in fact, it should only flag when the rendering operation appears in the try

Reproduction

// ✅  passes (correct):
function Component() {
  let data;
  try {
    data = JSON.parse(text);
  } catch (e) {
    data = null;
  }
  return <div>{data}</div>;
}

// ✅ fails (correctly)
function Component() {
  let markup;
  try {
    // this is wrong because it can’t catch a rendering error
    markup = <div>Failed to parse</div>
  } catch (e) {
    markup = null;
  }
  return <div>{markup}</div>;
}

// ⚠️ fails (but should pass): 
function Component() {
  let data;
  try {
    data = JSON.parse(text);
  } catch (e) {
    data = null;
    // we’re not trying to catch an error from here; it’s not in the `try`
    return <div>Failed to parse</div>
  }
  return <div>Parsed</div>;
}

Expected behavior

the second example should pass because the react code isn’t within the try; i.e. we’re only trying “non-rendering operations”

Platform and versions

3.0.0-rc.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions