From 48d94fa7a5409fd41dbb171bcf9e7f7d494f9c1a Mon Sep 17 00:00:00 2001 From: felixshiftellecon Date: Wed, 24 Jul 2024 16:08:25 -0400 Subject: [PATCH] [DevTools] Implement Owner Stacks (#30417) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stacked on #30410. Use "owner stacks" as the appended component stack if it is available on the Fiber. This will only be available if the enableOwnerStacks flag is on. Otherwise it fallback to parent stacks. In prod, there's no owner so it's never added there. I was going back and forth on whether to inject essentially `captureOwnerStack` as part of the DevTools hooks or replicate the implementation but decided to replicate the implementation. The DevTools needs all the same information from internals to implement owner views elsewhere in the UI anyway so we're not saving anything in terms of the scope of internals. Additionally, we really need this information for non-current components as well like "rendered by" views of the currently selected component. It can also be useful if we need to change the format after the fact like we did for parent stacks in: https://github.com/facebook/react/pull/30289 Injecting the implementation would lock us into specifics both in terms of what the core needs to provide and what the DevTools can use. The implementation depends on the technique used in #30369 which tags frames to strip out with `react-stack-bottom-frame`. That's how the implementation knows how to materialize the error if it hasn't already. Firefox: Screenshot 2024-07-21 at 11 33 37 PM Follow up: One thing about this view is that it doesn't include the current actual synchronous stack. When I used to append these I would include both the real current stack and the owner stack. That's because the owner stack doesn't include the name of the currently executing component. I'll probably inject the current stack too in addition to the owner stack. This is similar to how native Async Stacks are basically just appended onto the current stack rather than its own. --- .circleci/config.yml | 526 ++++++++++++++++++++++--------------------- 1 file changed, 271 insertions(+), 255 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index fc24be0cae1b3..668de8c1a5a83 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -48,274 +48,290 @@ parameters: default: '' jobs: - yarn_build: - docker: *docker - environment: *environment - parallelism: 40 - steps: - - checkout - - setup_node_modules - - run: yarn build --ci=circleci - - persist_to_workspace: - root: . - paths: - - build + # yarn_build: + # docker: *docker + # environment: *environment + # parallelism: 40 + # steps: + # - checkout + # - setup_node_modules + # - run: yarn build --ci=circleci + # - persist_to_workspace: + # root: . + # paths: + # - build - download_build: - docker: *docker - environment: *environment - parameters: - revision: - type: string - steps: - - checkout - - setup_node_modules - - run: - name: Download artifacts for revision - command: | - git fetch origin main - cd ./scripts/release && yarn && cd ../../ - scripts/release/download-experimental-build.js --commit=<< parameters.revision >> --allowBrokenCI - - persist_to_workspace: - root: . - paths: - - build + # download_build: + # docker: *docker + # environment: *environment + # parameters: + # revision: + # type: string + # steps: + # - checkout + # - setup_node_modules + # - run: + # name: Download artifacts for revision + # command: | + # git fetch origin main + # cd ./scripts/release && yarn && cd ../../ + # scripts/release/download-experimental-build.js --commit=<< parameters.revision >> --allowBrokenCI + # - persist_to_workspace: + # root: . + # paths: + # - build - process_artifacts_combined: - docker: *docker - environment: *environment - steps: - - checkout - - attach_workspace: - at: . - - setup_node_modules - - run: echo "<< pipeline.git.revision >>" >> build/COMMIT_SHA - - run: | - mkdir -p ./build/__test_utils__ - node ./scripts/print-warnings/print-warnings.js > build/__test_utils__/ReactAllWarnings.js - # Compress build directory into a single tarball for easy download - - run: tar -zcvf ./build.tgz ./build - # TODO: Migrate scripts to use `build` directory instead of `build2` - - run: cp ./build.tgz ./build2.tgz - - store_artifacts: - path: ./build2.tgz - - store_artifacts: - path: ./build.tgz + # process_artifacts_combined: + # docker: *docker + # environment: *environment + # steps: + # - checkout + # - attach_workspace: + # at: . + # - setup_node_modules + # - run: echo "<< pipeline.git.revision >>" >> build/COMMIT_SHA + # - run: | + # mkdir -p ./build/__test_utils__ + # node ./scripts/print-warnings/print-warnings.js > build/__test_utils__/ReactAllWarnings.js + # # Compress build directory into a single tarball for easy download + # - run: tar -zcvf ./build.tgz ./build + # # TODO: Migrate scripts to use `build` directory instead of `build2` + # - run: cp ./build.tgz ./build2.tgz + # - store_artifacts: + # path: ./build2.tgz + # - store_artifacts: + # path: ./build.tgz - build_devtools_and_process_artifacts: - docker: *docker - environment: *environment - steps: - - checkout - - attach_workspace: - at: . - - setup_node_modules - - run: - environment: - RELEASE_CHANNEL: experimental - command: ./scripts/circleci/pack_and_store_devtools_artifacts.sh - - store_artifacts: - path: ./build/devtools.tgz - # Simplifies getting the extension for local testing - - store_artifacts: - path: ./build/devtools/chrome-extension.zip - destination: react-devtools-chrome-extension.zip - - store_artifacts: - path: ./build/devtools/firefox-extension.zip - destination: react-devtools-firefox-extension.zip + # build_devtools_and_process_artifacts: + # docker: *docker + # environment: *environment + # steps: + # - checkout + # - attach_workspace: + # at: . + # - setup_node_modules + # - run: + # environment: + # RELEASE_CHANNEL: experimental + # command: ./scripts/circleci/pack_and_store_devtools_artifacts.sh + # - store_artifacts: + # path: ./build/devtools.tgz + # # Simplifies getting the extension for local testing + # - store_artifacts: + # path: ./build/devtools/chrome-extension.zip + # destination: react-devtools-chrome-extension.zip + # - store_artifacts: + # path: ./build/devtools/firefox-extension.zip + # destination: react-devtools-firefox-extension.zip - run_devtools_e2e_tests: - docker: *docker - environment: *environment - steps: - - checkout - - attach_workspace: - at: . - - setup_node_modules - - run: - name: Playwright install deps - command: | - npx playwright install - sudo npx playwright install-deps - - run: - environment: - RELEASE_CHANNEL: experimental - command: ./scripts/circleci/run_devtools_e2e_tests.js + # run_devtools_e2e_tests: + # docker: *docker + # environment: *environment + # steps: + # - checkout + # - attach_workspace: + # at: . + # - setup_node_modules + # - run: + # name: Playwright install deps + # command: | + # npx playwright install + # sudo npx playwright install-deps + # - run: + # environment: + # RELEASE_CHANNEL: experimental + # command: ./scripts/circleci/run_devtools_e2e_tests.js - run_devtools_tests_for_versions: - docker: *docker - environment: *environment - parallelism: *TEST_PARALLELISM - parameters: - version: - type: string - steps: - - checkout - - attach_workspace: - at: . - - setup_node_modules - - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >> --replaceBuild - - run: node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion << parameters.version >> --ci=circleci + # run_devtools_tests_for_versions: + # docker: *docker + # environment: *environment + # parallelism: *TEST_PARALLELISM + # parameters: + # version: + # type: string + # steps: + # - checkout + # - attach_workspace: + # at: . + # - setup_node_modules + # - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >> --replaceBuild + # - run: node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion << parameters.version >> --ci=circleci - run_devtools_e2e_tests_for_versions: - docker: *docker - environment: *environment - parallelism: *TEST_PARALLELISM - parameters: - version: - type: string - steps: - - checkout - - attach_workspace: - at: . - - setup_node_modules - - run: - name: Playwright install deps - command: | - npx playwright install - sudo npx playwright install-deps - - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >> - - run: - environment: - RELEASE_CHANNEL: experimental - command: ./scripts/circleci/run_devtools_e2e_tests.js << parameters.version >> - - run: - name: Cleanup build regression folder - command: rm -r ./build-regression - - store_artifacts: - path: ./tmp/screenshots + # run_devtools_e2e_tests_for_versions: + # docker: *docker + # environment: *environment + # parallelism: *TEST_PARALLELISM + # parameters: + # version: + # type: string + # steps: + # - checkout + # - attach_workspace: + # at: . + # - setup_node_modules + # - run: + # name: Playwright install deps + # command: | + # npx playwright install + # sudo npx playwright install-deps + # - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >> + # - run: + # environment: + # RELEASE_CHANNEL: experimental + # command: ./scripts/circleci/run_devtools_e2e_tests.js << parameters.version >> + # - run: + # name: Cleanup build regression folder + # command: rm -r ./build-regression + # - store_artifacts: + # path: ./tmp/screenshots + + # publish_prerelease: + # parameters: + # commit_sha: + # type: string + # release_channel: + # type: string + # dist_tag: + # type: string + # docker: *docker + # environment: *environment + # steps: + # - checkout + # - setup_node_modules + # - run: + # name: Run publish script + # command: | + # git fetch origin main + # cd ./scripts/release && yarn && cd ../../ + # scripts/release/prepare-release-from-ci.js --skipTests -r << parameters.release_channel >> --commit=<< parameters.commit_sha >> + # cp ./scripts/release/ci-npmrc ~/.npmrc + # scripts/release/publish.js --ci --tags << parameters.dist_tag >> - publish_prerelease: - parameters: - commit_sha: - type: string - release_channel: - type: string - dist_tag: - type: string - docker: *docker - environment: *environment + test_job: + docker: + - image: cimg/base:stable + resource_class: small steps: - - checkout - - setup_node_modules - run: - name: Run publish script + name: Where am I? command: | - git fetch origin main - cd ./scripts/release && yarn && cd ../../ - scripts/release/prepare-release-from-ci.js --skipTests -r << parameters.release_channel >> --commit=<< parameters.commit_sha >> - cp ./scripts/release/ci-npmrc ~/.npmrc - scripts/release/publish.js --ci --tags << parameters.dist_tag >> - + echo "Running on branch << pipeline.git.branch >> " + echo "" + echo "" + echo "Running on commit << pipeline.git.revision >>" workflows: - build_and_test: - unless: << pipeline.parameters.prerelease_commit_sha >> + test_workflow: jobs: - - yarn_build: - filters: - branches: - ignore: - - builds/facebook-www - - process_artifacts_combined: - requires: - - yarn_build + - test_job - devtools_regression_tests: - unless: << pipeline.parameters.prerelease_commit_sha >> - triggers: - - schedule: - # DevTools regression tests run once a day - cron: "0 0 * * *" - filters: - branches: - only: - - main - jobs: - - download_build: - revision: << pipeline.git.revision >> - - build_devtools_and_process_artifacts: - requires: - - download_build - - run_devtools_tests_for_versions: - requires: - - build_devtools_and_process_artifacts - matrix: - parameters: - version: - - "16.0" - - "16.5" # schedule package - - "16.8" # hooks - - "17.0" - - "18.0" - - run_devtools_e2e_tests_for_versions: - requires: - - build_devtools_and_process_artifacts - matrix: - parameters: - version: - - "16.0" - - "16.5" # schedule package - - "16.8" # hooks - - "17.0" - - "18.0" + # # build_and_test: + # # unless: << pipeline.parameters.prerelease_commit_sha >> + # # jobs: + # # - yarn_build: + # # filters: + # # branches: + # # ignore: + # # - builds/facebook-www + # # - process_artifacts_combined: + # # requires: + # # - yarn_build - # Used to publish a prerelease manually via the command line - publish_preleases: - when: << pipeline.parameters.prerelease_commit_sha >> - jobs: - - publish_prerelease: - name: Publish to Canary channel - commit_sha: << pipeline.parameters.prerelease_commit_sha >> - release_channel: stable - # The tags to use when publishing canaries. The main one we should - # always include is "canary" but we can use multiple (e.g. alpha, - # beta, rc). To declare multiple, use a comma-separated string, like - # this: - # dist_tag: "canary,alpha,beta,rc" - # - # TODO: We currently tag canaries with "next" in addition to "canary" - # because this used to be called the "next" channel and some - # downstream consumers might still expect that tag. We can remove this - # after some time has elapsed and the change has been communicated. - dist_tag: "canary,next,rc" - - publish_prerelease: - name: Publish to Experimental channel - requires: - # NOTE: Intentionally running these jobs sequentially because npm - # will sometimes fail if you try to concurrently publish two - # different versions of the same package, even if they use different - # dist tags. - - Publish to Canary channel - commit_sha: << pipeline.parameters.prerelease_commit_sha >> - release_channel: experimental - dist_tag: experimental + # devtools_regression_tests: + # unless: << pipeline.parameters.prerelease_commit_sha >> + # triggers: + # - schedule: + # # DevTools regression tests run once a day + # cron: "0 0 * * *" + # filters: + # branches: + # only: + # - main + # jobs: + # - download_build: + # revision: << pipeline.git.revision >> + # - build_devtools_and_process_artifacts: + # requires: + # - download_build + # - run_devtools_tests_for_versions: + # requires: + # - build_devtools_and_process_artifacts + # matrix: + # parameters: + # version: + # - "16.0" + # - "16.5" # schedule package + # - "16.8" # hooks + # - "17.0" + # - "18.0" + # - run_devtools_e2e_tests_for_versions: + # requires: + # - build_devtools_and_process_artifacts + # matrix: + # parameters: + # version: + # - "16.0" + # - "16.5" # schedule package + # - "16.8" # hooks + # - "17.0" + # - "18.0" - # Publishes on a cron schedule - publish_preleases_nightly: - unless: << pipeline.parameters.prerelease_commit_sha >> - triggers: - - schedule: - # At 10 minutes past 16:00 on Mon, Tue, Wed, Thu, and Fri - cron: "10 16 * * 1,2,3,4,5" - filters: - branches: - only: - - main - jobs: - - publish_prerelease: - name: Publish to Canary channel - commit_sha: << pipeline.git.revision >> - release_channel: stable - dist_tag: "canary,next,rc" - - publish_prerelease: - name: Publish to Experimental channel - requires: - # NOTE: Intentionally running these jobs sequentially because npm - # will sometimes fail if you try to concurrently publish two - # different versions of the same package, even if they use different - # dist tags. - - Publish to Canary channel - commit_sha: << pipeline.git.revision >> - release_channel: experimental - dist_tag: experimental + # # Used to publish a prerelease manually via the command line + # publish_preleases: + # when: << pipeline.parameters.prerelease_commit_sha >> + # jobs: + # - publish_prerelease: + # name: Publish to Canary channel + # commit_sha: << pipeline.parameters.prerelease_commit_sha >> + # release_channel: stable + # # The tags to use when publishing canaries. The main one we should + # # always include is "canary" but we can use multiple (e.g. alpha, + # # beta, rc). To declare multiple, use a comma-separated string, like + # # this: + # # dist_tag: "canary,alpha,beta,rc" + # # + # # TODO: We currently tag canaries with "next" in addition to "canary" + # # because this used to be called the "next" channel and some + # # downstream consumers might still expect that tag. We can remove this + # # after some time has elapsed and the change has been communicated. + # dist_tag: "canary,next,rc" + # - publish_prerelease: + # name: Publish to Experimental channel + # requires: + # # NOTE: Intentionally running these jobs sequentially because npm + # # will sometimes fail if you try to concurrently publish two + # # different versions of the same package, even if they use different + # # dist tags. + # - Publish to Canary channel + # commit_sha: << pipeline.parameters.prerelease_commit_sha >> + # release_channel: experimental + # dist_tag: experimental + + # # Publishes on a cron schedule + # publish_preleases_nightly: + # unless: << pipeline.parameters.prerelease_commit_sha >> + # triggers: + # - schedule: + # # At 10 minutes past 16:00 on Mon, Tue, Wed, Thu, and Fri + # cron: "10 16 * * 1,2,3,4,5" + # filters: + # branches: + # only: + # - main + # jobs: + # - publish_prerelease: + # name: Publish to Canary channel + # commit_sha: << pipeline.git.revision >> + # release_channel: stable + # dist_tag: "canary,next,rc" + # - publish_prerelease: + # name: Publish to Experimental channel + # requires: + # # NOTE: Intentionally running these jobs sequentially because npm + # # will sometimes fail if you try to concurrently publish two + # # different versions of the same package, even if they use different + # # dist tags. + # - Publish to Canary channel + # commit_sha: << pipeline.git.revision >> + # release_channel: experimental + # dist_tag: experimental