microsoft / mezzurite Goto Github PK

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);

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.

Steps:

1. npm init
2. npm install "@microsoft/[email protected]" --save
3. Create file index.ts
4. Add line 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.

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:

• redux-zero
• unstated

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.

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.

TypeScript typings provide a better experience in VSCode. Example typings for react-router.

site linked to in the readme file is down.

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.

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 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?

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.

It would be great to have Mezzurite available as a Vue.js plugin, similar to React and Angular.

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?

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).

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?

Mezzurite-Angular is keeping demo app from loading.

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 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.

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.

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'

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)

Given that the change is so major, the information in the old README is dated. This needs to be updated when appropriate.