55 |
57 |
58 |
60 | 66 | The entire "path" of events that occurs when a request is made to an application. A trace is a collection of spans. 67 |
68 | 69 | **Span** 70 | 71 |72 | A trace consists of spans, each of which represents an individual operation. A span contains information on the operation, such as request methods (get/post), start and end timestamps, status codes, and URL endpoints. NextView focuses on three main spans. 73 |
74 | 75 | - Client: The span is a request to some remote service, and does not complete until a response is received. It is usually the parent of a remote server span. 76 | - Server: The child of a remote client span that covers server-side handling of a remote request. 77 | - Internal: The span is an internal operation within an application that does not have remote parents or children. 78 | 79 | **Action** 80 | 81 |82 | The term "action" in the NextView application refers to a child span within a trace. A single trace typically contains a parent span and one or more child spans. While the parent span represents the request to a particular page, the child spans represent the various actions that need to be completed before that request can be fulfilled. 83 |
84 | 85 | For more details on OpenTelemetry, please read the documentation [here](https://opentelemetry.io/docs/concepts/signals/). 86 | 87 | ## User Guidelines 88 | 89 | ### Overview Page 90 | 91 |  92 | 93 | The NextView Dashboard automatically lands the Overview page that provides an overview of performance metrics for your entire Next.js application. Specific values can be seen by hovering over the graph. 94 | 95 | Metrics displayed on the page include: 96 | 97 | - Average page load duration (in milliseconds) 98 | - Total number of traces 99 | - Average span load duration 100 | - Top 5 slowest pages 101 | - Average duration of operations by span kind (in milliseconds) over time 102 | 103 | By default, the overview data covers the last 24 hours. You can modify the time period using the date and time selector located in the top right corner of the dashboard. 104 | 105 | ### User's App Page(s) 106 | 107 |  108 | 109 | On the left-hand sidebar, you will find a list of all the pages in your application. When selecting a specific page, you can view server performance metrics for that individual page. 110 | 111 | Metrics displayed for each page include: 112 | 113 | - Average page load duration (in milliseconds) 114 | - Total number of traces 115 | - Details on each request (duration in milliseconds, number of traces, number of executions) 116 | - Average duration of actions (in milliseconds) over time 117 | 118 | ## Contribution Guidelines 119 | 120 | ### Contribution Method 121 | 122 | We welcome your contributions to the NextView product! 123 | 124 | 1. Fork the repo 125 | 2. Create your feature branch (`git checkout -b feature/newFeature`) and create your new feature 126 | 3. Commit your changes (`git commit -m 'Added [new-feature-description]'`) 127 | 4. Push to the branch (`git push origin feature/newFeature`) 128 | 5. Make a Pull Request 129 | 6. The NextView Team will review the feature and approve! 130 | 131 | ### Looking Ahead 132 | 133 | Here’s a list of features being considered by our team: 134 | 135 | - Enable multiple applications to be added to a single user account 136 | - Incorporate additional OpenTelemetry instrumentation (Metrics and Logs) to visualize on the dashboard 137 | - NextView is currently collecting observability metrics and allows for default visualization via Prometheus. To access metrics, users can spin up the NextView custom collector via Docker: `docker-compose up` which will automatically route all metrics data to Prometheus at the default endpoint of localhost:9090 138 | - Incorporate metrics visualization in our own dashboard moving forward 139 | - Enable user to select time zone 140 | - Enhance security through change password functionality 141 | - Add comprehensive testing suite 142 | - Add a dark mode feature 143 | 144 | ## Contributors 145 | 146 | - Eduardo Zayas: [GitHub](https://github.com/eza16) | [LinkedIn](https://www.linkedin.com/in/eduardo-zayas-avila/) 147 | - Evram Dawd: [GitHub](https://github.com/evramdawd) | [LinkedIn](https://www.linkedin.com/in/evram-d-905a3a2b/) 148 | - Kinski (Jiaxin) Wu: [GitHub](https://github.com/kinskiwu) | [LinkedIn](https://www.linkedin.com/in/kinskiwu/) 149 | - Scott Brasko: [GitHub](https://github.com/Scott-Brasko) | [LinkedIn](https://www.linkedin.com/in/scott-brasko/) 150 | - SooJi Kim: [GitHub](https://github.com/sjk06) | [LinkedIn](https://www.linkedin.com/in/sooji-suzy-kim/) 151 | 152 | ## License 153 | 154 | Distributed under the MIT License. See LICENSE for more information. 155 | -------------------------------------------------------------------------------- /__tests__/server.test.ts: -------------------------------------------------------------------------------- 1 | import app from '../server/server'; 2 | import supertest from 'supertest'; 3 | 4 | const request = supertest(app); 5 | 6 | afterAll(() => app.close()); 7 | 8 | describe('/test endpoint', () => { 9 | it('should return a response', async () => { 10 | const response = await request.get('/test'); 11 | expect(response.status).toBe(200); 12 | expect(response.text).toBe('Hello world'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /helpers/getUser.ts: -------------------------------------------------------------------------------- 1 | import db from '../server/models/dataModels'; 2 | import { QueryResult } from 'pg'; 3 | 4 | interface User { 5 | _id: number; 6 | username: string; 7 | password: string; 8 | created_on: Date; 9 | } 10 | const getUser = async (username: string): Promise
6 |
7 | 
8 | 
9 | 
10 | 
11 | 
12 | 
29 | 
30 | 
31 | 
32 |
33 | NextView is a lightweight and user-friendly application designed to assist developers in optimizing the server performance of their Next.js applications. Our observability platform utilizes OpenTelemetry to trace and monitor crucial server instrumentation data, stores the information in real time, and visualizes the time-series data in clear graphical representations on the NextView Dashboard. With easier data analysis, developers can swiftly identify bottlenecks and pinpoint areas that require server performance optimization, and thereby improve the efficiency of their applications.
34 |
35 | ## Getting Started
36 |
37 | 1. To get started, install our npm package in your Next.js application
38 |
39 | ```bash
40 | npm i nextview-tracing
41 | ```
42 |
43 | 2. In your next.config.js file, opt-in to the Next.js instrumentation by setting the experimental instrumentationHook key to true in the nextConfig object
44 |
45 | ```bash
46 | experimental.instrumentationHook = true;
47 | ```
48 |
49 | 3. Navigate to the NextView Dashboard and copy your generated API key
50 |
51 | 4. In the .env.local file in the root directory of your application (create one if it doesn’t exist), create two environment variables, one for your API Key and one for your service’s name
52 |
53 | ```bash
54 | API_KEY=71 | The entire "path" of events that occurs when a request is made to an application. A trace is a collection of spans. 72 |
73 | 74 | **Span** 75 | 76 |77 | A trace consists of spans, each of which represents an individual operation. A span contains information on the operation, such as request methods (get/post), start and end timestamps, status codes, and URL endpoints. NextView focuses on three main spans. 78 |
79 | 80 | - Client: The span is a request to some remote service, and does not complete until a response is received. It is usually the parent of a remote server span. 81 | - Server: The child of a remote client span that covers server-side handling of a remote request. 82 | - Internal: The span is an internal operation within an application that does not have remote parents or children. 83 | 84 | **Action** 85 | 86 |87 | The term "action" in the NextView application refers to one or more operations (spans) within a trace with the same request method and URL endpoint. 88 |
89 | 90 | For more details on OpenTelemetry, please read the documentation [here](https://opentelemetry.io/docs/concepts/signals/). 91 | 92 | ## Contributors 93 | 94 | - Eduardo Zayas: [GitHub](https://github.com/eza16) | [LinkedIn](https://www.linkedin.com/in/eduardo-zayas-avila/) 95 | - Evram Dawd: [GitHub](https://github.com/evramdawd) | [LinkedIn](https://www.linkedin.com/in/evram-d-905a3a2b/) 96 | - Kinski (Jiaxin) Wu: [GitHub](https://github.com/kinskiwu) | [LinkedIn](https://www.linkedin.com/in/kinskiwu/) 97 | - Scott Brasko: [GitHub](https://github.com/Scott-Brasko) | [LinkedIn](https://www.linkedin.com/in/scott-brasko/) 98 | - SooJi Kim: [GitHub](https://github.com/sjk06) | [LinkedIn](https://www.linkedin.com/in/sooji-suzy-kim/) 99 | 100 | ## License 101 | 102 | Distributed under the MIT License. See LICENSE for more information. 103 | -------------------------------------------------------------------------------- /package/collector-gateway-config.yaml: -------------------------------------------------------------------------------- 1 | receivers: 2 | otlp: 3 | protocols: #HTTP or gRPC 4 | http: 5 | endpoint: 0.0.0.0:4318 6 | grpc: 7 | endpoint: 0.0.0.0:4317 8 | 9 | exporters: # EXPORTERS 10 | prometheus: # For Metrics 11 | endpoint: '0.0.0.0:8889' 12 | send_timestamps: true 13 | namespace: promexample 14 | const_labels: 15 | label1: value1 16 | 17 | logging: # Logging to console 18 | # loglevel: DEBUG 19 | verbosity: detailed 20 | sampling_initial: 5 21 | sampling_thereafter: 200 22 | 23 | # zipkin: 24 | # endpoint: "http://zipkin-all-in-one:9411/api/v2/spans" 25 | # format: proto 26 | 27 | # jaeger: 28 | # endpoint: jaeger-all-in-one:14250 29 | # tls: 30 | # insecure: true 31 | 32 | processors: # PROCESSORS 33 | batch: 34 | timeout: 5s # in production, this will be > 5s for sure 35 | resource: # alters the data that will be sent! Adds attribute of test key & value 36 | attributes: 37 | - key: NextView 38 | value: 'Tracing/Metrics' 39 | action: insert # insert, upsert, delete - see documentation 40 | 41 | extensions: # EXTENSIONS 42 | health_check: 43 | pprof: 44 | endpoint: :1888 45 | zpages: 46 | endpoint: :55679 47 | 48 | service: # SERVICES 49 | extensions: [pprof, zpages, health_check] 50 | pipelines: # 2 pipelines: 51 | traces: 52 | receivers: [otlp] 53 | processors: [batch, resource] 54 | exporters: [logging] 55 | metrics: 56 | receivers: [otlp] 57 | processors: [batch] 58 | exporters: [logging, prometheus] 59 | -------------------------------------------------------------------------------- /package/docker-compose.yaml: -------------------------------------------------------------------------------- 1 | version: "3" 2 | # Could switch back to Version 2 if something breaks. Also, not specifying minor version here which might be best practice. 3 | services: 4 | # Jaeger 5 | # jaeger-all-in-one: 6 | # image: jaegertracing/all-in-one:latest 7 | # restart: always 8 | # ports: 9 | # - "16686:16686" 10 | # - "14268" 11 | # - "14250" 12 | 13 | # Zipkin 14 | # zipkin-all-in-one: 15 | # image: openzipkin/zipkin:latest 16 | # restart: always 17 | # ports: 18 | # - "9411:9411" 19 | 20 | # Collector 21 | otel-collector: 22 | # image: ${OTELCOL_IMG} 23 | # image: otel/opentelemetry-collector:0.67.0 24 | # image sourced from OTel docs (collector/getting-started) 25 | image: otel/opentelemetry-collector-contrib:0.76.1 26 | container_name: otel-col 27 | restart: always 28 | volumes: 29 | - ./collector-gateway-config.yaml:/etc/otel-collector-config.yaml 30 | command: ["--config=/etc/otel-collector-config.yaml"] 31 | ports: 32 | - "1888:1888" # pprof extension 33 | - "8888:8888" # Prometheus metrics exposed by the collector 34 | - "8889:8889" # Prometheus exporter metrics 35 | - "13133:13133" # health_check extension 36 | - "4317:4317" # OTLP gRPC receiver 37 | - "4318:4318" # OTLP HTTP receiver 38 | - "55679:55679" # zpages extension 39 | # depends_on: 40 | #- jaeger-all-in-one 41 | # - zipkin-all-in-one 42 | 43 | prometheus: 44 | container_name: prometheus 45 | image: prom/prometheus:latest 46 | restart: always 47 | volumes: 48 | - ./prometheus.yaml:/etc/prometheus/prometheus.yml 49 | ports: 50 | - "9090:9090" -------------------------------------------------------------------------------- /package/instrumentation.js: -------------------------------------------------------------------------------- 1 | import { nextView } from 'nextview-tracing'; 2 | 3 | export function register() { 4 | if (process.env.NEXT_RUNTIME === 'nodejs') { 5 | nextView('next-app!!'); 6 | } 7 | } 8 | 9 | // export async function register() { 10 | // if (process.env.NEXT_RUNTIME === 'nodejs') { 11 | // await import('./instrumentation.node.ts'); 12 | // } 13 | // } 14 | -------------------------------------------------------------------------------- /package/instrumentation.node.js: -------------------------------------------------------------------------------- 1 | // import { trace, context } from '@opentelemetry/api'; 2 | import { NodeSDK } from '@opentelemetry/sdk-node'; 3 | import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; 4 | import { Resource } from '@opentelemetry/resources'; 5 | import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; 6 | import { 7 | SimpleSpanProcessor, 8 | ConsoleSpanExporter, 9 | ParentBasedSampler, 10 | TraceIdRatioBasedSampler, 11 | Span, 12 | } from '@opentelemetry/sdk-trace-node'; 13 | import { IncomingMessage } from 'http'; 14 | 15 | // ADDITIONAL INSTRUMENTATION: 16 | import { HttpInstrumentation } from '@opentelemetry/instrumentation-http'; 17 | // const { HttpInstrumentation } = require('@opentelemetry/instrumentation-http'); 18 | 19 | import { ExpressInstrumentation } from '@opentelemetry/instrumentation-express'; 20 | 21 | // Trying to convert the CommonJS "require" statements below to ES6 "import" statements: 22 | import { ExpressInstrumentation } from '@opentelemetry/instrumentation-express'; 23 | import { MongooseInstrumentation } from '@opentelemetry/instrumentation-mongoose'; 24 | import { PgInstrumentation } from '@opentelemetry/instrumentation-pg'; 25 | import { MongoDBInstrumentation } from '@opentelemetry/instrumentation-mongodb'; 26 | 27 | // CommonJS Require Statements causing issues when trying to implement Vercel style wrapping. 28 | // const { 29 | // ExpressInstrumentation, 30 | // } = require('@opentelemetry/instrumentation-express'); 31 | // const { 32 | // MongooseInstrumentation, 33 | // } = require('@opentelemetry/instrumentation-mongoose'); 34 | // //pg instrumentation 35 | // const { PgInstrumentation } = require('@opentelemetry/instrumentation-pg'); 36 | // const { 37 | // MongoDBInstrumentation, 38 | // } = require('@opentelemetry/instrumentation-mongodb'); 39 | 40 | export const nextView = (serviceName) => { 41 | const sdk = new NodeSDK({ 42 | resource: new Resource({ 43 | [SemanticResourceAttributes.SERVICE_NAME]: 'next-app', 44 | }), 45 | // spanProcessor: new SimpleSpanProcessor(new ConsoleSpanExporter()), 46 | spanProcessor: new SimpleSpanProcessor( 47 | new OTLPTraceExporter({ 48 | url: 'http://localhost:4318/v1/trace', 49 | // same port as shown in collector-gateway.yml 50 | headers: { 51 | foo: 'bar', 52 | }, // an optional object containing custom headers to be sent with each request will only work with http 53 | }), 54 | ), 55 | sampler: new ParentBasedSampler({ 56 | root: new TraceIdRatioBasedSampler(1), 57 | }), 58 | instrumentations: [ 59 | new HttpInstrumentation({ 60 | requestHook: (span, reqInfo) => { 61 | span.setAttribute('request-headers', JSON.stringify(reqInfo)); 62 | }, 63 | responseHook: (span, res) => { 64 | // Get 'content-length' size: 65 | let size = 0; 66 | res.on('data', (chunk) => { 67 | size += chunk.length; 68 | }); 69 | 70 | res.on('end', () => { 71 | span.setAttribute('contentLength', size); 72 | }); 73 | }, 74 | }), 75 | new ExpressInstrumentation({ 76 | // Custom Attribute: request headers on spans: 77 | requestHook: (span, reqInfo) => { 78 | span.setAttribute( 79 | 'request-headers', 80 | JSON.stringify(reqInfo.request.headers), 81 | ); // Can't get the right type for reqInfo here. Something to do with not being able to import instrumentation-express 82 | }, 83 | }), 84 | new MongooseInstrumentation({ 85 | // responseHook: (span: Span, res: { response: any }) => { 86 | responseHook: (span, res) => { 87 | span.setAttribute( 88 | 'contentLength', 89 | Buffer.byteLength(JSON.stringify(res.response)), 90 | ); 91 | span.setAttribute( 92 | 'instrumentationLibrary', 93 | span.instrumentationLibrary.name, 94 | ); 95 | }, 96 | }), 97 | // new PgInstrumentation({ 98 | // responseHook: (span: Span, res: { data: { rows: any; }; }) => { 99 | // span.setAttribute("contentLength", Buffer.byteLength(JSON.stringify(res.data.rows))); 100 | // span.setAttribute("instrumentationLibrary", span.instrumentationLibrary.name); 101 | // }, 102 | // }), 103 | // new MongoDBInstrumentation({ 104 | // responseHook: (span: Span, res: { data: { rows: any; }; }) => { 105 | // span.setAttribute("contentLength", Buffer.byteLength(JSON.stringify(res.data.rows))); 106 | // span.setAttribute("instrumentationLibrary", span.instrumentationLibrary.name); 107 | // }, 108 | // }), 109 | ], 110 | }); 111 | sdk.start(); 112 | }; 113 | -------------------------------------------------------------------------------- /package/instrumentation.node.ts: -------------------------------------------------------------------------------- 1 | // import { trace, context } from '@opentelemetry/api'; 2 | import { NodeSDK } from '@opentelemetry/sdk-node'; 3 | import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; 4 | import { Resource } from '@opentelemetry/resources'; 5 | import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; 6 | import { 7 | SimpleSpanProcessor, 8 | ConsoleSpanExporter, 9 | ParentBasedSampler, 10 | TraceIdRatioBasedSampler, 11 | Span, 12 | } from '@opentelemetry/sdk-trace-node'; 13 | import { IncomingMessage } from 'http'; 14 | 15 | // ADDITIONAL INSTRUMENTATION: 16 | import { HttpInstrumentation } from '@opentelemetry/instrumentation-http'; 17 | // const { HttpInstrumentation } = require('@opentelemetry/instrumentation-http'); 18 | 19 | // import { ExpressInstrumentation } from '@opentelemetry/instrumentation-express'; 20 | const { 21 | ExpressInstrumentation, 22 | } = require('@opentelemetry/instrumentation-express'); 23 | const { 24 | MongooseInstrumentation, 25 | } = require('@opentelemetry/instrumentation-mongoose'); 26 | //pg instrumentation 27 | const { PgInstrumentation } = require('@opentelemetry/instrumentation-pg'); 28 | const { 29 | MongoDBInstrumentation, 30 | } = require('@opentelemetry/instrumentation-mongodb'); 31 | 32 | const sdk = new NodeSDK({ 33 | resource: new Resource({ 34 | [SemanticResourceAttributes.SERVICE_NAME]: 'next-app', 35 | }), 36 | // spanProcessor: new SimpleSpanProcessor(new ConsoleSpanExporter()), 37 | spanProcessor: new SimpleSpanProcessor( 38 | new OTLPTraceExporter({ 39 | url: 'http://localhost:4318/v1/trace', 40 | // same port as shown in collector-gateway.yml 41 | headers: { 42 | foo: 'bar', 43 | }, // an optional object containing custom headers to be sent with each request will only work with http 44 | }), 45 | ), 46 | sampler: new ParentBasedSampler({ 47 | root: new TraceIdRatioBasedSampler(1), 48 | }), 49 | instrumentations: [ 50 | new HttpInstrumentation({ 51 | requestHook: (span, reqInfo) => { 52 | span.setAttribute('request-headers', JSON.stringify(reqInfo)); 53 | }, 54 | // responseHook: (span, res) => { 55 | // // Get 'content-length' size: 56 | // let size = 0; 57 | // res.on('data', (chunk) => { 58 | // size += chunk.length; 59 | // }); 60 | 61 | // res.on('end', () => { 62 | // span.setAttribute('contentLength', size) 63 | // }); 64 | // } 65 | }), 66 | new ExpressInstrumentation({ 67 | // Custom Attribute: request headers on spans: 68 | requestHook: (span: Span, reqInfo: any) => { 69 | span.setAttribute( 70 | 'request-headers', 71 | JSON.stringify(reqInfo.request.headers), 72 | ); // Can't get the right type for reqInfo here. Something to do with not being able to import instrumentation-express 73 | }, 74 | }), 75 | new MongooseInstrumentation({ 76 | responseHook: (span: Span, res: { response: any }) => { 77 | span.setAttribute( 78 | 'contentLength', 79 | Buffer.byteLength(JSON.stringify(res.response)), 80 | ); 81 | span.setAttribute( 82 | 'instrumentationLibrary', 83 | span.instrumentationLibrary.name, 84 | ); 85 | }, 86 | }), 87 | // new PgInstrumentation({ 88 | // responseHook: (span: Span, res: { data: { rows: any; }; }) => { 89 | // span.setAttribute("contentLength", Buffer.byteLength(JSON.stringify(res.data.rows))); 90 | // span.setAttribute("instrumentationLibrary", span.instrumentationLibrary.name); 91 | // }, 92 | // }), 93 | // new MongoDBInstrumentation({ 94 | // responseHook: (span: Span, res: { data: { rows: any; }; }) => { 95 | // span.setAttribute("contentLength", Buffer.byteLength(JSON.stringify(res.data.rows))); 96 | // span.setAttribute("instrumentationLibrary", span.instrumentationLibrary.name); 97 | // }, 98 | // }), 99 | ], 100 | }); 101 | sdk.start(); 102 | -------------------------------------------------------------------------------- /package/instrumentation.ts: -------------------------------------------------------------------------------- 1 | export async function register() { 2 | if (process.env.NEXT_RUNTIME === 'nodejs') { 3 | await import('./instrumentation.node.ts'); 4 | } 5 | } -------------------------------------------------------------------------------- /package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextview-tracing", 3 | "version": "1.1.1", 4 | "description": "OpenTelemetry Tracing Package for Next.js Applications", 5 | "type": "module", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "postinstall": "node -e 'fs.copyFileSync(path.join(__dirname, \"./src/instrumentation.js\"), path.join(path.resolve(__dirname, \"../..\"), \"instrumentation.js\"))'" 9 | }, 10 | "files": [ 11 | "src" 12 | ], 13 | "exports": { 14 | ".": { 15 | "edge": { 16 | "default": "./src/index.edge.js" 17 | }, 18 | "edge-light": { 19 | "default": "./src/index.edge.js" 20 | }, 21 | "browser": { 22 | "default": "./src/index.edge.js" 23 | }, 24 | "worker": { 25 | "default": "./src/index.edge.js" 26 | }, 27 | "workerd": { 28 | "default": "./src/index.edge.js" 29 | }, 30 | "import": { 31 | "default": "./src/instrumentation.node.js" 32 | }, 33 | "node": { 34 | "default": "./src/instrumentation.node.js" 35 | }, 36 | "default": "./src/index.edge.js" 37 | } 38 | }, 39 | "devDependencies": { 40 | "@types/node": "18.16.1", 41 | "typescript": "^5.0.4" 42 | }, 43 | "dependencies": { 44 | "@opentelemetry/exporter-trace-otlp-http": "^0.40.0", 45 | "@opentelemetry/exporter-trace-otlp-grpc": "^0.39.1", 46 | "@opentelemetry/instrumentation": "^0.40.0", 47 | "@opentelemetry/instrumentation-express": "^0.32.3", 48 | "@opentelemetry/instrumentation-http": "^0.40.0", 49 | "@opentelemetry/instrumentation-mongoose": "^0.32.3", 50 | "@opentelemetry/instrumentation-pg": "^0.35.2", 51 | "@opentelemetry/resources": "^1.14.0", 52 | "@opentelemetry/sdk-node": "^0.40.0", 53 | "@opentelemetry/instrumentation-mongodb": "^0.34.2", 54 | "@opentelemetry/sdk-trace-node": "^1.14.0", 55 | "@opentelemetry/semantic-conventions": "^1.14.0", 56 | "@types/node": "20.2.5", 57 | "@types/react": "18.2.8", 58 | "@types/react-dom": "18.2.4", 59 | "ts-node": "^10.9.1", 60 | "ts-node-dev": "^2.0.0", 61 | "typescript": "5.1.3" 62 | }, 63 | "repository": { 64 | "type": "git", 65 | "url": "git+https://github.com/oslabs-beta/NextView.git#main" 66 | }, 67 | "keywords": [ 68 | "next.js", 69 | "ssr", 70 | "OpenTelemetry", 71 | "instrumentation", 72 | "observability", 73 | "metrics", 74 | "traces" 75 | ], 76 | "author": "NextView", 77 | "license": "ISC", 78 | "bugs": { 79 | "url": "https://github.com/oslabs-beta/NextView/issues" 80 | }, 81 | "homepage": "https://github.com/oslabs-beta/NextView/tree/main#readme", 82 | "engines": { 83 | "node": ">=16" 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /package/preInstall.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | console.log('executing preInstall.js \n'); 5 | console.log('process.cwd():', process.cwd(), '\n'); // YOU WANT THIS ONE!! PROCESS.CWD(); 6 | console.log('__dirname/../..', path.resolve(__dirname, '../..')); 7 | console.log('__dirname:', __dirname, '\n'); 8 | console.log( 9 | 'path.resolve(__dirname, "/instrumentation.ts":', 10 | path.resolve(__dirname, './instrumentation.ts'), 11 | '\n', 12 | ); 13 | console.log( 14 | 'path.resolve(process.cwd(), "/instrumentation.ts":', 15 | path.resolve(process.cwd(), './node_modules/nextview_tracer'), 16 | ); 17 | console.log('************************'); 18 | 19 | // Copy instrumentation.ts: 20 | fs.copyFileSync( 21 | path.join(__dirname, 'instrumentation.ts'), 22 | path.join(path.resolve(__dirname, '../..'), 'instrumentation.ts'), 23 | ); 24 | 25 | // Copy instrumentation.node.ts: 26 | // fs.copyFileSync(path.join(__dirname, 'instrumentation.node.ts'), path.join(path.resolve(__dirname, '../..'), 'instrumentation.node.ts')); 27 | 28 | // Copy docker-compose.yaml: 29 | // fs.copyFileSync(path.join(__dirname, 'docker-compose.yaml'), path.join(path.resolve(__dirname, '../..'), 'docker-compose.yaml')); 30 | 31 | // Copy collector-gateway-config.yaml: 32 | // fs.copyFileSync(path.join(__dirname, 'collector-gateway-config.yaml'), path.join(path.resolve(__dirname, '../..'), 'collector-gateway-config.yaml')); 33 | 34 | // Copy prometheus.yaml: 35 | // fs.copyFileSync(path.join(__dirname, 'prometheus.yaml'), path.join(path.resolve(__dirname, '../..'), 'prometheus.yaml')); 36 | 37 | //*********************/ 38 | // fs.copyFile(__dirname + '/tracer.ts', process.cwd(), (err) => { 39 | // if(err) throw err; 40 | // console.log('File was copied to destination'); 41 | // }); 42 | -------------------------------------------------------------------------------- /package/prometheus.yaml: -------------------------------------------------------------------------------- 1 | scrape_configs: 2 | - job_name: "otel-collector" 3 | scrape_interval: 10s 4 | static_configs: 5 | - targets: ["otel-collector:8889"] 6 | - targets: ["otel-collector:8888"] 7 | -------------------------------------------------------------------------------- /package/src/index.edge.js: -------------------------------------------------------------------------------- 1 | export const registerOTel = (serviceName) => { 2 | // We don't support OTel on edge yet 3 | void serviceName; 4 | }; 5 | -------------------------------------------------------------------------------- /package/src/instrumentation.js: -------------------------------------------------------------------------------- 1 | import { nextView } from 'nextview-tracing'; 2 | 3 | export function register() { 4 | if (process.env.NEXT_RUNTIME === 'nodejs') { 5 | nextView('next-app!!'); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /package/src/instrumentation.node.js: -------------------------------------------------------------------------------- 1 | import { trace, context } from '@opentelemetry/api'; 2 | import { NodeSDK } from '@opentelemetry/sdk-node'; 3 | import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; 4 | import { Resource } from '@opentelemetry/resources'; 5 | import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; 6 | import { 7 | SimpleSpanProcessor, 8 | ConsoleSpanExporter, 9 | ParentBasedSampler, 10 | TraceIdRatioBasedSampler, 11 | Span, 12 | } from '@opentelemetry/sdk-trace-node'; 13 | import { IncomingMessage } from 'http'; 14 | 15 | // ADDITIONAL INSTRUMENTATION: 16 | import { HttpInstrumentation } from '@opentelemetry/instrumentation-http'; 17 | // const { HttpInstrumentation } = require('@opentelemetry/instrumentation-http'); 18 | 19 | // Trying to convert the CommonJS "require" statements below to ES6 "import" statements: 20 | import { ExpressInstrumentation } from '@opentelemetry/instrumentation-express'; 21 | import { MongooseInstrumentation } from '@opentelemetry/instrumentation-mongoose'; 22 | import { PgInstrumentation } from '@opentelemetry/instrumentation-pg'; 23 | import { MongoDBInstrumentation } from '@opentelemetry/instrumentation-mongodb'; 24 | 25 | export const nextView = (serviceName) => { 26 | const collectorOptions = { 27 | url: 'http://www.nextview.dev/api', 28 | headers: { 29 | API_KEY: `${process.env.API_KEY}`, 30 | NextView: 'Next.js Tracing Information', 31 | // an optional object containing custom headers to be sent with each request will only work with http 32 | }, 33 | // concurrencyLimit: 10, // an optional limit on pending requests 34 | }; 35 | 36 | const sdk = new NodeSDK({ 37 | resource: new Resource({ 38 | [SemanticResourceAttributes.SERVICE_NAME]: `${process.env.Service_Name}`, 39 | }), 40 | // spanProcessor: new SimpleSpanProcessor(new ConsoleSpanExporter()), 41 | spanProcessor: new SimpleSpanProcessor( 42 | new OTLPTraceExporter(collectorOptions), 43 | ), 44 | sampler: new ParentBasedSampler({ 45 | root: new TraceIdRatioBasedSampler(1), 46 | }), 47 | instrumentations: [ 48 | new HttpInstrumentation({ 49 | requestHook: (span, reqInfo) => { 50 | span.setAttribute('request-headers', JSON.stringify(reqInfo)); 51 | }, 52 | // responseHook: (span, res) => { 53 | // // Get 'content-length' size: 54 | // let size = 0; 55 | // res.on('data', (chunk) => { 56 | // size += chunk.length; 57 | // }); 58 | 59 | // res.on('end', () => { 60 | // span.setAttribute('contentLength', size); 61 | // }); 62 | // }, 63 | }), 64 | new ExpressInstrumentation({ 65 | // Custom Attribute: request headers on spans: 66 | requestHook: (span, reqInfo) => { 67 | span.setAttribute( 68 | 'request-headers', 69 | JSON.stringify(reqInfo.request.headers), 70 | ); // Can't get the right type for reqInfo here. Something to do with not being able to import instrumentation-express 71 | }, 72 | }), 73 | new MongooseInstrumentation({ 74 | // responseHook: (span: Span, res: { response: any }) => { 75 | responseHook: (span, res) => { 76 | span.setAttribute( 77 | 'contentLength', 78 | Buffer.byteLength(JSON.stringify(res.response)), 79 | ); 80 | span.setAttribute( 81 | 'instrumentationLibrary', 82 | span.instrumentationLibrary.name, 83 | ); 84 | }, 85 | }), 86 | new PgInstrumentation({ 87 | // responseHook: (span: Span, res: { data: { rows: any; }; }) => { 88 | responseHook: (span, res) => { 89 | span.setAttribute( 90 | 'contentLength', 91 | Buffer.byteLength(JSON.stringify(res.data.rows)), 92 | ); 93 | span.setAttribute( 94 | 'instrumentationLibrary', 95 | span.instrumentationLibrary.name, 96 | ); 97 | }, 98 | }), 99 | new MongoDBInstrumentation({ 100 | // responseHook: (span: Span, res: { data: { rows: any; }; }) => { 101 | responseHook: (span, res) => { 102 | span.setAttribute( 103 | 'contentLength', 104 | Buffer.byteLength(JSON.stringify(res.data.rows)), 105 | ); 106 | span.setAttribute( 107 | 'instrumentationLibrary', 108 | span.instrumentationLibrary.name, 109 | ); 110 | }, 111 | }), 112 | ], 113 | }); 114 | sdk.start(); 115 | }; 116 | -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/NextView/bc102f5c1b489fa169f39601064a354af8bc55c2/public/favicon.ico -------------------------------------------------------------------------------- /server/controllers/appsController.ts: -------------------------------------------------------------------------------- 1 | import db from '../models/dataModels'; 2 | import { v4 as uuid } from 'uuid'; 3 | import { RequestHandler } from 'express'; 4 | 5 | const appsController: AppsController = { 6 | createApiKey: (req, res, next) => { 7 | res.locals.apiKey = uuid(); 8 | return next(); 9 | }, 10 | 11 | registerApp: async (req, res, next) => { 12 | if (!res.locals.apiKey) 13 | return next({ 14 | log: `Error in registerApp controller method: No api key was generated`, 15 | status: 500, 16 | message: { err: 'No api key was generated' }, 17 | }); 18 | 19 | try { 20 | const text = 21 | 'INSERT INTO apps(id, user_id, app_name) VALUES($1, $2, $3) RETURNING *'; 22 | const values = [ 23 | res.locals.apiKey, 24 | req.user.userId, 25 | req.body.app_name || null, 26 | ]; 27 | const newApp = await db.query(text, values); 28 | res.locals.app = newApp.rows[0]; 29 | 30 | return next(); 31 | } catch (err) { 32 | // If an error occurs, pass it to the error handling middleware 33 | return next({ 34 | log: `Error in registerApp controller method: ${err}`, 35 | status: 500, 36 | message: 'Error while creating app', 37 | }); 38 | } 39 | }, 40 | 41 | retrieveApps: async (req, res, next) => { 42 | try { 43 | const text = 'SELECT * FROM apps WHERE user_id = $1'; 44 | const values = [req.user.userId]; 45 | const apps = await db.query(text, values); 46 | res.locals.apps = apps.rows; 47 | 48 | return next(); 49 | } catch (err) { 50 | // If an error occurs, pass it to the error handling middleware 51 | return next({ 52 | log: `Error in retrieveApps controller method: ${err}`, 53 | status: 500, 54 | message: 'Error while creating app', 55 | }); 56 | } 57 | }, 58 | 59 | retrieveOverallAvg: async (req, res, next) => { 60 | try { 61 | const query = `SELECT EXTRACT(epoch from avg(duration)) * 1000 AS duration_avg_ms FROM spans WHERE parent_id is null AND app_id = $1 AND timestamp AT TIME ZONE 'GMT' AT TIME ZONE $4 BETWEEN ($2 AT TIME ZONE $4) AND ($3 AT TIME ZONE $4);`; 62 | const values = [ 63 | req.params.appId, 64 | res.locals.startDate, 65 | res.locals.endDate, 66 | res.locals.timezone, 67 | ]; 68 | const data = await db.query(query, values); 69 | res.locals.metrics.overallAvg = data.rows[0].duration_avg_ms; 70 | return next(); 71 | } catch (err) { 72 | return next({ 73 | log: `Error in retrieveOverallAvg controller method: ${err}`, 74 | status: 500, 75 | message: 'Error while retrieving data', 76 | }); 77 | } 78 | }, 79 | 80 | retrieveTotalTraces: async (req, res, next) => { 81 | try { 82 | const query = `SELECT CAST (COUNT(DISTINCT trace_id) AS INTEGER) AS trace_count FROM spans WHERE app_id = $1 AND timestamp AT TIME ZONE 'GMT' AT TIME ZONE $4 BETWEEN ($2 AT TIME ZONE $4) AND ($3 AT TIME ZONE $4);`; 83 | const values = [ 84 | req.params.appId, 85 | res.locals.startDate, 86 | res.locals.endDate, 87 | res.locals.timezone, 88 | ]; 89 | const data = await db.query(query, values); 90 | res.locals.metrics.traceCount = data.rows[0].trace_count; 91 | return next(); 92 | } catch (err) { 93 | return next({ 94 | log: `Error in retrieveTotalTraces controller method: ${err}`, 95 | status: 500, 96 | message: 'Error while retrieving data', 97 | }); 98 | } 99 | }, 100 | 101 | retrieveAvgPageDurations: async (req, res, next) => { 102 | try { 103 | const query = `SELECT http_target as page, EXTRACT(epoch from avg(duration)) * 1000 AS ms_avg FROM spans WHERE parent_id is null AND app_id = $1 AND spans.timestamp >= $2::timestamptz AND spans.timestamp <= $3::timestamptz GROUP BY http_target ORDER BY avg(duration) desc LIMIT 5;`; 104 | const values = [ 105 | req.params.appId, 106 | res.locals.startDate, 107 | res.locals.endDate, 108 | ]; 109 | const data = await db.query(query, values); 110 | res.locals.metrics.pageAvgDurations = data.rows; 111 | return next(); 112 | } catch (err) { 113 | return next({ 114 | log: `Error in retrieveTotalTraces controller method: ${err}`, 115 | status: 500, 116 | message: 'Error while retrieving data', 117 | }); 118 | } 119 | }, 120 | 121 | retrieveAvgKindDurations: async (req, res, next) => { 122 | try { 123 | const query = `SELECT kind_id, kind, EXTRACT(epoch from avg(duration)) * 1000 AS ms_avg FROM spans WHERE app_id = $1 AND spans.timestamp >= $2::timestamptz AND spans.timestamp <= $3::timestamptz GROUP BY kind_id, kind;`; 124 | const values = [ 125 | req.params.appId, 126 | res.locals.startDate, 127 | res.locals.endDate, 128 | ]; 129 | const data = await db.query(query, values); 130 | res.locals.metrics.kindAvgDurations = data.rows; 131 | return next(); 132 | } catch (err) { 133 | return next({ 134 | log: `Error in retrieveTotalTraces controller method: ${err}`, 135 | status: 500, 136 | message: 'Error while retrieving data', 137 | }); 138 | } 139 | }, 140 | 141 | retrieveAvgKindDurationsOverTime: async (req, res, next) => { 142 | const query = `SELECT to_char(TIMEZONE($2, periods.datetime), $4) as period, 143 | CASE WHEN EXTRACT(epoch from avg(duration) filter (where kind_id = 0))>0 THEN EXTRACT(epoch from avg(duration) filter (where kind_id = 0)) * 1000 ELSE 0 END AS internal, 144 | CASE WHEN EXTRACT(epoch from avg(duration) filter (where kind_id = 1))>0 THEN EXTRACT(epoch from avg(duration) filter (where kind_id = 1)) * 1000 ELSE 0 END AS server, 145 | CASE WHEN EXTRACT(epoch from avg(duration) filter (where kind_id = 2))>0 THEN EXTRACT(epoch from avg(duration) filter (where kind_id = 2)) * 1000 ELSE 0 END AS client 146 | FROM ( 147 | select generate_series(date_trunc($5, $6::timestamptz), $7, $3) datetime) as periods 148 | left outer join spans on spans.timestamp AT TIME ZONE 'GMT' <@ tstzrange(datetime, datetime + $3::interval) and app_id = $1 149 | GROUP BY periods.datetime 150 | ORDER BY periods.datetime`; 151 | try { 152 | const values = [ 153 | req.params.appId, 154 | res.locals.timezone, 155 | res.locals.intervalBy, 156 | res.locals.format, 157 | res.locals.intervalUnit, 158 | res.locals.startDate, 159 | res.locals.endDate, 160 | ]; 161 | const data = await db.query(query, values); 162 | res.locals.metrics.kindAvgDurationsOverTime = data.rows; 163 | return next(); 164 | } catch (err) { 165 | return next({ 166 | log: `Error in retrieveAvgKindDurationsOverTime controller method: ${err}`, 167 | status: 500, 168 | message: 'Error while retrieving data', 169 | }); 170 | } 171 | }, 172 | 173 | retrievePages: async (req, res, next) => { 174 | try { 175 | const query = 176 | 'SELECT pages._id, spans.http_target as page, pages.app_id as api_id, pages.created_on FROM spans inner join pages on spans.http_target = pages.http_target and spans.app_id = pages.app_id WHERE spans.parent_id is null AND spans.app_id = $1 GROUP BY pages._id, spans.http_target, pages.app_id, pages.created_on ORDER BY avg(duration) desc;'; 177 | const values = [req.params.appId]; 178 | const data = await db.query(query, values); 179 | res.locals.metrics.pages = data.rows; 180 | return next(); 181 | } catch (err) { 182 | return next({ 183 | log: `Error in retrieveTotalTraces controller method: ${err}`, 184 | status: 500, 185 | message: 'Error while retrieving data', 186 | }); 187 | } 188 | }, 189 | 190 | setInterval: (req, res, next) => { 191 | const { start, end } = req.query; 192 | 193 | const startDate = start 194 | ? new Date(start as string) 195 | : new Date(Date.now() - 86400000); // if start is empty, set to yesterday 196 | const endDate = end ? new Date(end as string) : new Date(); // if end is empty, set to now 197 | const intervalSeconds = (endDate.getTime() - startDate.getTime()) / 1000; // get seconds of difference between start and end 198 | if (intervalSeconds < 0) 199 | return next({ 200 | log: `Error in setInterval controller method: End date is before start date`, 201 | status: 400, 202 | message: 'End date is before start date', 203 | }); 204 | 205 | let format = 'FMHH12:MI AM'; // default 206 | let intervalUnit = 'hour'; // default 207 | let intervalBy = '1 hour'; // default 208 | 209 | // TODO: change this to a calculation :( 210 | if (intervalSeconds <= 300) { 211 | // 5 minutes 212 | format = 'FMHH12:MI:SS AM'; 213 | intervalUnit = 'second'; 214 | intervalBy = '10 second'; 215 | } else if (intervalSeconds <= 900) { 216 | // 15 minutes 217 | format = 'FMHH12:MI:SS AM'; 218 | intervalUnit = 'second'; 219 | intervalBy = '30 second'; 220 | } else if (intervalSeconds <= 1800) { 221 | // 30 minutes 222 | format = 'FMHH12:MI AM'; 223 | intervalUnit = 'minute'; 224 | intervalBy = '1 minute'; 225 | } else if (intervalSeconds <= 3600) { 226 | // 1 hour 227 | format = 'FMHH12:MI AM'; 228 | intervalUnit = 'minute'; 229 | intervalBy = '2 minute'; 230 | } else if (intervalSeconds <= 21600) { 231 | // 6 hours 232 | format = 'FMHH12:MI AM'; 233 | intervalUnit = 'minute'; 234 | intervalBy = '15 minute'; 235 | } else if (intervalSeconds <= 43200) { 236 | // 12 hours 237 | format = 'FMHH12:MI AM'; 238 | intervalUnit = 'minute'; 239 | intervalBy = '30 minute'; 240 | } else if (intervalSeconds <= 172800) { 241 | // 2 days 242 | format = 'FMMM/FMDD FMHH12:MI AM'; 243 | intervalUnit = 'hour'; 244 | intervalBy = '1 hour'; 245 | } else if (intervalSeconds <= 518400) { 246 | // 6 days 247 | format = 'FMMM/FMDD FMHH12:MI:SS AM'; 248 | intervalUnit = 'hour'; 249 | intervalBy = '4 hour'; 250 | } else if (intervalSeconds <= 2592000) { 251 | // 30 days 252 | format = 'FMMM/FMDD'; 253 | intervalUnit = 'day'; 254 | intervalBy = '1 day'; 255 | } else if (intervalSeconds <= 5184000) { 256 | // 60 days 257 | format = 'FMMM/FMDD'; 258 | intervalUnit = 'day'; 259 | intervalBy = '2 day'; 260 | } else if (intervalSeconds <= 7776000) { 261 | // 90 days 262 | format = 'FMMM/FMDD'; 263 | intervalUnit = 'day'; 264 | intervalBy = '3 day'; 265 | } else if (intervalSeconds <= 10368000) { 266 | // 120 days 267 | format = 'FMMM/FMDD/YYYY'; 268 | intervalUnit = 'week'; 269 | intervalBy = '1 week'; 270 | } else if (intervalSeconds <= 77760000) { 271 | // 900 days 272 | format = 'FMMM/FMDD/YYYY'; 273 | intervalUnit = 'month'; 274 | intervalBy = '1 month'; 275 | } else if (intervalSeconds > 77760000) { 276 | // > 900 days 277 | format = 'FMMM/FMDD/YYYY'; 278 | intervalUnit = 'year'; 279 | intervalBy = '1 year'; 280 | } 281 | 282 | res.locals.format = format; // format of resulting period 283 | res.locals.intervalUnit = intervalUnit; // what to round times to 284 | res.locals.intervalBy = intervalBy; // what separates each period 285 | res.locals.startDate = startDate; 286 | res.locals.endDate = endDate; 287 | 288 | return next(); 289 | }, 290 | 291 | setTimezone: (req, res, next) => { 292 | const timezone = req.header('User-Timezone'); 293 | 294 | res.locals.timezone = timezone || 'GMT'; 295 | 296 | return next(); 297 | }, 298 | 299 | initializeMetrics: (req, res, next) => { 300 | res.locals.metrics = {}; 301 | 302 | return next(); 303 | }, 304 | }; 305 | 306 | type AppsController = { 307 | createApiKey: RequestHandler; 308 | registerApp: RequestHandler; 309 | retrieveApps: RequestHandler; 310 | retrieveOverallAvg: RequestHandler; 311 | retrieveTotalTraces: RequestHandler; 312 | retrieveAvgPageDurations: RequestHandler; 313 | retrieveAvgKindDurations: RequestHandler; 314 | retrieveAvgKindDurationsOverTime: RequestHandler; 315 | retrievePages: RequestHandler; 316 | setInterval: RequestHandler; 317 | setTimezone: RequestHandler; 318 | initializeMetrics: RequestHandler; 319 | }; 320 | 321 | export default appsController; 322 | -------------------------------------------------------------------------------- /server/controllers/authenticateController.ts: -------------------------------------------------------------------------------- 1 | import jwt from 'jsonwebtoken'; // Import JSON Web Token library 2 | import { Request, RequestHandler } from 'express'; 3 | import UserController from './userController'; 4 | const authenticateController: AuthenticateController = { 5 | authenticate: async (req, res, next) => { 6 | let token; 7 | 8 | if (process.env.NODE_ENV === 'development') { 9 | token = jwt.sign({ userId: 1 }, process.env.JWT_SECRET as jwt.Secret, { 10 | expiresIn: '1h', 11 | }); 12 | } else token = req.cookies.jwtToken; 13 | 14 | // If no token is provided, send 400 status and end the function 15 | if (!token) { 16 | return next({ 17 | log: `Error in authenticateController controller method: No token provided`, 18 | status: 400, 19 | message: 'No token provided', 20 | }); 21 | } 22 | 23 | // Verify the provided token with the secret key 24 | try { 25 | const decoded =
9 | {title}
10 | {data &&
11 | (title === 'Average Page Load Duration' ||
12 | title === 'Average Page Load Duration') ? (
13 | {data}ms
14 | ) : (
15 | {data}
16 | )}
17 |
18 | );
19 | };
20 |
21 | export default Box;
22 |
--------------------------------------------------------------------------------
/src/components/Button.tsx:
--------------------------------------------------------------------------------
1 | // interface to declare all our prop types
2 | interface Props {
3 | children?: React.ReactNode;
4 | onClick?: () => void;
5 | variant?: string; // default, primary, info
6 | size?: string; // sm, md, lg
7 | disabled?: boolean;
8 | className?: string;
9 | type?: 'button' | 'submit' | 'reset' | undefined;
10 | }
11 |
12 | // button component, consuming props
13 | const Button: React.FC
17 | {children}
18 |
19 | );
20 | };
21 |
22 | export default Feature;
23 |
--------------------------------------------------------------------------------
/src/components/NPMCopyInput.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | export const NPMCopyInput = () => {
4 | const [copyClicked, setCopyClicked] = useState(false);
5 | return (
6 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/ProtectedRoute.tsx:
--------------------------------------------------------------------------------
1 | import { Navigate } from 'react-router-dom';
2 |
3 | const ProtectedRoute: React.FC = ({ children }) => {
4 | const storedUser = JSON.parse(localStorage.getItem('user'));
5 |
6 | return storedUser ? children :
4 |
8 |
12 |
14 | );
15 | };
16 |
17 | export default Spinner;
18 |
--------------------------------------------------------------------------------
/src/contexts/dashboardContexts.tsx:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | interface Period {
4 | interval: number;
5 | unit: string;
6 | }
7 |
8 | interface TextBox {
9 | overallAvg: number;
10 | traceCount: number;
11 | }
12 |
13 | export interface LineDataItem {
14 | period: string;
15 | client: number;
16 | server: number;
17 | internal: number;
18 | }
19 |
20 | export interface BarDataItem {
21 | page: string;
22 | ms_avg: number;
23 | }
24 |
25 | export interface PieDataItem {
26 | kind_id: number;
27 | kind: string;
28 | ms_avg: number;
29 | }
30 |
31 | // Context Types
32 |
33 | export interface StartContextType {
34 | start: string;
35 | setStart: (value: string) => void;
36 | }
37 |
38 | export interface EndContextType {
39 | end: string;
40 | setEnd: (value: string) => void;
41 | }
42 |
43 | export interface PeriodContextType {
44 | start: string;
45 | setStart: (value: string) => void;
46 | end: string;
47 | setEnd: (value: string) => void;
48 | }
49 |
50 | export interface TraceTextboxContextType {
51 | traceCount: number;
52 | setTraceCount: (value: number) => void;
53 | }
54 |
55 | export interface DurationTextboxContextType {
56 | overallAvgDuration: number;
57 | setOverallAvgDuration: number;
58 | }
59 |
60 | export interface BarGraphContextType {
61 | barData: BarDataItem[] | null;
62 | setBarData: (value: BarDataItem[]) => void;
63 | }
64 |
65 | export interface OVLineChartContextType {
66 | lineData: LineDataItem[] | null;
67 | setLineData: (value: LineDataItem[]) => void;
68 | }
69 |
70 | export interface PieChartContextType {
71 | pieData: PieDataItem[] | null;
72 | setPieData: (value: PieDataItem[]) => void;
73 | }
74 |
75 | // export const PeriodContext = createContextLoading...
13 |
71 |
79 |
82 |
84 | )}
85 |
86 | );
87 | };
88 |
89 | export default Dashboard;
90 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/Loading.tsx:
--------------------------------------------------------------------------------
1 | const Loading = () => {
2 | return (
3 |
4 |
5 |
12 | );
13 | };
14 |
15 | export default Loading;
16 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/MainDisplay/MainDisplay.tsx:
--------------------------------------------------------------------------------
1 | import Topbar from './Topbar';
2 | import OverviewDisplay from './OverviewDisplay/OverviewDisplay';
3 | import PageDisplay from './PageDisplay/PageDisplay';
4 | import { Routes, Route } from 'react-router-dom';
5 | import NotFound from '../../NotFound/NotFound';
6 |
7 | const MainDisplay = ({ overviewData, pageData, setStart, setEnd }) => {
8 | return (
9 | 6 | Loading... 7 |
8 |9 | This may take a few seconds, please don't close this page. 10 |
11 |
10 |
12 |
22 |
23 | );
24 | };
25 |
26 | export default MainDisplay;
27 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/MainDisplay/OverviewDisplay/BarGraph.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | BarChart,
3 | Bar,
4 | XAxis,
5 | YAxis,
6 | CartesianGrid,
7 | Tooltip,
8 | Legend,
9 | ResponsiveContainer,
10 | } from 'recharts';
11 |
12 | const BarGraph = ({ data }) => {
13 | const num = data.length;
14 |
15 | return (
16 | <>
17 | Top {num} Slowest Pages
18 |Average Span Duration
18 |16 | Average Span Load Duration Over Time 17 |
18 |
14 |
32 | );
33 | };
34 |
35 | export default OverviewDisplay;
36 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/MainDisplay/OverviewDisplay/Texbox.tsx:
--------------------------------------------------------------------------------
1 | import Box from '../../../../components/Box';
2 | import { v4 as uuidv4 } from 'uuid';
3 |
4 | const Textbox = ({ traceCount, overallAvg }) => {
5 | const boxData = [
6 | { title: 'Average Page Load Duration', data: overallAvg },
7 | { title: 'Total No. of Traces', data: traceCount },
8 | ];
9 | return (
10 |
15 |
31 |
16 |
27 |
21 |
23 |
24 |
26 |
28 |
30 |
11 | {boxData.map(({ title, data }) => (
12 |
15 | );
16 | };
17 |
18 | export default Textbox;
19 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/MainDisplay/PageDisplay/Box.tsx:
--------------------------------------------------------------------------------
1 | interface BoxProps {
2 | title: string;
3 | data: number;
4 | }
5 |
6 | const Box = ({ title, data }: BoxProps) => {
7 | return (
8 |
9 | {title}
10 | {data}
11 |
12 | );
13 | };
14 |
15 | export default Box;
16 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/MainDisplay/PageDisplay/PageDisplay.tsx:
--------------------------------------------------------------------------------
1 | import Textbox from './Textbox';
2 | import Table from './Table';
3 | import PageLineChart from './PageLineChart';
4 | import SpanLineChart from './SpanLineChart';
5 | import { useParams } from 'react-router-dom';
6 | import { useContext, useEffect, useState } from 'react';
7 | import { PageContext } from '../../../../contexts/dashboardContexts';
8 | import { v4 as uuidv4 } from 'uuid';
9 | import Spinner from '../../../../components/Spinner';
10 |
11 | const PageDisplay = ({ overviewData }) => {
12 | const { id } = useParams();
13 | const { pageData, setPageData, apiKey, start, end, page, setPage } =
14 | useContext(PageContext);
15 |
16 | const [loading, setLoading] = useState(true);
17 | useEffect(() => {
18 | setLoading(true);
19 |
20 | const pageId = id;
21 |
22 | for (let i = 0; i < overviewData.pages.length; i++) {
23 | if (overviewData.pages[i]._id == pageId) {
24 | setPage(overviewData.pages[i]);
25 | break;
26 | }
27 | }
28 |
29 | const fetchPageData = async () => {
30 | try {
31 | const response = await fetch(
32 | `/apps/${apiKey}/pages/${pageId}/data?start=${start}&end=${end}`,
33 | {
34 | headers: {
35 | 'User-Timezone': Intl.DateTimeFormat().resolvedOptions().timeZone,
36 | },
37 | },
38 | );
39 | const data = await response.json();
40 | setPageData(data);
41 | setLoading(false);
42 | } catch (error: unknown) {
43 | console.log('Data fetching failed', error);
44 | }
45 | };
46 | if (apiKey) fetchPageData();
47 | }, [id, start, end]);
48 |
49 | return loading ? (
50 | <>
51 |
55 |
83 | );
84 | };
85 |
86 | export default PageDisplay;
87 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/MainDisplay/PageDisplay/PageLineChart.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | LineChart,
3 | Line,
4 | XAxis,
5 | YAxis,
6 | CartesianGrid,
7 | Tooltip,
8 | Legend,
9 | Label,
10 | ResponsiveContainer,
11 | } from 'recharts';
12 |
13 | const PageLineChart = ({ avgPageDurationsOverTime }) => {
14 | return (
15 | <>
16 |
56 |
82 |
57 |
67 |
63 |
65 |
66 | Request Summary
64 |
68 |
81 |
69 |
74 |
75 |
80 | 17 | Average Page Load Duration Over Time 18 |
19 |47 | Average Action Duration Over Time 48 |
49 |
13 | {overallPageData[i].Name}
14 |
15 | | Name | 37 |Avg. Duration | 38 |Kind | 39 |No. of Traces | 40 |No. of Executions | 41 |
|---|
12 | {boxData.map(({ title, data }) => (
13 |
16 | );
17 | };
18 |
19 | export default Textbox;
20 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/MainDisplay/Topbar.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useEffect, useRef, useState } from 'react';
2 | import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
3 | import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
4 | import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
5 | import dayjs from 'dayjs';
6 | import Button from '../../../components/Button';
7 | import { CopyInput } from '../../../components/CopyInput';
8 | import { APIContext } from '../../../contexts/dashboardContexts';
9 | // import { IoLogOut, IoMenu } from 'react-icons/io5';
10 | // import { UserContext } from '../../../contexts/userContexts';
11 | // import { Link, useNavigate } from 'react-router-dom';
12 | // import logo from '../../../assets/NextView-logo-pink-transparent.webp';
13 | // import PageTab from '../Sidebar/PageTab';
14 | // import { v4 as uuidv4 } from 'uuid';
15 |
16 | const Topbar = ({ setStart, setEnd, overviewData }) => {
17 | const [startVal, setStartVal] = useState('');
18 | const [endVal, setEndVal] = useState('');
19 | const [dropdown, setDropdown] = useState(false);
20 |
21 | const { apiKey } = useContext(APIContext);
22 |
23 | // Set local variables (startVal, endVal)
24 | const handleDateChange = (date, setDate) => {
25 | setDate(date.toISOString());
26 | };
27 |
28 | // Set Dashboard state variables (start, end)
29 | const handleClick = () => {
30 | setStart(startVal);
31 | setEnd(endVal);
32 | };
33 |
34 | // const pagesList = overviewData.pages;
35 |
36 | function useOutsideAlerter(ref) {
37 | useEffect(() => {
38 | /**
39 | * Alert if clicked on outside of element
40 | */
41 | function handleClickOutside(event) {
42 | if (ref.current && !ref.current.contains(event.target)) {
43 | setTimeout(() => setDropdown(false), 100);
44 | }
45 | }
46 | // Bind the event listener
47 | document.addEventListener('mousedown', handleClickOutside);
48 | return () => {
49 | // Unbind the event listener on clean up
50 | document.removeEventListener('mousedown', handleClickOutside);
51 | };
52 | }, [ref]);
53 | }
54 |
55 | const wrapperRef = useRef(null);
56 | useOutsideAlerter(wrapperRef);
57 |
58 | return (
59 |
61 |
132 |
62 |
63 | API Key:
64 |
65 |
69 | {apiKey}
70 |
71 | {/*
75 | 
76 |
77 |
106 |
78 | setDropdown(true)}
82 | />
83 | {dropdown ? (
84 |
*/}
105 |
88 |
96 | Pages
97 | {pagesList.toReversed().map((page) => (
98 |
101 | ) : (
102 | <>
103 | )}
104 |
107 | {
112 | handleDateChange(value, setStartVal);
113 | }}
114 | />
115 | {
120 | handleDateChange(value, setEndVal);
121 | }}
122 | />
123 |
130 |
131 |
14 |
15 |
22 |
23 |
24 | Pages
25 |
26 | {pagesList
27 | .slice()
28 | .reverse()
29 | .map((page) => (
30 |
33 | );
34 | }
35 |
36 | export default MainNavBar;
37 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/Sidebar/PageTab.tsx:
--------------------------------------------------------------------------------
1 | import { NavLink } from 'react-router-dom';
2 | import { PageContext } from '../../../contexts/dashboardContexts';
3 | import { useContext } from 'react';
4 |
5 | function PageTab({ pageSelection }) {
6 | const { page, setPage } = useContext(PageContext);
7 |
8 | return (
9 |
18 |
35 |
36 | {/* stretch features
37 |
38 |
47 | );
48 | }
49 |
50 | const SideNavBarIcon = ({ icon }: { icon: React.ReactElement }) => (
51 | {icon}
52 | );
53 |
54 | export default SideNavBar;
55 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/Sidebar/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import MainNavbar from './MainNavbar';
2 | import SideNavbar from './SideNavbar';
3 |
4 | const Sidebar = ({ overviewData }) => {
5 | return (
6 |
7 |
10 | );
11 | };
12 |
13 | export default Sidebar;
14 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/index.tsx:
--------------------------------------------------------------------------------
1 | import Dashboard from './Dashboard';
2 |
3 | const DashboardPage = () => {
4 | return
20 | {
58 | setOpenLoginModal(false);
59 | }}
60 | >
61 |
63 | {
66 | setOpenSignupModal(false);
67 | }}
68 | >
69 |
71 |
72 | );
73 | };
74 |
75 | export default AuthContainer;
76 |
--------------------------------------------------------------------------------
/src/pages/Home/Auth/AuthForm.tsx:
--------------------------------------------------------------------------------
1 | import Button from '../../../components/Button';
2 | import { UserContext } from '../../../contexts/userContexts';
3 | import React, { useContext, ChangeEvent, useCallback } from 'react';
4 |
5 | interface AuthFormProps {
6 | usernameInputId: string;
7 | passwordInputId: string;
8 | text: string;
9 | handleSubmit: (e: FormEvent-
21 |
- 22 | {loggedIn ? ( 23 | 26 | ) : ( 27 | 33 | )} 34 | 35 |
- 36 | {loggedIn ? ( 37 | 44 | ) : ( 45 | 52 | )} 53 | 54 |
40 | {text} 41 |
42 | 83 | 84 | ); 85 | }, 86 | ); 87 | 88 | export default AuthForm; 89 | -------------------------------------------------------------------------------- /src/pages/Home/Auth/LoginForm.tsx: -------------------------------------------------------------------------------- 1 | import React, { FormEvent, useContext } from 'react'; 2 | import { useNavigate } from 'react-router-dom'; 3 | import AuthForm from './AuthForm'; 4 | import { UserContext } from '../../../contexts/userContexts'; 5 | import { v4 as uuidv4 } from 'uuid'; 6 | 7 | const Login = () => { 8 | const { setLoggedIn, username, password } = useContext(UserContext); 9 | 10 | const navigate = useNavigate(); 11 | const uniqueId = uuidv4(); 12 | 13 | const handleSubmit = React.useCallback( 14 | (e: FormEvent
42 | 
49 |
61 |
62 | 50 | What is NextView? ⭐🔭 51 |
52 |
53 |
60 | 54 | NextView is an observability platform for building and optimizing 55 | Next.js applications. NextView assists developers by providing an 56 | easy-to-use and lightweight toolkit for measuring performance of 57 | server-side rendering requests. 58 |
59 |
63 |
64 |
72 |
73 |
81 |
82 |
90 |
91 |
99 |
100 | Next.js Instrumentation
66 |67 | With our hassle-free npm package integration, effortlessly track and 68 | analyze trace data in your Next.js application, empowering you to 69 | gain valuable insights and optimize performance in no time. 70 |
71 |Traffic Analysis
75 |76 | Gain insights into your application's usage patterns, identify 77 | trends, and make informed decisions for optimizing your server-side 78 | rendering infrastructure. 79 |
80 |Performance Monitoring
84 |85 | By providing detailed performance data over customizable 86 | time-ranges, you can identify performance bottlenecks and optimize 87 | your applications for better user experience. 88 |
89 |Secure Authentication
93 |94 | Safeguard your data with our robust encryption using bcrypt. Rest 95 | easy knowing that sensitive user information is securely stored, 96 | providing peace of mind and protection against unauthorized access. 97 |
98 |
101 |
107 |
108 |
109 |
110 |
116 |
155 |
121 |
138 |
152 |
153 |
154 |
24 |
162 | Get Started
25 |
26 |
160 |
161 | -
27 |
-
28 |
29 | To get started, install our npm package in your Next.js 30 | application: 31 |
32 | 33 |34 |52 |35 | 41 |50 |51 |
53 | -
54 |
55 | In your next.config.js file, opt-in to the Next.js 56 | instrumentation by setting the experimental instrumentationHook 57 | to true: 58 |
59 | 60 |61 |65 |62 | experimental.instrumentationHook = true; 63 | 64 |
66 | {loggedIn ? (
67 | <>
68 | ) : (
69 | -
70 |
Register a NextView account here:
71 | 80 | 88 |
89 | )}
90 | -
91 |
92 | Navigate to the NextView Dashboard and copy your generated API 93 | key. 94 |
95 | {loggedIn ? ( 96 | 103 | ) : ( 104 | <> 105 | )} 106 |
107 | -
108 |
109 | In the
113 |.env.local{' '} 110 | file in the root directory of your application (create one if it 111 | doesn’t exist), create an environment variable for your API Key. 112 |114 |118 |`}> 115 | {'API_KEY= 117 |'} 116 |
119 |
121 |
153 |
122 |
128 |
138 |
139 | {loggedIn ? (
140 | <>
141 |
148 |
149 | ) : (
150 | <>
151 | )}
152 | 129 | You're all set up! You can monitor the server operations in your 130 | Next.js application on the NextView Dashboard! 131 |
132 |
14 |
94 | );
95 | };
96 |
97 | export default Navbar;
98 |
--------------------------------------------------------------------------------
/src/pages/Home/Overview.tsx:
--------------------------------------------------------------------------------
1 | import Button from '../../components/Button';
2 | import { ChangeEvent, useContext } from 'react';
3 | import { TypeAnimation } from 'react-type-animation';
4 | import { UserContext } from '../../contexts/userContexts';
5 | import React from 'react';
6 | import { useNavigate } from 'react-router-dom';
7 | import { NPMCopyInput } from '../../components/NPMCopyInput';
8 |
9 | const sequence = [
10 | 'Build',
11 | 2000,
12 | 'Analyze',
13 | 2000,
14 | 'Debug',
15 | 2000,
16 | 'Develop',
17 | 2000,
18 | 'Trace',
19 | 2000,
20 | 'Create',
21 | 2000,
22 | 'Visualize',
23 | 2000,
24 | 'Test',
25 | 2000,
26 | 'Instrument',
27 | 2000,
28 | 'Measure',
29 | 2000,
30 | 'Optimize ',
31 | () => showCursorAnimation(false),
32 | ];
33 | const CURSOR_CLASS_NAME = 'type';
34 | const ref = React.createRef
18 |
19 |
26 |
27 |
88 |
28 |
35 |
32 | Get Started
33 |
34 |
36 |
43 |
40 | Contributors
41 |
42 |
44 |
51 | Blog
52 |
53 |
54 |
55 |
61 |
69 |
70 |
71 |
72 |
78 |
85 |
86 |
87 |
89 |
93 |
90 |
92 |
66 |
118 | NextView
67 | 68 |
79 | {loggedIn ? (
80 | <>
81 |
114 |
82 | Welcome {username}!
83 |
84 |
91 |
92 | ) : (
93 | <>
94 |
103 |
111 |
112 | )}
113 |
115 |
117 |
119 |
126 |
127 |
9 |
57 |
10 |
48 |
49 | 11 | 404 error 12 |
13 |14 | Page not found 15 |
16 |17 | Sorry, the page you are looking for doesn't exist.Here are some 18 | helpful links: 19 |
20 | 21 |
22 |
40 |
46 |
47 |
50 | 
55 |
56 |
55 |