Page load is one of the metrics that we track and present to MLT. However, in its current form, it is not very actionable because it also contains the network latency. We split the whole metric into these parts: startTime | responseStart = TTFB | responseEnd = TTLB | domInteractive = Start of processing phase | loadEventEnd = Load complete This gives us better visibility into exactly which phase in the load process is slow. I have experimented with other metrics like - domContentLoadedEventStart - domContentLoadedEventEnd - domComplete and observed that they do not have sufficient gaps in the timespan to have any relevance. Additionally, I have moved TTFB from being a web vitals metric to being tracked from the performance metrics to remain consistent with the other navigation metrics measured. Lastly, I took this chance to improve some of the validation errors that we threw to include more context into the input that was passed and why does it fail. This also meant that I had to change the tests to check for error strings rather than direct errors which is a bad thing, but I don't think it's worth the effort trying to have named error variables for all of them. https://mattermost.atlassian.net/browse/MM-61886 ```release-note NONE ```
Mattermost Web App
This folder contains the client code for the Mattermost web app. It's broken up into multiple packages each of which either contains an area of the app (such as playbooks) or shared logic used across other packages (such as the packages located in the platform directory). For anyone who's used to working in the mattermost/mattermost-webapp repo, most of that is now located in channels.
npm Workspaces
To interact with a workspace using npm, such as to add a dependency or run a script, use the --workspace (or --workspaces) flag. This can be done when using built-in npm commands such as npm add or when running scripts. Those commands should be run from this directory.
# Add a dependency to a single package
npm add react --workspace=playbooks
# Build multiple packages
npm run build --workspace=platform/client --workspace=platform/components
# Test all workspaces
npm test --workspaces
# Clean all workspaces that have a clean script defined
npm run clean --workspaces --if-present
To install dependencies for a workspace, simply run npm install from this folder as you would do normally. Most packages' dependencies will be included in the root node_modules, and all packages' dependencies will appear in the package-lock.json. A node_modules will only be created inside a package if one of its dependencies conflicts with that of another package.
Useful Links
- Developer setup, now included with the Mattermost server developer setup
- Web app developer documentation