Monitor#

Pareto has built-in monitoring for performance metrics. You can choose a template with the monitor option when creating a project using create-pareto.

SetUp#

If you want to manually enable this feature in your project, please follow the steps below.

create or update pareto.config.ts in the root directory of your project.

import { ParetoConfig } from '@paretojs/core/config'

const config: ParetoConfig = {
  enableMonitor: true,
}

export default config

modify the server-entry.tsx file in the root directory of your project.

import { createMonitorMiddleware } from '@paretojs/core/node'
import express from 'express'

const app = express()
app.use(
  createMonitorMiddleware({
    // control whether to display the UI in the front end
    showMonitor: true,
  }),
)

modify any route root file in your app dictionary.

import { report, FirstScreen } from '@paretojs/monitor'

const Home: ParetoPage<InitialData> = props => {
  const { repositories } = props.initialData

  useEffect(() => {
    report().then(console.log)
  }, [])

  return (
    <>
      <div>...</div>
      <FirstScreen />
    </>
  )
}

Result#

Report#

For information on how to report parameter data and the meaning of parameters, you can refer to this place.