With Mezzurite, you can track how long your UI components are taking to render. You're free to transform, stream, read, or log the results however you'd like.
For the legacy version of Mezzurite, please visit the v1.x branch.
Your components, timed.
License: Other
With Mezzurite, you can track how long your UI components are taking to render. You're free to transform, stream, read, or log the results however you'd like.
For the legacy version of Mezzurite, please visit the v1.x branch.
Steps:
npm init
npm install "@microsoft/[email protected]" --save
index.ts
import {withMezzuriteRouter} from '@microsoft/mezzurite-react';
Expected: Module is imported
Actual: Cannot find module
This is caused by an incorrect path in mezzurite-react package.json:
"main": "./dist/bundles/mezzurite-react.umd.js"
Directory dist
does not exist in the published package.
Project looks like very promising, but we intend to collect metrics to Prometheus, using, for example https://github.com/weaveworks/promjs/ Is there a way to accomplish that?
It would be great to have Mezzurite available as a Vue.js plugin, similar to React and Angular.
We need to add support to track the length of time it took for Ajax calls ( or other network request) took to return. This data should be linked to the component making the call if one is present.
This issue has been observed while instrumenting react components with mezzurite-react. Following is the error in console:-
Uncaught Error: You should not use or withRouter() outside a
at invariant (browser.js:38)
at Route.computeMatch (Route.js:61)
at new Route (Route.js:36)
at constructClassInstance (react-dom.development.js:11769)
at updateClassComponent (react-dom.development.js:13491)
at beginWork (react-dom.development.js:14090)
at performUnitOfWork (react-dom.development.js:16416)
at workLoop (react-dom.development.js:16454)
at HTMLUnknownElement.callCallback (react-dom.development.js:145)
at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
This comes from a discussion in #70. We don't want the expected console.warn
() calls to show up in Jest test runs. However, we don't want to swallow unexpected calls that could be legitimate problems.
This issue was created to act as a reminder to later explore this and re-examine the assumption that it will not pose problems in the short-term.
We have a "create react app" application and after installing Mezzurite we've seen this occasionally while running the site locally and also when we run with a "production" build. What's confusing is that this comes and goes so we're not sure about repro steps:
TypeError: Cannot read property 'startTime' of undefined
at Function.e.measure (https://cloudfit-test.azurewebsites.net/static/js/2.197f1834.chunk.js:1:45169)
at Function.e.calculateSlowestResourceBatch (https://cloudfit-test.azurewebsites.net/static/js/2.197f1834.chunk.js:1:48229)
at Function.e.submitTelemetry (https://cloudfit-test.azurewebsites.net/static/js/2.197f1834.chunk.js:1:48962)
at Function.e.captureTimings (https://cloudfit-test.azurewebsites.net/static/js/2.197f1834.chunk.js:1:48778)
at https://cloudfit-test.azurewebsites.net/static/js/2.197f1834.chunk.js:1:48511
Our imports look like this:
...
import { withMezzuriteRouter } from "@microsoft/mezzurite-react"
import StateActions from "../StateActions"
import { ApplicationInsights } from "@microsoft/applicationinsights-web"
import { MezzuritePlugIn } from "@microsoft/applicationinsights-mezzurite"
const customPlugin = new MezzuritePlugIn()
const appInsights = new ApplicationInsights({
config: {
instrumentationKey: process.env.REACT_APP_INSIGHTS,
extensions: [customPlugin],
maxBatchInterval: 100,
disableFetchTracking: false
}
})
appInsights.loadAppInsights()
...
And then use is component composition:
export default withMezzuriteRouter(Main)
We're using the Reach Router instead of the react router. Our routing is simple and reach meeting some specific needs we have. This however causes messurite-react to fail even if we don't use the withMezzuriteRouter(). It looks like the wrapper could work with Reach, but I'm not sure how to make the core import optional and not fail.
For long running instances of applications that may be rendering components over and over again, the component data store will become quite large. This can be mitigated by providing an API to remove components from the data store. Logging components could remove components that they'd like after the components have been recorded.
ERROR in ./node_modules/@microsoft/mezzurite-react/esm/mezzurite-react.js Module not found: Error: Can't resolve 'react-router' in 'C:\Projects\reveal\client\Reveal.UI.Web\client\node_modules@microsoft\mezzurite-react\esm' @ ./node_modules/@microsoft/mezzurite-react/esm/mezzurite-react.js 5:0-42 212:11-21 @ ./app/workitems/components/WorkItemsListView/WorkItemsListView.jsx @ ./app/workitems/containers/WorkItemsListView/WorkItemsListView.jsx @ ./app/common/containers/App/App.jsx @ ./app/index.jsx @ multi webpack-hot-middleware/client @babel/polyfill whatwg-fetch ./app/index.jsx
Component:
import {withMezzurite} from '@microsoft/mezzurite-react'; ... export default withMezzurite(WorkItemsListView);
Self-explanatory. CICD is important and we want to do it right from the start. It should gate PRs that do not build or pass other requirements like test coverage.
This spawned off from the discussion in #59. In a scenario where there is no logger, which we expect to be a good citizen and delete items from the component store as soon as it's done logging them, we have an issue. Components will pile up in the store as more and more timings are recorded, consuming memory. In order to mitigate this, the idea of providing a configurable timeout for clearing out the store should be explored.
Mezzurite-Angular is keeping demo app from loading.
Redux is a great way to emit state changes as an observable, but it's far too bulky for the tiny slice of functionality that we leverage. We should explore some alternatives like:
Given that the change is so major, the information in the old README is dated. This needs to be updated when appropriate.
site linked to in the readme file is down.
Repro url: http://appinsights-guestbook.azurewebsites.net/
I am hosting the minified/static form of a react app with Mezzurite and it is logging the component names as "t". Is there a way to force the naming when marking my components?
Currently, the implementation in the rewrite allows an invalid transition. It does not verify if a component start event was emitted before a component end event was sent.
TypeScript typings provide a better experience in VSCode. Example typings for react-router.
In the new Mezzurite architecture, the core exposes an event based interface for adapters to communicate with it. This provides a clear contract that others can code against in order to implement community adapters. However, in order to expose this interface better and help potential authors understand how to implement these adapters, we need documentation to explain this.
currently slowest resources are checked for after an arbitrary timeout amount, would make more sense to do all this at the time that VLT is calculated (end of capture cycle).
My website is build with angular 9. Once I have integrated with mezzurite and try to run ng serve it gives the below error:
ERROR in ./node_modules/@microsoft/mezzurite-angular/ivy_ngcc/fesm2015/mezzurite-angular.js
Module not found: Error: Can't resolve '../package.json' in '/home/vsts/work/1/s/node_modules/@microsoft/mezzurite-angular/ivy_ngcc/fesm2015'
We need to think about how we are distributing and versioning this new rewrite. We already have existing packages. Do we change them? Iterate their existing major version? Delete and make new ones?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.