a7d98b695f
As we convert parts of the codebase to TypeScript, we will want a way to track progress. This commit adds a dashboard which displays all of the files that we wish to convert to TypeScript and which files we've already converted. The list of all possible files to convert is predetermined by walking the dependency graph of each entrypoint the build system uses to compile the extension (the files that the entrypoint imports, the files that the imports import, etc). The list should not need to be regenerated, but you can do it by running: yarn ts-migration:enumerate The dashboard is implemented as a separate React app. The CircleCI configuration has been updated so that when a new commit is pushed, the React app is built and stored in the CircleCI artifacts. When a PR is merged, the built files will be pushed to a separate repo whose sole purpose is to serve the dashboard via GitHub Pages (this is the same way that the Storybook works). All of the app code and script to build the app are self-contained under `development/ts-migration-dashboard`. To build this app yourself, you can run: yarn ts-migration:dashboard:build or if you want to build automatically as you change files, run: yarn ts-migration:dashboard:watch Then open the following file in your browser (there is no server component): development/ts-migration-dashboard/build/index.html Finally, although you shouldn't have to do this, to manually deploy the dashboard once built, you can run: git remote add ts-migration-dashboard git@github.com:MetaMask/metamask-extension-ts-migration-dashboard.git yarn ts-migration:dashboard:deploy |
||
---|---|---|
.. | ||
build | ||
charts | ||
highlights | ||
lib | ||
states | ||
ts-migration-dashboard | ||
announcer.js | ||
chromereload.js | ||
create-static-server.js | ||
empty.js | ||
generate-lavamoat-policies.sh | ||
generate-migration.sh | ||
gource-viz.sh | ||
jest.config.js | ||
metamaskbot-build-announce.js | ||
missing-locale-strings.js | ||
mock-3box.js | ||
mock-segment.js | ||
README.md | ||
run-ganache.sh | ||
sentry-publish.js | ||
sentry-upload-artifacts.sh | ||
shellcheck.sh | ||
show-deps-install-scripts.js | ||
source-map-explorer.sh | ||
sourcemap-validator.js | ||
static-server.js | ||
stream-flat-map.js | ||
verify-locale-strings.js |
Development
Several files which are needed for developing on MetaMask.
Usually each file or directory contains information about its scope / usage.
Segment
Debugging with the Mock Segment API
To start the Mock Segment API:
- Add/replace the
SEGMENT_HOST
andSEGMENT_WRITE_KEY
variables in.metamaskrc
SEGMENT_HOST='http://localhost:9090' SEGMENT_WRITE_KEY='FAKE'
- Build the project to the
./dist/
folder withyarn dist
- Run the Mock Segment API from the command line
node development/mock-segment.js
Events triggered whilst using the extension will be logged to the console of the Mock Segment API.
More information on the API and its usage can be found here.
Debugging in Segment
To debug in a production Segment environment:
- Create a free account on Segment
- Create a New Workspace
- Add a Source (Node.js)
- Copy the
Write Key
from the API Keys section under Settings - Add/replace the
SEGMENT_HOST
andSEGMENT_WRITE_KEY
variables in.metamaskrc
SEGMENT_HOST='https://api.segment.io' SEGMENT_WRITE_KEY='COPIED_WRITE_KEY'
- Build the project to the
./dist/
folder withyarn dist
Events triggered whilst using the extension will be displayed in Segment's Debugger.
Debugging Segment requests in MetaMask
To opt in to MetaMetrics;
- Unlock the extension
- Open the Account menu
- Click the
Settings
menu item - Click the
Security & Privacy
menu item - Toggle the
Participate in MetaMetrics
menu option to theON
position
You can inspect the requests in the Network
tab of your browser's Developer Tools (background.html)
by filtering for POST
requests to /v1/batch
. The full url will be http://localhost:9090/v1/batch
or https://api.segment.io/v1/batch
respectively.
Sentry
Debugging in Sentry
To debug in a production Sentry environment:
- If you have not already got a Sentry account, you can create a free account on Sentry
- Create a New Sentry Organization
- If you already have an existing Sentry account and workspace, open the sidebar drop down menu, then click
Switch organization
followed byCreate a new organization
- If you already have an existing Sentry account and workspace, open the sidebar drop down menu, then click
- Create a New Project
- Copy the
Public Key
andProject ID
from the Client Keys section under your projects Settings- Select
Settings
in the sidebar menu, then selectProjects
in the secondary menu. Click your project then selectClient Keys (DSN)
from the secondary menu. Click theConfigure
button on theClient Keys
page and copy yourProject Id
andPublic Key
- Select
- Add/replace the
SENTRY_DSN
andSENTRY_DSN_DEV
variables in.metamaskrc
SENTRY_DSN_DEV=https://{SENTRY_PUBLIC_KEY}@sentry.io/{SENTRY_PROJECT_ID} SENTRY_DSN=https://{SENTRY_PUBLIC_KEY}@sentry.io/{SENTRY_PROJECT_ID}
- Build the project to the
./dist/
folder withyarn dist
Errors reported whilst using the extension will be displayed in Sentry's Issues
page.