├── .babelrc
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── __tests__
├── App.test.js
└── FiberTree.test.js
├── assets
├── devtool-sample.gif
├── repo-fetching.png
└── store-fetching.png
├── backend
├── fiberTree.ts
├── index.ts
└── react-devtools.d.ts
├── examples
└── sample-app
│ ├── .env.example
│ ├── .gitignore
│ ├── app
│ ├── about
│ │ ├── page.jsx
│ │ └── team
│ │ │ └── page.jsx
│ ├── api
│ │ ├── courses
│ │ │ ├── data.json
│ │ │ ├── route.js
│ │ │ └── search
│ │ │ │ └── route.js
│ │ └── hello
│ │ │ └── route.js
│ ├── code
│ │ └── repos
│ │ │ ├── [name]
│ │ │ └── page.jsx
│ │ │ └── page.jsx
│ ├── components
│ │ ├── CourseSearch.jsx
│ │ ├── Courses.jsx
│ │ ├── Header.jsx
│ │ ├── Repo.jsx
│ │ └── RepoDirs.jsx
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.jsx
│ ├── loading.jsx
│ └── page.jsx
│ ├── instrumentation.ts
│ ├── jsconfig.json
│ ├── next.config.js
│ ├── package.json
│ ├── perfssr-otel.ts
│ └── public
│ ├── next.svg
│ ├── screen.png
│ ├── thirteen.svg
│ └── vercel.svg
├── extension
├── assets
│ ├── perfssr_favicon.png
│ ├── perfssr_icon_128.png
│ ├── perfssr_icon_48.png
│ └── perfssr_logo.png
├── background.ts
├── contentScript.ts
├── devtools.html
├── devtools.ts
├── manifest.json
└── panel.html
├── jest.config.js
├── package-lock.json
├── package.json
├── perfssr-npm-package
├── README.md
├── package-lock.json
├── package.json
├── server.js
└── spanController.js
├── src
├── App.js
├── components
│ ├── NetworkPanel.js
│ ├── benchmarkTime.js
│ ├── clientComponent.js
│ ├── customTooltip.js
│ ├── metric.js
│ ├── metricContainer.js
│ └── serverComponent.js
├── hooks
│ └── webSocketHook.js
├── index.html
├── index.js
└── style.css
├── testing-files
├── FiberNode.js
└── style.mock.js
├── tsconfig.json
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env", "@babel/preset-react"]
3 | }
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true, // Browser global variables like `window` etc.
4 | commonjs: true, // CommonJS global variables and CommonJS scoping.Allows require, exports and module.
5 | es6: true, // Enable all ECMAScript 6 features except for modules.
6 | jest: true, // Jest global variables like `it` etc.
7 | node: true, // Defines things like process.env when generating through node
8 | },
9 | extends: [
10 | "eslint:recommended",
11 | "plugin:react/recommended",
12 | "plugin:jsx-a11y/recommended",
13 | "plugin:react-hooks/recommended",
14 | "plugin:jest/recommended",
15 | "plugin:testing-library/react",
16 | ],
17 | parser: "@babel/eslint-parser", // Uses babel-eslint transforms.
18 | parserOptions: {
19 | ecmaFeatures: {
20 | jsx: true,
21 | },
22 | ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
23 | sourceType: "module", // Allows for the use of imports
24 | },
25 | plugins: [
26 | "import", // eslint-plugin-import plugin. https://www.npmjs.com/package/eslint-plugin-import
27 | ],
28 | root: true, // For configuration cascading.
29 | rules: {
30 | "comma-dangle": ["warn", "never"],
31 | "eol-last": "error",
32 | "import/order": [
33 | "warn",
34 | {
35 | alphabetize: {
36 | caseInsensitive: true,
37 | order: "asc",
38 | },
39 | groups: [
40 | "builtin",
41 | "external",
42 | "index",
43 | "sibling",
44 | "parent",
45 | "internal",
46 | ],
47 | },
48 | ],
49 | indent: ["error", 4],
50 | // Indent JSX with 4 spaces
51 | "react/jsx-indent": ["error", 4],
52 |
53 | // Indent props with 4 spaces
54 | "react/jsx-indent-props": ["error", 4],
55 | "jsx-quotes": ["warn", "prefer-double"],
56 |
57 | "max-len": [
58 | "warn",
59 | {
60 | code: 120,
61 | },
62 | ],
63 | "no-console": "warn",
64 | "no-duplicate-imports": "warn",
65 | "no-restricted-imports": [
66 | "error",
67 | {
68 | paths: [
69 | {
70 | message: "Please use import foo from 'lodash-es/foo' instead.",
71 | name: "lodash",
72 | },
73 | {
74 | message:
75 | "Avoid using chain since it is non tree-shakable. Try out flow instead.",
76 | name: "lodash-es/chain",
77 | },
78 | {
79 | importNames: ["chain"],
80 | message:
81 | "Avoid using chain since it is non tree-shakable. Try out flow instead.",
82 | name: "lodash-es",
83 | },
84 | {
85 | message: "Please use import foo from 'lodash-es/foo' instead.",
86 | name: "lodash-es",
87 | },
88 | ],
89 | patterns: ["lodash/**", "lodash/fp/**"],
90 | },
91 | ],
92 | "no-unused-vars": "warn",
93 | "object-curly-spacing": ["warn", "always"],
94 | quotes: ["warn", "double"],
95 | "react/jsx-curly-spacing": [
96 | "warn",
97 | {
98 | allowMultiline: true,
99 | children: {
100 | when: "always",
101 | },
102 | spacing: {
103 | objectLiterals: "always",
104 | },
105 | when: "always",
106 | },
107 | ],
108 | "react/jsx-filename-extension": [
109 | "error",
110 | {
111 | extensions: [".js", ".jsx", ".ts", ".tsx"],
112 | },
113 | ],
114 | "react/jsx-indent": [
115 | "error",
116 | 4,
117 | {
118 | checkAttributes: true,
119 | indentLogicalExpressions: true,
120 | },
121 | ],
122 | "react/jsx-indent-props": ["error", 4],
123 | "react/prop-types": "warn",
124 | semi: "warn",
125 | "sort-imports": [
126 | "warn",
127 | {
128 | ignoreCase: false,
129 | ignoreDeclarationSort: true,
130 | ignoreMemberSort: false,
131 | },
132 | ],
133 | "sort-keys": [
134 | "warn",
135 | "asc",
136 | {
137 | caseSensitive: true,
138 | minKeys: 2,
139 | natural: false,
140 | },
141 | ],
142 | },
143 | settings: {
144 | react: {
145 | version: "detect", // Detect react version
146 | },
147 | },
148 | };
149 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 | .pnpm-debug.log*
9 |
10 | # Diagnostic reports (https://nodejs.org/api/report.html)
11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12 |
13 | # Runtime data
14 | pids
15 | *.pid
16 | *.seed
17 | *.pid.lock
18 |
19 | # Directory for instrumented libs generated by jscoverage/JSCover
20 | lib-cov
21 |
22 | # Coverage directory used by tools like istanbul
23 | coverage
24 | *.lcov
25 |
26 | # nyc test coverage
27 | .nyc_output
28 |
29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30 | .grunt
31 |
32 | # Bower dependency directory (https://bower.io/)
33 | bower_components
34 |
35 | # node-waf configuration
36 | .lock-wscript
37 |
38 | # Compiled binary addons (https://nodejs.org/api/addons.html)
39 | build/Release
40 |
41 | # Dependency directories
42 | node_modules/
43 | jspm_packages/
44 |
45 | # Snowpack dependency directory (https://snowpack.dev/)
46 | web_modules/
47 |
48 | # TypeScript cache
49 | *.tsbuildinfo
50 |
51 | # Optional npm cache directory
52 | .npm
53 |
54 | # Optional eslint cache
55 | .eslintcache
56 |
57 | # Optional stylelint cache
58 | .stylelintcache
59 |
60 | # Microbundle cache
61 | .rpt2_cache/
62 | .rts2_cache_cjs/
63 | .rts2_cache_es/
64 | .rts2_cache_umd/
65 |
66 | # Optional REPL history
67 | .node_repl_history
68 |
69 | # Output of 'npm pack'
70 | *.tgz
71 |
72 | # Yarn Integrity file
73 | .yarn-integrity
74 |
75 | # dotenv environment variable files
76 | .env
77 | .env.development.local
78 | .env.test.local
79 | .env.production.local
80 | .env.local
81 |
82 | # parcel-bundler cache (https://parceljs.org/)
83 | .cache
84 | .parcel-cache
85 |
86 | # Next.js build output
87 | .next
88 | out
89 |
90 | # Nuxt.js build / generate output
91 | .nuxt
92 | dist
93 |
94 | # Gatsby files
95 | .cache/
96 | # Comment in the public line in if your project uses Gatsby and not Next.js
97 | # https://nextjs.org/blog/next-9-1#public-directory-support
98 | # public
99 |
100 | # vuepress build output
101 | .vuepress/dist
102 |
103 | # vuepress v2.x temp and cache directory
104 | .temp
105 | .cache
106 |
107 | # Docusaurus cache and generated files
108 | .docusaurus
109 |
110 | # Serverless directories
111 | .serverless/
112 |
113 | # FuseBox cache
114 | .fusebox/
115 |
116 | # DynamoDB Local files
117 | .dynamodb/
118 |
119 | # TernJS port file
120 | .tern-port
121 |
122 | # Stores VSCode versions used for testing VSCode extensions
123 | .vscode-test
124 |
125 | # yarn v2
126 | .yarn/cache
127 | .yarn/unplugged
128 | .yarn/build-state.yml
129 | .yarn/install-state.gz
130 | .pnp.*
131 |
132 |
133 | new-sample
134 | .DS_Store
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 OSLabs Beta
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | # PerfSSR
6 |
7 | PerfSSR is an open-source Chrome Developer Tool that enhances performance and observability for Next.js applications. It offers real-time performance analytics, providing valuable and comprehensive insights into various aspects of the application.
8 |
9 | 
10 |
11 | ---
12 |
13 | ## Tech Stack
14 |
15 | 
16 | 
17 | 
18 | 
19 | 
20 | 
21 | 
22 | 
23 | 
24 | 
25 | 
26 | 
27 | 
28 | 
29 |
30 | ---
31 |
32 | ## Motivation
33 |
34 | Fetches made server-side get logged in your terminal not the browser. PerfSSR Dev Tool solves this by showing server-side fetch requests in browser alongside the Chrome Network tab.
35 |
36 | Next.js already instruments using [OpenTelemetry](https://nextjs.org/docs/app/building-your-application/optimizing/open-telemetry) for us out of the box so we can just access their built-in spans.
37 |
38 | Credit to [NetPulse](https://github.com/oslabs-beta/NetPulse) for this idea.
39 | Credit to [ReaPer](https://github.com/oslabs-beta/ReaPer) and [Reactime](https://github.com/open-source-labs/reactime) for the idea of accessing render times via React Dev Tool hooks.
40 |
41 |
42 | 
43 | 
44 |
45 |
46 | ---
47 |
48 | ## Setup
49 |
50 | ### Prerequisites
51 |
52 | 1. [Google Chrome](https://www.google.com/chrome/)
53 | 2. Ensure you have [React Dev Tools](https://react.dev/learn/react-developer-tools) installed
54 | 3. In your project directory `npm install perfssr --save-dev`
55 |
56 | and additional OpenTelemtry dependecies
57 |
58 | ```javascript
59 | npm i --save-dev @opentelemetry/exporter-trace-otlp-http @opentelemetry/resources @opentelemetry/sdk-node @opentelemetry/sdk-trace-node @opentelemetry/semantic-conventions
60 | ```
61 |
62 | 4. Install our [PerfSSR Chrome Extension](#chrome-extension-installation)
63 | 5. As of the current Next.js version [13.4.4], [instrumentation](https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation) is an experimental hook so it must be included in the `next.config.js` file. Add the following code to your next config object.
64 |
65 | ```javascript
66 | experimental: {
67 | instrumentationHook: true
68 | }
69 | ```
70 |
71 | 6. Create a file in your project root directory called `instrumentation.ts`. This file will be loaded when Next.js dev server runs and sees that instrumentation is enabled. Within this file we need to import a file that we'll be creating in the next step that starts tracing the Next.js application
72 |
73 | ```javascript
74 | export async function register() {
75 | //OpenTelemetry APIs are not compatible with edge runtime
76 | //need to only import when our runtime is nodejs
77 | if (process.env.NEXT_RUNTIME === "nodejs") {
78 | //Import the script that will start tracing the Next.js application
79 | //In our case it is perfssr.ts
80 | //Change it to your own file name if you named it something else
81 | await import("./perfssr");
82 | }
83 | }
84 | ```
85 |
86 | 7. Create another file [.ts or .js] to your project root directory this can be named anything you'd like. We have ours called `perfssr.ts`
87 |
88 | 1. Inside `perfssr.ts` copy and paste this block of code
89 |
90 | ```javascript
91 | import { NodeSDK } from "@opentelemetry/sdk-node";
92 | import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
93 | import { Resource } from "@opentelemetry/resources";
94 | import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
95 | import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-node";
96 |
97 | const sdk = new NodeSDK({
98 | resource: new Resource({
99 | [SemanticResourceAttributes.SERVICE_NAME]: "next-app",
100 | }),
101 |
102 | spanProcessor: new SimpleSpanProcessor(
103 | new OTLPTraceExporter({
104 | //all traces exported to express server on port 4000
105 | url: `http://localhost:4000`,
106 | })
107 | ),
108 | });
109 |
110 | sdk.start();
111 |
112 |
113 |
114 | 8. Create a `.env` file in the root of your project directory. By default Next.js only creates spans for the API routes, but we want more information than that! To open it up, Next.js looks for a value set in `process.env` Add the line `NEXT_OTEL_VERBOSE=1` to your `.env` file.
115 |
116 | 9. Include another script line to your `package.json` file
117 |
118 | ```javascript
119 | "perfssr": "node ./node_modules/perfssr/server.js & next dev"
120 | ```
121 |
122 | 10. Run PerfSSR by running the command `npm run perfssr` within your terminal.
123 |
124 | ### Chrome Extension Installation
125 |
126 | 1. Clone the PerfSSR repo onto your local machine
127 |
128 | ```
129 | git clone https://github.com/oslabs-beta/perfSSR.git
130 | ```
131 |
132 | 2. Install dependencies and build the PerfSSR application locally
133 |
134 | ```
135 | npm install
136 | npm run build
137 | ```
138 |
139 | 3. Add PerfSSR to your Chrome extensions
140 |
141 | - Navigate to chrome://extensions
142 | - Select Load Unpacked
143 | - Turn on 'Allow access to file URLs' in extension details
144 | - Choose PerfSSR/dist
145 | - Navigate to your application in development mode
146 | - Open up your project in Google Chrome
147 |
148 | 4. Navigate to the PerfSSR panel. Click on the **Start PerfSSR** button will automatically refreshes the page and starts the extraction of performance data of the currently inspected webpage
149 |
150 | - Click on **Regenerate Metrics** will refresh the page to get updated rendering data
151 | - Click on **Clear Network Data** under the Server-side Fetching Summary table will clear all the current requests logged so far
152 |
153 | **Note**: PerfSSR is intended for analyzing and providing performance insights into Next.js applications **in development mode** running on `localhost:3000`
154 |
155 | ## Examples
156 |
157 | To see examples of how to set up your app, we've included a sample app in the `examples` folder.
158 |
159 | ## Contributors
160 |
161 | [James Ye](https://github.com/ye-james) | [Summer Pu](https://github.com/summep) | [Jessica Vo](https://github.com/jessicavo) | [Jonathan Hosea](https://github.com/jhosea92)
162 |
--------------------------------------------------------------------------------
/__tests__/App.test.js:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/extend-expect';
2 | import React from 'react';
3 | import { render, screen } from '@testing-library/react';
4 | import App from '../src/App.js';
5 | import '../testing-files/style.mock.js';
6 |
7 | jest.mock('../src/components/metricContainer', () => {
8 | return () => Mocked MetricContainer Component
;
9 | });
10 | jest.mock('../src/components/HTTPReqChart', () => {
11 | return () => Mocked HTTPReqChart Component
;
12 | });
13 |
14 | jest.mock('../src/components/serverComponent', () => {
15 | return () => Mocked ServerComponent Component
;
16 | });
17 |
18 | jest.mock('../src/components/clientComponent', () => {
19 | return () => Mocked ClientComponent Component
;
20 | });
21 |
22 | jest.mock('../src/components/benchmarkTime', () => {
23 | return () => Mocked BenchmarkTime Component
;
24 | });
25 |
26 | const chromeMock = {
27 | runtime: {
28 | sendMessage: jest.fn((message, callback) => {
29 | // Provide a dummy response
30 | callback({ type: "MOCK_RESPONSE",
31 | payload: '{ "example": "payload" }',
32 | });
33 | }),
34 | onMessage: {
35 | addListener: jest.fn(),
36 | },
37 | },
38 | devtools: {
39 | inspectedWindow: {
40 | reload: jest.fn(),
41 | },
42 | },
43 | };
44 |
45 | global.chrome = chromeMock;
46 |
47 |
48 | test('renders the App component and intially with the button "Start PerfSSR"', () => {
49 | render(
8 |
About Traversy Media
9 |
10 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
11 | molestiae ipsam, et aut consequatur ipsum voluptates quasi, quos
12 | recusandae doloribus provident consequuntur amet nobis est voluptate
13 | perferendis quaerat distinctio saepe dolores perspiciatis ex ab nostrum
14 | eaque! Porro perspiciatis possimus, sed a quidem sunt sit doloremque
15 | molestiae maiores blanditiis quasi quod.
16 |
17 |
4 |
Our Team
5 |
6 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure tenetur
7 | ducimus laboriosam eaque recusandae tempora enim aut, quae error eum
8 | ipsum reiciendis temporibus dolore delectus ullam impedit cumque id.
9 | Itaque?
10 |
11 |
9 | Loading repo...
}>
13 | Loading directories...}>
16 |
18 |
19 | );
20 | };
21 | export default RepoPage;
22 |
--------------------------------------------------------------------------------
/examples/sample-app/app/code/repos/page.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { FaStar, FaCodeBranch, FaEye } from "react-icons/fa";
3 | async function fetchRepos() {
4 | const response = await fetch(
5 | "https://api.github.com/users/bradtraversy/repos",
6 | {
7 | next: {
8 | revalidate: 60,
9 | },
10 | }
11 | );
12 |
13 | await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 1 second
14 |
15 | const repos = await response.json();
16 | return repos;
17 | }
18 |
19 | const ReposPage = async () => {
20 | const repos = await fetchRepos();
21 |
22 | return (
23 |
24 |
Repositories
25 |
46 |
6 | {courses.map((course) => (
7 |
8 |
{course.title}
9 |
Level: {course.level}
10 |
{course.description}
11 |
12 | Go To Course
13 |
14 |
15 | ))}
16 |
{repo.name}
23 | {repo.description}
24 |
25 |
26 | {repo.stargazers_count}
28 |
29 |
30 | {repo.forks_count}
32 |
33 |
34 | {repo.watchers_count}
36 |
37 |
Directories
25 |
26 | {dirs.map((dir) => (
27 |
28 |
30 | ))}
31 |
32 |
33 | );
34 | };
35 | export default RepoDirs;
36 |
--------------------------------------------------------------------------------
/examples/sample-app/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/PerfSSR/5d1969f31eb577c717dcd92f7b76ea84d2df4aff/examples/sample-app/app/favicon.ico
--------------------------------------------------------------------------------
/examples/sample-app/app/globals.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --primary-color: #0070f3;
3 | }
4 |
5 | html,
6 | body {
7 | margin: 0;
8 | padding: 0;
9 | font-size: 16px;
10 | background-color: #333;
11 | color: #fff;
12 | }
13 |
14 | .container {
15 | max-width: 1100px;
16 | margin: 0 auto;
17 | padding: 0 1rem;
18 | }
19 |
20 | .btn {
21 | display: inline-block;
22 | background-color: var(--primary-color);
23 | color: #fff;
24 | padding: 0.5rem 1rem;
25 | border: none;
26 | border-radius: 4px;
27 | font-size: 1rem;
28 | cursor: pointer;
29 | text-decoration: none;
30 | }
31 |
32 | .btn:hover {
33 | background-color: #0058b7;
34 | color: #fff;
35 | }
36 |
37 | .btn-back {
38 | display: inline-block;
39 | background-color: #f4f4f4;
40 | color: #333;
41 | padding: 0.5rem 1rem;
42 | border: none;
43 | border-radius: 4px;
44 | font-size: 0.8rem;
45 | cursor: pointer;
46 | text-decoration: none;
47 | margin-bottom: 1.3rem;
48 | }
49 |
50 | .header {
51 | display: flex;
52 | justify-content: center;
53 | align-items: center;
54 | background-color: #0047ab;
55 | color: #fff;
56 | padding: 1rem;
57 | border-bottom: 5px solid #fff;
58 | }
59 |
60 | .logo {
61 | text-align: center;
62 | margin-bottom: 0.5rem;
63 | }
64 |
65 | .logo a {
66 | font-size: 1.5rem;
67 | font-weight: bold;
68 | color: #fff;
69 | text-decoration: none;
70 | }
71 |
72 | .links a {
73 | margin: 0 0.5rem 0 0.5rem;
74 | color: #fff;
75 | text-decoration: none;
76 | }
77 |
78 | .links a:hover {
79 | text-decoration: underline;
80 | }
81 |
82 | .search-form {
83 | display: flex;
84 | align-items: center;
85 | }
86 |
87 | .search-input {
88 | flex-grow: 1;
89 | padding: 0.8rem;
90 | border: 0;
91 | border-radius: 4px;
92 | font-size: 1rem;
93 | }
94 |
95 | .search-button {
96 | padding: 0.7rem 1rem;
97 | margin-left: 0.5rem;
98 | background-color: var(--primary-color);
99 | color: #fff;
100 | border: none;
101 | border-radius: 4px;
102 | font-size: 1rem;
103 | cursor: pointer;
104 | }
105 |
106 | .search-button:hover {
107 | background-color: #0058b7;
108 | }
109 |
110 | .search-input:focus,
111 | .search-button:focus {
112 | outline: none;
113 | border-color: var(--primary-color);
114 | box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.2);
115 | }
116 |
117 | .repos-container {
118 | max-width: 800px;
119 | margin: 0 auto;
120 | padding: 2rem 0;
121 | }
122 |
123 | .repo-list {
124 | list-style: none;
125 | margin: 0;
126 | padding: 0;
127 | }
128 |
129 | .repo-list li {
130 | margin: 2rem 0;
131 | }
132 |
133 | .repo-list a {
134 | display: block;
135 | background-color: #fff;
136 | color: #333;
137 | padding: 1rem;
138 | border-radius: 4px;
139 | text-decoration: none;
140 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
141 | transition: all 0.3s ease-in-out;
142 | }
143 |
144 | .repo-list a:hover {
145 | transform: translateY(-5px);
146 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
147 | }
148 |
149 | .repo-list h3 {
150 | margin: 0;
151 | font-size: 1.5rem;
152 | }
153 |
154 | .repo-list p {
155 | margin: 0;
156 | color: #666;
157 | font-size: 1.2rem;
158 | }
159 |
160 | .repo-details {
161 | display: flex;
162 | justify-content: space-between;
163 | margin-top: 1rem;
164 | color: #999;
165 | }
166 |
167 | .repo-details span {
168 | display: flex;
169 | align-items: center;
170 | }
171 |
172 | .repo-details svg {
173 | margin-right: 0.5rem;
174 | }
175 |
176 | .loader {
177 | display: flex;
178 | justify-content: center;
179 | align-items: center;
180 | height: 100vh;
181 | }
182 |
183 | .spinner {
184 | border: 4px solid rgba(0, 0, 0, 0.1);
185 | border-left-color: blue;
186 | border-radius: 50%;
187 | width: 40px;
188 | height: 40px;
189 | animation: spin 1s linear infinite;
190 | }
191 |
192 | .card {
193 | border: 1px solid #ccc;
194 | border-radius: 4px;
195 | padding: 1rem;
196 | margin: 1rem;
197 |
198 | background-color: #fff;
199 | color: #333;
200 | }
201 |
202 | .card h2 {
203 | font-size: 1.5rem;
204 | margin-top: 0;
205 | }
206 |
207 | .card .card-content {
208 | margin-top: 1rem;
209 | }
210 |
211 | .card .card-stats {
212 | display: flex;
213 | margin: 1rem 0;
214 | }
215 |
216 | .card .card-stat {
217 | display: flex;
218 | align-items: center;
219 | margin-right: 1rem;
220 | }
221 |
222 | .card .card-stat svg {
223 | margin-right: 0.5rem;
224 | }
225 |
226 | .card .card-stat span {
227 | font-size: 0.9rem;
228 | }
229 |
230 | .courses .card h2 {
231 | margin-bottom: 0;
232 | }
233 |
234 | @keyframes spin {
235 | to {
236 | transform: rotate(360deg);
237 | }
238 | }
239 |
--------------------------------------------------------------------------------
/examples/sample-app/app/layout.jsx:
--------------------------------------------------------------------------------
1 | import { Poppins } from 'next/font/google';
2 | import Header from './components/Header';
3 | import './globals.css';
4 |
5 | const poppins = Poppins({
6 | weight: ['400', '700'],
7 | subsets: ['latin'],
8 | });
9 |
10 | export const metadata = {
11 | title: 'Traversy Media',
12 | description: 'Web development tutorials and courses',
13 | keywords:
14 | 'web development, web design, javascript, react, node, angular, vue, html, css',
15 | };
16 |
17 | export default function RootLayout({ children }) {
18 | return (
19 |
20 |
21 |
22 | {children}
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/examples/sample-app/app/loading.jsx:
--------------------------------------------------------------------------------
1 | const LoadingPage = () => {
2 | return (
3 |
6 | );
7 | };
8 | export default LoadingPage;
9 |
--------------------------------------------------------------------------------
/examples/sample-app/app/page.jsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { useState, useEffect } from 'react';
3 | import Link from 'next/link';
4 | import LoadingPage from './loading';
5 | import Courses from './components/Courses';
6 | import CourseSearch from './components/CourseSearch';
7 |
8 | const HomePage = () => {
9 | const [courses, setCourses] = useState([]);
10 | // const [loading, setLoading] = useState(true);
11 |
12 | useEffect(() => {
13 | const fetchCourses = async () => {
14 | const res = await fetch('/api/courses');
15 | const data = await res.json();
16 | setCourses(data);
17 | // setLoading(false);
18 | };
19 |
20 | fetchCourses();
21 | }, []);
22 |
23 | // if (loading) {
24 | // return Welcome To Traversy Meida
30 | setCourses(results)} />
31 | PerfSSR!
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/extension/devtools.ts:
--------------------------------------------------------------------------------
1 | chrome.devtools.panels.create(
2 | "PerfSSR",
3 | null, // to add logo later
4 | "panel.html"
5 | );
6 |
7 | // Create a connection to the background service worker
8 | const backgroundPageConnection = chrome.runtime.connect();
9 |
10 | // Relay the tab ID to the background service worker
11 | backgroundPageConnection.postMessage({
12 | name: "init",
13 | tabId: chrome.devtools.inspectedWindow.tabId,
14 | });
--------------------------------------------------------------------------------
/extension/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 3,
3 | "name": "PerfSSR",
4 | "version": "1.0.1",
5 |
6 | "description": "A Next.js Performance Analytics Tool",
7 |
8 | "author": "PerfSSR team",
9 | "devtools_page": "devtools.html",
10 | "update_url": "https://path/to/updateInfo.xml",
11 | "version_name": "1.0 beta",
12 | "icons": {
13 | "16": "./assets/perfssr_favicon.png",
14 | "48": "./assets/perfssr_icon_48.png",
15 | "128": "./assets/perfssr_icon_128.png"
16 | },
17 | "background": {
18 | "service_worker": "bundles/background.bundle.js"
19 | },
20 |
21 | "permissions": ["tabs", "activeTab", "webRequest", "scripting"],
22 | "host_permissions": ["http://localhost/*"],
23 |
24 | "content_scripts": [
25 | {
26 | "matches": ["http://localhost:3000/*"],
27 | "js": ["bundles/contentScript.bundle.js"]
28 | }
29 | ],
30 |
31 | "web_accessible_resources": [
32 | {
33 | "resources": ["bundles/backend.bundle.js"],
34 | "matches": [""]
35 | }
36 | ]
37 | }
38 |
--------------------------------------------------------------------------------
/extension/panel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: 'ts-jest',
3 | testEnvironment: 'jest-environment-jsdom',
4 | testMatch: ['**/__tests__/*.test.js'],
5 | transform: {
6 | '^.+\\.jsx?$': 'babel-jest',
7 | },
8 | moduleNameMapper: {
9 | '\\.(css|scss)$': '/testing-files/style.mock.js',
10 | },
11 | };
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "perfssr",
3 | "version": "1.0.0",
4 | "description": "performance metrics for next.js",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "webpack serve --open --hot --env NODE_ENV=development",
8 | "build": "webpack --env NODE_ENV=production",
9 | "test": "jest"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "dependencies": {
15 | "@emotion/react": "^11.11.0",
16 | "@emotion/styled": "^11.11.0",
17 | "@kurkle/color": "^0.3.2",
18 | "@mui/material": "^5.12.3",
19 | "chart.js": "^4.3.0",
20 | "chartjs-plugin-zoom": "^2.0.1",
21 | "css-loader": "^6.7.3",
22 | "react": "^18.2.0",
23 | "react-dom": "^18.2.0",
24 | "recharts": "^2.6.2",
25 | "style-loader": "^3.3.2",
26 | "ts-loader": "^9.4.2"
27 | },
28 | "devDependencies": {
29 | "@babel/core": "^7.21.8",
30 | "@babel/preset-env": "^7.22.2",
31 | "@babel/preset-react": "^7.18.6",
32 | "@babel/preset-typescript": "^7.21.5",
33 | "@testing-library/jest-dom": "^5.16.5",
34 | "@testing-library/react": "^14.0.0",
35 | "@types/chrome": "^0.0.236",
36 | "@types/jest": "^29.5.1",
37 | "@types/react": "^18.2.7",
38 | "babel-jest": "^29.5.0",
39 | "babel-loader": "^9.1.2",
40 | "copy-webpack-plugin": "^11.0.0",
41 | "html-webpack-plugin": "^5.5.1",
42 | "jest": "^29.5.0",
43 | "jest-environment-jsdom": "^29.5.0",
44 | "jsdom": "^22.0.0",
45 | "ts-jest": "^29.1.0",
46 | "webpack": "^5.82.0",
47 | "webpack-cli": "^5.1.0",
48 | "webpack-dev-server": "^4.15.0"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/perfssr-npm-package/README.md:
--------------------------------------------------------------------------------
1 | PerfSSR is a lightweight express server paired with our Chrome Developer Tool to listen to Next.js open-telemetry instrumentation.
2 |
--------------------------------------------------------------------------------
/perfssr-npm-package/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "perfssr",
3 | "version": "1.0.0",
4 | "lockfileVersion": 3,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "perfssr",
9 | "version": "1.0.0",
10 | "license": "MIT"
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/perfssr-npm-package/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "perfssr",
3 | "version": "1.0.0",
4 | "description": "Performance Analytics Tool for Next.js",
5 | "main": "server.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/oslabs-beta/perfssr.git"
12 | },
13 | "keywords": [
14 | "Nextjs",
15 | "PerfSSR"
16 | ],
17 | "author": "OSLabs Beta",
18 | "license": "MIT",
19 | "bugs": {
20 | "url": "https://github.com/oslabs-beta/perfssr/issues"
21 | },
22 | "homepage": "https://github.com/oslabs-beta/perfssr#readme"
23 | }
24 |
--------------------------------------------------------------------------------
/perfssr-npm-package/server.js:
--------------------------------------------------------------------------------
1 | //express configuration
2 | const express = require("express");
3 | const ws = require("ws");
4 | const app = express();
5 |
6 | app.use(express.json());
7 | app.use(express.urlencoded({ extended: true }));
8 |
9 | let client = null;
10 | // ws instance
11 | const wss = new ws.Server({ noServer: true });
12 |
13 | //controller that handles parsing of span data
14 | const spanController = require("./spanController");
15 |
16 | //at root, middleware will parse spans, set parsed data on res.locals.clientData
17 | app.use("/", spanController.parseTrace, (req, res) => {
18 | if (res.locals.clientData.length > 0 && client !== null) {
19 | client.send(JSON.stringify(res.locals.clientData));
20 | // // what to do after a connection is established
21 | res.sendStatus(200);
22 | }
23 | });
24 |
25 | //server listening on port 4000
26 | const server = app.listen(4000, () => {
27 | console.log(`PerfSSR server listening on port 4000`);
28 | });
29 |
30 | // handle upgrade of the request
31 | server.on("upgrade", function upgrade(request, socket, head) {
32 | try {
33 | // authentication and some other steps will come here
34 | // we can choose whether to upgrade or not
35 |
36 | wss.handleUpgrade(request, socket, head, function done(ws) {
37 | wss.emit("connection", ws, request);
38 | });
39 | } catch (err) {
40 | socket.write("HTTP/1.1 401 Unauthorized\r\n\r\n");
41 | socket.destroy();
42 | return;
43 | }
44 | });
45 |
46 | wss.on("connection", (ctx) => {
47 | client = ctx;
48 | // print number of active connections
49 | console.log("connected", wss.clients.size);
50 |
51 | // handle close event
52 | ctx.on("close", () => {
53 | console.log("closed", wss.clients.size);
54 | });
55 | });
56 |
--------------------------------------------------------------------------------
/perfssr-npm-package/spanController.js:
--------------------------------------------------------------------------------
1 | const spanController = {};
2 |
3 | /**
4 | * parses spans and extracts necessary data that will be sent back to client/devtool
5 | * @param {*} span - Array that contains one span object, containing attributes with tracing information
6 | *
7 | * Data object to send to client/dashboard
8 | * - spanType: type of span either fetch or get route path
9 | * - parentSpanId: id of parent span, shared between Apprender.fetch and next.route
10 | * - spandId: id of span
11 | * - traceId: id of trace
12 | * - parentSpanId: id of parent span, shared between Apprender.fetch and next.route
13 | * - startTime: start time in unix converted to ms
14 | * - endTime: end time in unix converted to ms
15 | * - duration: time it took to run fetch and come back with response in ms
16 | * - url: original fetch url
17 | * - httpMethod: http method used (GET, POST, etc)
18 | */
19 |
20 | const parseFetchSpan = (span, clientArr) => {
21 |
22 | const spanObj = span[0];
23 | const dataObj = {
24 | spanType: "fetch",
25 | parentSpanId: spanObj.parentSpanId,
26 | spanId: spanObj.spanId,
27 | traceId: spanObj.traceId,
28 | startTime: spanObj.startTimeUnixNano / Math.pow(10, 6),
29 | endTime: spanObj.endTimeUnixNano / Math.pow(10, 6),
30 | duration:(spanObj.endTimeUnixNano - spanObj.startTimeUnixNano) / Math.pow(10, 6)
31 | ,
32 | url: spanObj.attributes.find((attr) => attr.key === "http.url")?.value
33 | ?.stringValue,
34 | httpMethod: spanObj.attributes.find((attr) => attr.key === "http.method")
35 | ?.value?.stringValue,
36 | };
37 |
38 | clientArr.push(dataObj);
39 | };
40 |
41 | /**
42 | * parses spans and extracts necessary data that will be sent back to client/devtool
43 | * @param {*} span - Array that contains one span object, containing attributes with tracing information
44 | *
45 | * Data object for routes
46 | * - spanType: type of span either fetch or get route path
47 | * - parentSpanId: id of parent span, shared between Apprender.fetch and next.route, undefined if span type of BaseServer.handleRequest
48 | * - spandId: id of span
49 | * - traceId: id of trace
50 | * - statusCode: http status code; undefined if span type of AppRender.getBodyResult
51 | * - startTime: start time in unix converted to ms
52 | * - endTime: end time in unix converted to ms
53 | * - duration: time it took to run fetch and come back with response in ms
54 | * - url: original fetch url
55 | * - httpMethod: http method used (GET, POST, etc)
56 | */
57 | const parseHandleRequest = (span, clientArr) => {
58 | const spanObj = span[0];
59 | const dataObj = {
60 | spanType: "route",
61 | parentSpanId: spanObj.parentSpanId,
62 | spanId: spanObj.spanId,
63 | traceId: spanObj.traceId,
64 | statusCode: spanObj.attributes.find(
65 | (attr) => attr.key === "http.status_code"
66 | )?.value?.intValue,
67 | startTime: spanObj.startTimeUnixNano / Math.pow(10, 6),
68 | endTime: spanObj.endTimeUnixNano / Math.pow(10, 6),
69 | duration: (spanObj.endTimeUnixNano - spanObj.startTimeUnixNano) / Math.pow(10, 6),
70 | route: spanObj.attributes.find(
71 | (attr) => attr.key === "http.target" || attr.key === "next.route"
72 | )?.value?.stringValue,
73 | };
74 | clientArr.push(dataObj);
75 | };
76 |
77 | /**
78 | *
79 | * @param {*} req - request object
80 | * @param {*} res - response object
81 | * @param {*} next - express next object
82 | * @returns - call to next middleware
83 | */
84 |
85 | spanController.parseTrace = (req, res, next) => {
86 | //grab the incoming spans from the request body
87 | const spans = req.body.resourceSpans[0].scopeSpans[0].spans;
88 |
89 | const spanType = spans[0].attributes.find(
90 | (attr) => attr.key === "next.span_type"
91 | )?.value?.stringValue;
92 | res.locals.clientData = [];
93 |
94 | //handle cases if span type is a route or a fetch
95 | switch (spanType) {
96 | case "AppRender.fetch":
97 | parseFetchSpan(spans, res.locals.clientData);
98 | break;
99 | case "BaseServer.handleRequest":
100 | if (
101 | spans[0].attributes.find(
102 | (attr) =>
103 | attr.key === "http.target" &&
104 | !attr.value.stringValue.includes("favicon")
105 | )
106 | )
107 | parseHandleRequest(spans, res.locals.clientData);
108 | break;
109 | case "AppRender.getBodyResult":
110 | parseHandleRequest(spans, res.locals.clientData);
111 | break;
112 | default:
113 | return next();
114 | }
115 |
116 | return next();
117 | };
118 |
119 | module.exports = spanController;
120 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, {
2 | useRef,
3 | useEffect,
4 | useCallback,
5 | useState,
6 | useMemo,
7 | } from "react";
8 | import useWebSocket from "./hooks/webSocketHook";
9 | import { createTheme, ThemeProvider } from "@mui/material/styles";
10 | import { Box } from "@mui/material";
11 | import MetricContainer from "./components/metricContainer";
12 | import ServerComponent from "./components/serverComponent";
13 | import ClientComponent from "./components/clientComponent";
14 | import BenchmarkTime from "./components/benchmarkTime";
15 | import "./style.css";
16 | import NetworkPanel from './components/NetworkPanel';
17 |
18 | function App() {
19 | const theme = useMemo(() =>
20 | createTheme({
21 | palette: {
22 | primary: {
23 | main: "#881dff",
24 | light: "#d9b6ff",
25 | },
26 | secondary: {
27 | main: "#46b7ff",
28 | light: "#55fffe",
29 | },
30 | background: {
31 | default: "#131219",
32 | paper: "#222233",
33 | },
34 | text: {
35 | primary: "#efecfd",
36 | },
37 | success: {
38 | main: "#47ff82",
39 | },
40 | warning: {
41 | main: "#e9f835",
42 | },
43 | error: {
44 | main: "#ff4b4b",
45 | },
46 | },
47 | })
48 | );
49 |
50 | const [metrics, setMetrics] = useState({});
51 | const [fiberTree, setFiberTree] = useState();
52 | const [messagesList, setMessagesList] = useState([]);
53 | const ws = useWebSocket({ socketUrl: "ws://localhost:4000" });
54 |
55 | useEffect(() => {
56 | const getMessageFromQueue = () => {
57 | // Initial fiber tree will be sent before App.js renders
58 | // so send a message to background.ts once App.js is done rendering to retrieve the fiber tree message
59 | chrome.runtime.sendMessage(
60 | { type: "GET_MESSAGE_FROM_QUEUE" },
61 | (message) => {
62 | if (message) {
63 | // Process the message retrieved from the queue
64 | setFiberTree(JSON.parse(message.payload));
65 | }
66 | }
67 | );
68 | };
69 | getMessageFromQueue();
70 | }, []);
71 |
72 | // receive messages from socket and set the messageList accoridngly
73 | useEffect(() => {
74 | if (ws.data) {
75 | const { message } = ws.data;
76 | setMessagesList((prevMessagesList) => {
77 | if (message.length > 0) return [].concat(message, prevMessagesList);
78 | })
79 | }
80 | }, [ws.data]);
81 |
82 | useEffect(() => {
83 | chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
84 | // listener to the message sent from background.ts
85 | // if the message is on metrics, set the metrics accordingly
86 | setMetrics((prevMetrics) => {
87 | return {
88 | ...prevMetrics,
89 | [message.metricName]: message.value,
90 | };
91 | });
92 |
93 | // if the message is on fiber tree, set the fiberTree accordingly
94 | setFiberTree((prevFiberTree) => {
95 | if (
96 | message.type === "UPDATED_FIBER" ||
97 | message.type === "FIBER_INSTANCE"
98 | ) {
99 | return JSON.parse(message.payload);
100 | }
101 | return prevFiberTree;
102 | });
103 | });
104 | }, []);
105 |
106 | const handleRefreshClick = () => {
107 | try {
108 | setMessagesList([]);
109 | chrome.devtools.inspectedWindow.reload(); // Refresh the inspected page
110 | } catch (error) {
111 | console.error("Error occurred while refreshing the page:", error);
112 | }
113 | };
114 |
115 | const handleClear = () => {
116 | setMessagesList([]);
117 | }
118 |
119 | let atBegin =
120 | Object.keys(metrics).length === 0 ? (
121 |
122 |
123 |
PerfSSR - Your Next.js Analysitcs Tool
124 |
125 | Start PerfSSR
126 |
127 |
130 |
131 | Regenerate Analytics for Current Page
132 |
133 |
Overall Performance Metrics
134 |
135 |
136 |
138 |
139 |
Server Side Components Rendering Times
140 |
144 |
Client Side Components Rendering Times
145 |
149 |
Components Rendering Time Benchmarking
150 |
156 |
Server-side Fetching Summary
157 |
158 | Clear network data
159 |
160 |
161 |
163 |
{atBegin}
;
167 | }
168 |
169 | export default App;
170 |
--------------------------------------------------------------------------------
/src/components/NetworkPanel.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { styled } from '@mui/material/styles';
3 | import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
4 | import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
5 |
6 | const NetworkPanel = (props) => {
7 | const waterfall = props.chartData ? processData(props.chartData) : null;
8 |
9 | //function to process start/end times for waterfall data
10 | function processData(chartData) {
11 | //span data received from server is from most recent to oldest
12 | //need to reverse our array to display chart data chronologically
13 | chartData.sort((a, b) => a.startTime - b.startTime)
14 |
15 | //get earliest time and latest end time in our chartData array
16 | const minStartTime = Math.min(...chartData.map(item => item.startTime ? item.startTime: Number.POSITIVE_INFINITY));
17 | const maxEndTime = Math.max(...chartData.map(item => item.endTime ? item.endTime: Number.NEGATIVE_INFINITY));
18 |
19 | // find the min and max duration in the dataset
20 | const minDuration = Math.min(...chartData.map(item => item.endTime - item.startTime));
21 | const maxDuration = Math.max(...chartData.map(item => item.endTime - item.startTime));
22 |
23 | // function to normalize a time or duration
24 | const scale = (value, min, max) => (value - min) / (max - min);
25 |
26 | // Generate waterfall bar data for each span object we have
27 | const barData = chartData.map((item, index) => {
28 | const scaledStartTime = scale(item.startTime, minStartTime, maxEndTime);
29 | const scaledDuration = scale(item.endTime - item.startTime, minDuration, maxDuration);
30 | return {
31 | ...item,
32 | index: index,
33 | pv: scaledStartTime, //scaledStartTime, // pv is the floating part (transparent)
34 | uv: scaledDuration, //scaledEndTime - scaledStartTime // uv is the part of the graph we want to show
35 | }})
36 |
37 | //need maxEndTime to get the upperbound limit for waterfall chart
38 | const maxScaledEndTime = Math.max(...barData.map(item => item.uv + item.pv));
39 |
40 | const parent = barData.filter(item => !item.parentSpanId);
41 | // if no parent span present in the span array, just display all the span directly
42 | let toggle = true;
43 | if (parent.length !== 0) toggle = false;
44 |
45 | const StyledTableRow = styled(TableRow)(({ theme }) => ({
46 | '&:nth-of-type(odd)': {
47 | backgroundColor: '#353554',
48 | },
49 | // hide last border
50 | '&:last-child td, &:last-child th': {
51 | border: 0,
52 | },
53 | }));
54 |
55 | const renderRow = (data, i, indent) => {
56 | const children = barData.filter(child => data.spanId === child.parentSpanId);
57 | let padding = indent * 20;
58 |
59 | return (
60 |
61 |
62 | {data.route ? data.route : data.url}
63 | {data.httpMethod ? data.httpMethod : ""}
64 | {data.statusCode}
65 | {data.duration.toFixed(2)}
66 |
67 |
74 |
78 | |
79 |
80 |
81 |
82 |
83 | {children.map((child, j) => renderRow(child, j, indent+1))}
84 |
85 | )
86 | }
87 |
88 | return (
89 |
90 |
91 |
92 |
93 | Endpoint / URL
94 | Method
95 | Status
96 | Duration (ms)
97 | Waterfall
98 |
99 |
100 |
101 | {toggle ? barData.map((data, i) => renderRow(data, i)) : parent.map((data, i) => renderRow(data, i, 1))}
102 |
103 |
104 |
105 | );
106 | }
107 |
108 | return (
109 |
110 | {waterfall}
111 |
112 | )
113 | };
114 |
115 | export default NetworkPanel;
--------------------------------------------------------------------------------
/src/components/benchmarkTime.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from "react";
2 | import Chart from 'chart.js/auto'
3 |
4 | const BenchmarkTime = (props) => {
5 |
6 | const chartRef = useRef(null);
7 | const [chart, setChart] = useState(null);
8 | const [toggle, setToggle] = useState(false);
9 |
10 | const inputData = [];
11 | const notThese = [
12 | "InnerLayoutRouter", "RedirectBoundary", "NotFoundBoundary",
13 | "LoadingBoundary", "ErrorBoundary", "HotReload", "Router",
14 | "ServerRoot", "RSCComponent", "Root", "ThrottledComponent",
15 | "AppRouter", "OuterLayoutRouter", "RenderFromTemplateContext",
16 | "HistoryUpdater", "AppRouterAnnouncer", "ScrollAndFocusHandler"
17 | ];
18 |
19 | const convertTreeToChart = (tree) => {
20 |
21 | //function to perform breadth first search on fiber tree to get nodes
22 | const bfs = (...tree) => {
23 | const q = [...tree];
24 |
25 | while (q.length > 0) {
26 | const node = q.shift();
27 | // Only keep nodes that are funtion components and with a component name
28 | if ((node.tagObj.tag === 0 || node.tagObj.tag === 11) && node.componentName !== "" && !notThese.includes(node.componentName)) {
29 | if (node.renderDurationMS === 0)
30 | inputData.push({componentName: node.componentName,
31 | time: Number(node.selfBaseDuration * 100)
32 | })
33 | else inputData.push({componentName: node.componentName,
34 | time: Number(node.renderDurationMS * 100)
35 | })
36 | }
37 | if (node.children.length > 0) q.push(...node.children);
38 | }
39 | }
40 |
41 | bfs(tree);
42 | let avg = inputData.reduce((acc, curr) => acc + curr.time, 0) / inputData.length;
43 |
44 | const processBenchmarking = (t) => {
45 | let result;
46 | result = t < avg ? (avg/t) : -(t/avg)
47 | return result.toFixed(2);
48 | }
49 |
50 | inputData.forEach(e => {
51 | e.time = Number(processBenchmarking(e.time))
52 | });
53 |
54 | }
55 |
56 | useEffect(() => {
57 |
58 | if (props.chartData)
59 | convertTreeToChart(...props.chartData.root.children);
60 |
61 | if (inputData.length === 0) setToggle(false);
62 | else setToggle(true);
63 |
64 | if (!chartRef.current) {
65 | return;
66 | }
67 |
68 | // If there's an existing chart, destroy it before creating a new one
69 | if (chart) {
70 | chart.destroy();
71 | }
72 |
73 | const ctx = chartRef.current.getContext("2d");
74 |
75 | //configuration of data into readable chart data for component
76 | const newChart = new Chart(ctx, {
77 | type: 'bar',
78 | data: {
79 | labels: inputData.map((row) => row.componentName),
80 | datasets: [
81 | {
82 | label: props.label,
83 | data: inputData.map((row) => row.time),
84 | },
85 | ],
86 | },
87 | options: {
88 | indexAxis: 'y',
89 | // Elements options apply to all of the options unless overridden in a dataset
90 | // In this case, we are setting the border of each horizontal bar to be 2px wide
91 | elements: {
92 | bar: {
93 | borderWidth: 2,
94 | }
95 | },
96 | responsive: true,
97 | plugins: {
98 | legend: {
99 | position: 'top',
100 | },
101 | title: {
102 | display: false,
103 | }
104 | }
105 | },
106 | });
107 | setChart(newChart);
108 |
109 | // Clean up the previous chart instance when the component unmounts
110 | return () => {
111 | if (chart) {
112 | chart.destroy();
113 | }
114 | };
115 |
116 | }, [props.chartData]);
117 |
118 | const display = toggle
119 | ? (No valid components available
)
121 |
122 | return (
123 |
124 | {display}
125 |
126 | );
127 | };
128 |
129 | export default BenchmarkTime;
--------------------------------------------------------------------------------
/src/components/clientComponent.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from "react";
2 | import Chart from 'chart.js/auto';
3 | import zoomPlugin from 'chartjs-plugin-zoom';
4 | Chart.register(zoomPlugin);
5 | import "../style.css";
6 |
7 | const ClientComponent = (props) => {
8 |
9 | const chartRef = useRef(null);
10 | const [chart, setChart] = useState(null);
11 | const [toggle, setToggle] = useState(false);
12 |
13 | const inputData = [];
14 | // excluding built-in Next.js components
15 | const notThese = [
16 | "InnerLayoutRouter", "RedirectBoundary", "NotFoundBoundary",
17 | "LoadingBoundary", "ErrorBoundary", "HotReload", "Router",
18 | "ServerRoot", "RSCComponent", "Root", "ThrottledComponent",
19 | "OuterLayoutRouter", "RenderFromTemplateContext",
20 | "HistoryUpdater", "AppRouterAnnouncer", "ScrollAndFocusHandler"
21 | ];
22 |
23 | //function will take in a fiber tree and parse through all the nodes to generate an input array for charts
24 | const convertTreeToChart = (tree) => {
25 |
26 | //using breadth first search to get all the nodes from fiber tree
27 | const bfs = (...tree) => {
28 | const q = [...tree];
29 |
30 | while (q.length > 0) {
31 | const node = q.shift();
32 | // Only keep nodes that are funtion components and with a component name
33 | // client components also use Hooks
34 | if ((node.tagObj.tag === 0 || node.tagObj.tag === 11) && node.componentName !== "" && !notThese.includes(node.componentName) && node._debugHookTypes !== null) {
35 | if (node.renderDurationMS === 0)
36 | inputData.push({componentName: node.componentName,
37 | time: Number((node.selfBaseDuration * 100))
38 | })
39 | else inputData.push({componentName: node.componentName,
40 | time: Number((node.renderDurationMS * 100))
41 | })
42 | }
43 | if (node.children.length > 0) q.push(...node.children);
44 | }
45 | }
46 |
47 | bfs(tree);
48 | }
49 |
50 | useEffect(() => {
51 |
52 | if (props.chartData)
53 | convertTreeToChart(...props.chartData.root.children);
54 |
55 | //if we receive no valid components from fiber tree, then set toggle to false
56 | if (inputData.length === 0) setToggle(false);
57 | else setToggle(true);
58 |
59 | if (!chartRef.current) {
60 | return;
61 | }
62 |
63 | // If there's an existing chart, destroy it before creating a new one
64 | if (chart) {
65 | chart.destroy();
66 | }
67 |
68 | const scales = {
69 | x: {
70 | type: 'category'
71 | },
72 | y: {
73 | type: 'linear'
74 | },
75 | };
76 |
77 | const ctx = chartRef.current.getContext("2d");
78 |
79 | //define new chart
80 | const newChart = new Chart(ctx, {
81 | type: "bar",
82 | data: {
83 | labels: inputData.map((row) => row.componentName),
84 | datasets: [
85 | {
86 | label: props.label,
87 | data: inputData.map((row) => row.time),
88 | backgroundColor: '#ff6384',
89 | },
90 | ],
91 | },
92 | options: {
93 | scales: scales,
94 | plugins: {
95 | zoom: {
96 | pan: {
97 | enabled: true,
98 | mode: 'x',
99 | threshold: 5,
100 | },
101 | zoom: {
102 | wheel: {
103 | enabled: true
104 | },
105 | pinch: {
106 | enabled: true
107 | },
108 | mode: 'x',
109 | },
110 | }
111 | },
112 | }
113 | });
114 |
115 | setChart(newChart);
116 |
117 | // Clean up the previous chart instance when the component unmounts
118 | return () => {
119 | if (chart) {
120 | chart.destroy();
121 | }
122 | };
123 | }, [props.chartData]);
124 |
125 | //display charts conditionally depending if we have valid client components
126 | const display = toggle
127 | ? (No valid client-side components available
)
129 |
130 |
131 | return (
132 |
133 | {display}
134 |
135 | );
136 | };
137 |
138 | export default ClientComponent;
--------------------------------------------------------------------------------
/src/components/customTooltip.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { styled } from '@mui/material/styles';
3 | import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
4 |
5 | const CustomTooltip = styled(({ className, ...props }) => (
6 |
16 | handleClick(name)}
19 | sx={{
20 | position: "relative",
21 | display: "inline-flex",
22 | flexDirection: "column",
23 | alignItems: "center",
24 | justifyContent: "center",
25 | cursor: "pointer",
26 | }}
27 | >
28 |
42 |
64 | {`${Math.round(value)}`}
65 |
66 |
67 |
74 |
75 | {name}
76 |
77 |
78 |
79 |
80 | )
81 | }
82 |
83 | Metric.defaultProps = {
84 | size: 70,
85 | isActive: false,
86 | description: "",
87 | };
88 |
89 | export default Metric;
--------------------------------------------------------------------------------
/src/components/metricContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Metric from "./metric";
3 | import { Box, Paper } from "@mui/material";
4 | import '../style.css';
5 |
6 | const MetricContainer = ({metrics}) => {
7 |
8 | // to process FCP data
9 | let FCP_score = 0;
10 | if (metrics.FCP < 500) FCP_score = Math.round(90 + ((500 - metrics.FCP) / (500 - 50)) * (10 - 0.01));
11 | else if (metrics.FCP < 1800) FCP_score = Math.round(90 - ((metrics.FCP - 500) / (1800 - 500)) * (90 - 80));
12 | else if (metrics.FCP < 3000) FCP_score = Math.round(80 - ((metrics.FCP - 1800) / (3000 - 1800)) * (80 - 60));
13 | else FCP_score = Math.round(60 * Math.exp(-0.003 * (metrics.LCP - 3000)));
14 |
15 | // to process LCP data
16 | let LCP_score = 0;
17 | if (metrics.LCP < 1000) LCP_score = Math.round(90 + ((1000 - metrics.LCP) / (1000 - 80)) * (10 - 0.01));
18 | else if (metrics.LCP < 2500) LCP_score = Math.round(90 - ((metrics.LCP - 1000) / (2500 - 1000)) * (90 - 80));
19 | else if (metrics.LCP < 4000) LCP_score = Math.round(80 - ((metrics.LCP - 2500) / (4000 - 2500)) * (80 - 60));
20 | else LCP_score = Math.round(60 * Math.exp(-0.005 * (metrics.LCP - 4000)));
21 |
22 | // to process CLS data
23 | let CLS_score = 0;
24 | if (metrics.CLS < 0.05) CLS_score = Math.round(90 + ((0.05 - metrics.CLS) / (0.05 - 0)) * (10 - 0.01));
25 | else if (metrics.CLS < 0.1) CLS_score = Math.round(90 - ((metrics.CLS - 0.05) / (0.1 - 0.05)) * (90 - 80));
26 | else if (metrics.CLS < 0.25) CLS_score = Math.round(80 - ((metrics.CLS - 0.1) / (0.25 - 0.1)) * (80 - 60));
27 | else CLS_score = Math.round(60 * Math.exp(-0.003 * (metrics.CLS - 0.25)));
28 | const clsShow = isNaN(metrics.CLS) ? 0 : CLS_score;
29 | const clsValue = isNaN(metrics.CLS) ? 0 : metrics.CLS.toFixed(2);
30 |
31 | // to process TBT data
32 | let TBT_score = 0;
33 | if (metrics.TBT < 100) TBT_score = Math.round(90 + ((100 - metrics.TBT) / (100 - 0)) * (10 - 0.01));
34 | else if (metrics.TBT < 200) TBT_score = Math.round(90 - ((metrics.TBT - 100) / (200 - 100)) * (90 - 80));
35 | else if (metrics.TBT < 600) TBT_score = Math.round(80 - ((metrics.TBT - 200) / (600 - 200)) * (80 - 60));
36 | else TBT_score = Math.round(60 * Math.exp(-0.003 * (metrics.TBT - 600)));
37 |
38 | // to process FID data
39 | let FID_score = 0;
40 | if (metrics.FID < 50) FID_score = Math.round(90 + ((50 - metrics.FID) / (50 - 0)) * (10 - 0.01));
41 | else if (metrics.FID < 100) FID_score = Math.round(90 - ((metrics.FID - 50) / (100 - 50)) * (90 - 80));
42 | else if (metrics.FID < 300) FID_score = Math.round(80 - ((metrics.FID - 100) / (300 - 100)) * (80 - 60));
43 | else FID_score = Math.round(60 * Math.exp(-0.003 * (metrics.FID - 300)));
44 | const fidShow = isNaN(metrics.FID) ? 0 : FID_score;
45 | const fidValue = isNaN(metrics.FID) ? 0 : metrics.FID;
46 |
47 | return (
48 |
49 |
50 |
51 |
52 |
85 |
86 |
87 |
No valid server-side components available
)
122 |
123 | return (
124 |
125 | {display}
126 |
127 | );
128 | };
129 |
130 | export default ServerComponent;
--------------------------------------------------------------------------------
/src/hooks/webSocketHook.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 |
3 | function useWebSocket({
4 | socketUrl,
5 | retry: defaultRetry = 3,
6 | retryInterval = 1500,
7 | }) {
8 | const [data, setData] = useState();
9 | // send function
10 | const [send, setSend] = useState(() => () => undefined);
11 | // state of our connection
12 | const [retry, setRetry] = useState(defaultRetry);
13 | // retry counter
14 | const [readyState, setReadyState] = useState(false);
15 |
16 | useEffect(() => {
17 | const ws = new WebSocket(socketUrl);
18 | ws.onopen = () => {
19 | console.log("Connected to socket");
20 | setReadyState(true);
21 |
22 | // function to send messages
23 | setSend(() => {
24 | return (data) => {
25 | try {
26 | const d = JSON.stringify(data);
27 | ws.send(d);
28 | return true;
29 | } catch (err) {
30 | return false;
31 | }
32 | };
33 | });
34 |
35 | // receive messages
36 | ws.onmessage = (event) => {
37 | const msg = formatMessage(event.data);
38 | setData({ message: msg, timestamp: getTimestamp() });
39 | };
40 | };
41 |
42 | // on close we should update connection state
43 | // and retry connection
44 | ws.onclose = () => {
45 | setReadyState(false);
46 | // retry logic
47 | if (retry > 0) {
48 | setTimeout(() => {
49 | setRetry((retry) => retry - 1);
50 | }, retryInterval);
51 | }
52 | };
53 | // terminate connection on unmount
54 | return () => {
55 | ws.close();
56 | };
57 | // retry dependency here triggers the connection attempt
58 | }, [retry]);
59 |
60 | return { send, data, readyState };
61 | }
62 |
63 | // small utilities that we need
64 | // handle json messages
65 | const formatMessage = (data) => {
66 | try {
67 | const parsed = JSON.parse(data);
68 | return parsed;
69 | } catch (err) {
70 | return data;
71 | }
72 | };
73 |
74 | // get epoch timestamp
75 | const getTimestamp = () => {
76 | return new Date().getTime();
77 | };
78 |
79 | export default useWebSocket;
80 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | PerfSSR
9 |
10 |
11 | 
3 | 
123 |