trendyol / perfanalytics Goto Github PK

Web Performance Metrics

Shell 0.03% TypeScript 96.75% SCSS 1.00% JavaScript 2.17% Dockerfile 0.05%

performance-metrics typescript nodejs react performance-monitoring performance-visualization lighthouse-audits perfanalytics

perfanalytics's Introduction

PerfAnalytics

PerfAnalytics is an open-source project aimed at measuring and analyzing performance metrics. It provides a comprehensive solution for gathering performance data, visualizing insights, and making informed optimizations. The project is built using NestJS for the backend, Kafka for data streaming, and Next.js for the client-side interface.

Features

Collects and analyzes performance metrics to identify bottlenecks and areas for optimization.
Real-time data streaming through Kafka for seamless performance tracking.
User-friendly dashboard powered by Next.js for visualizing performance insights.
Easily extensible and customizable architecture to suit your specific needs.

Getting Started

Follow these steps to get PerfAnalytics up and running:

Prerequisites

Node.js (version 16 recommended)
Yarn package manager

Installation

Clone the PerfAnalytics repository:

git clone https://github.com/Trendyol/perfanalytics.git

Navigate to the project directory:

cd perfanalytics

Install backend dependencies:

cd backend
yarn install

Install frontend dependencies:

cd ../client
yarn install

Install lighthouse dependencies:

cd ../lighthouse
yarn install

Configuration

Open the backend/.env file and configure any necessary environment variables, such as database connections or API keys.
Open the lightouse/.env file and configure any necessary environment variables, such as Kafka connection information.
Open the client/.env.local file and set any environment variables required for the frontend.

Running the Application

Start the backend server:

cd backend
yarn start:dev

Start the frontend server:

cd client
yarn dev

Start the lighthouse server:

cd lighthouse
yarn start

Continuous Integration

The project includes a GitHub Actions workflow for continuous integration. The workflow includes the following jobs:

Pre-check: Checks for changes in the client and backend code and triggers corresponding jobs if changes are detected.
Client: Builds and deploys the client application.
Backend: Builds and deploys the backend application.
Lighthouse: Builds and deploys the lighthouse application.

Contributing

We welcome contributions! If you'd like to contribute to PerfAnalytics.

License

This project is licensed under the MIT License.

perfanalytics's People

Contributors

Stargazers

Watchers

Forkers

fresholia berkays flyinwinds mertcanaltin halismelih1

perfanalytics's Issues

Add multiple run support to increase precision of results

Lighthouse Deployment

RFC: Allow data from external sources to be displayed

In our pipelines we generate a number of lighthouse reports to monitor changes in website performance between two pushes. This data we store in an external database. In order to visualise this data we would like to use the perfanalytics project. To support this, perfanalytics should support the following functionality:

Ability to register a project on the left side under where the 'Tags' are located. For the project it should be possible to configure a url where the lighthouse data could be retrieved from.
When selecting a project, the lighthouse data should be retrieved from the configured url, and it should display the url routes on the main part of the screen, similar to how the urls are displayed now.
On selecting one of the routes, it should show a graph with the retrieved data, with the ability to show additional data when hovering over one of the data points.

Add runtime configs for environments

Add storage support for html docs

Add report count statistic to dashboard and domain

Add basic readme for new version

user recovery validation

Convert client to ssr to get run time environment

Add notification support

[TESTS] it gives an error because there is no next/router mock in every new test creation

useRouter() in a new test; I realized they need a mock

step one : added new test

yarn test

result :

FAIL src/modules/Dashboard/components/DomainTable/index.spec.tsx
error:

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

  47 | const DomainTable: FC<DomainTableProps> = (props) => {
  48 |   const [showDomainModal, setShowDomainModal] = useState(false);
> 49 |   const router = useRouter();
     |                           ^
  50 |   const { t } = useTranslation("dashboard");
  51 |   const { domains, isLoading } = useDomains();
  52 |

  at useRouter (node_modules/next/client/router.ts:135:11)
  at DomainTable (src/modules/Dashboard/components/DomainTable/index.tsx:49:27)
  at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)
  at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13)
  at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16)
  at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
  at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
  at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
  at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20)
  at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22)
  at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
  at act (node_modules/react/cjs/react.development.js:2582:11)
  at node_modules/@testing-library/react/dist/act-compat.js:63:25
  at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:26)
  at render (node_modules/@testing-library/react/dist/pure.js:246:10)
  at Object.<anonymous> (src/modules/Dashboard/index.spec.tsx:6:11)

FAIL src/modules/Dashboard/components/DomainTable/index.spec.tsx

solved:
I do this in jest.setup.js instead of executing it in every test and now I can start new tests without errors

jest.setup.js :

import "@testing-library/jest-dom/extend-expect";

// next/router mock
jest.mock('next/router', () => ({
 __esModule: true,
 useRouter: jest.fn().mockReturnValue({
   pathname: '/',
   route: '/',
   query: {},
   asPath: '/',
   components: {},
   isFallback: false,
   basePath: '',
   locale: 'en',
   locales: ['en', 'tr'],
   defaultLocale: 'en',
   isReady: true,
   isPreview: false,
   isLocaleDomain: false,
   events: {},
   push: jest.fn(),
   replace: jest.fn(),
   reload: jest.fn(),
   back: jest.fn(),
   prefetch: jest.fn(),
   beforePopState: jest.fn(),
   isLocaleDomainInternal: jest.fn(),
   isSsr: true,
   isReadyInternal: true,
 }),
}));