Skip to content

Commit 593464b

Browse files
kgvarunkgvarun
authored
Merge pull request #30 from zkhader/master
Adding OpenTelemetry instrumentation for MERN applications
2 parents ea9a0f1 + 932cef4 commit 593464b

File tree

17 files changed

+747
-0
lines changed

17 files changed

+747
-0
lines changed

‎oci-opentelemetry-solution/README.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
OCI Observability & Management for the MERN Stack
2+
3+
# MERN Stack Monitoring in OCI
4+
The included files will allow you to monitor your MERN application with:
5+
1. End-to-end traces uploaded to OCI APM
6+
2. Custom metrics uploaded to OCI APM
7+
3. Application logs uploaded to OCI Logging Analytics
8+
9+
<img width="1134" alt="Screenshot 2023-10-10 at 3 27 28 PM" src="https://github.com/zkhader/oci-observability-and-management/assets/14898804/5393f06f-030b-4ed1-88bb-fab284a83937">
10+
11+
12+
13+
14+
15+
# Step 1: Create an APM Domain in OCI
16+
Follow the documentation to create your domain
17+
https://docs.oracle.com/en-us/iaas/application-performance-monitoring/doc/create-apm-domain.html
18+
19+
- Go to the APM Administration page (Main OCI menu --> Observability & Management --> Application Performance Management --> Administration
20+
- Click on "Create APM Domain" and provide a domain name
21+
22+
<img width="1506" alt="Screenshot 2023-10-10 at 3 00 18 PM" src="https://github.com/zkhader/oci-observability-and-management/assets/14898804/8b5cc430-36fe-40fd-b1e3-1f0ba8af76e6">
23+
24+
25+
26+
Take note of the follwoing:
27+
1. Data upload endpoint
28+
2. Public data key
29+
3. Private data key
30+
31+
- You can find this data in your APM domain's page
32+
33+
<img width="1507" alt="Screenshot 2023-10-10 at 3 01 11 PM" src="https://github.com/zkhader/oci-observability-and-management/assets/14898804/58a7aa34-ab28-48a2-80b0-65f2a65745e0">
34+
35+
36+
37+
38+
# Step 2: Add the files from the repo to your project
39+
In you server's directory, add metrics.js, ./tracing.js, and ocilogginganalytics.js.
40+
41+
42+
metrics.js file:
43+
- Provide your data upload endpoint and private key.
44+
45+
<img width="519" alt="Screenshot 2023-10-10 at 2 50 28 PM" src="https://github.com/zkhader/oci-observability-and-management/assets/14898804/13a0aecd-f23a-4bf0-b947-2d1a05be2724">
46+
47+
48+
49+
tracing.js file:
50+
- You can either use the OTEL Collector or the APM Collector to send traces
51+
- Provide the OTEL collector data upload endpoint if using the OTEL Collector
52+
- Provide your data upload endpoint and private key if using the APM Collector
53+
54+
<img width="592" alt="Screenshot 2023-10-10 at 3 17 26 PM" src="https://github.com/zkhader/oci-observability-and-management/assets/14898804/08116128-2cd1-490f-a8f6-8439e0e8875f">
55+
56+
57+
58+
Next, install the required dependencies
59+
```
60+
npm install
61+
```
62+
63+
Add the apm-rum.js file to your client-end directory and reference it in your webpages:
64+
65+
```
66+
<script src="./apm-rum.js"></script>
67+
<script async crossorigin="anonymous" src="[DATA UPLOAD ENDPOINT]/static/jslib/apmrum.min.js"></script>
68+
```
69+
70+
apm-rum.js file:
71+
- Provide your data upload endpoint, public data key, along with the naming convention you would like to use
72+
73+
<img width="480" alt="Screenshot 2023-10-10 at 3 18 08 PM" src="https://github.com/zkhader/oci-observability-and-management/assets/14898804/17df1a77-6522-41ac-b931-05253c7fd2f1">
74+
75+
76+
77+
78+
Make sure to run the metric and tracing files alog with your server
79+
```
80+
node -r ./metrics.js -r ./tracing.js server.js
81+
```
82+

‎oci-opentelemetry-solution/example/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Sample MERN Application
2+
Product Inventory Application
3+
4+
### Steps to Start the Application
5+
1. cd server —> Modify server.js to include the MongoDB details
6+
```
7+
npm install
8+
npm start
9+
```
10+
2. cd client
11+
```
12+
npm install
13+
npm start
14+
```
15+
16+
3. Application launches on - http://localhost:3001
17+
18+
19+
### Enable APM and OpenTelemetry 

20+
1. Go to the server directory
21+
```
22+
npm install opentelemetry
23+
npm install @opentelemetry/sdk-node
24+
npm install @opentelemetry/auto-instrumentations-node
25+
```
26+
<br>
27+
3. Copy the tracing.js and metrics.js files to the server directory and edit the files to include the APM endpoint and data key
28+
4. Modify package.json to change the start command so it includes metrics.js and tracing.js
29+
```
30+
node -r ./tracing.js -r ./metrics.js server.js
31+
```
32+
6. Copy app-rum.js to client/public directory with the APM endpoint and data key
33+
7. Edit index.html to include apm-rum.js file
34+
35+
```
36+
<script src="./apm-rum.js"></script>

37+
<script async crossorigin="anonymous" src="[APM DOMAIN ENDPOINT]/static/jslib/apmrum.min.js"></script>



38+
```
39+
40+
Now lets start the application:
41+
42+
<ins>Terminal 1:</ins>
43+
```
44+
cd server
45+
npm start
46+
```
47+
48+
<ins>Terminal 2:</ins>
49+
```
50+
cd client
51+
npm start
52+
```
53+
54+
Application traces and metrics will now be sent to OCI APM.
55+
56+
### OCI APM - Traces and Spans
57+
58+
![Image-APM](https://github.com/zkhader/oci-observability-and-management/assets/14898804/7ff956f9-d668-4dd2-8cac-79e29562f96f)
59+
60+
61+

‎oci-opentelemetry-solution/example/client/package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "client",
3+
"version": "0.1.0",
4+
"private": true,
5+
"proxy": "http://localhost:3000",
6+
"dependencies": {
7+
"@testing-library/jest-dom": "^5.17.0",
8+
"@testing-library/react": "^13.4.0",
9+
"@testing-library/user-event": "^13.5.0",
10+
"axios": "^1.5.1",
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0",
13+
"react-scripts": "5.0.1",
14+
"web-vitals": "^2.1.4"
15+
},
16+
"scripts": {
17+
"start": "react-scripts start",
18+
"build": "react-scripts build",
19+
"test": "react-scripts test",
20+
"eject": "react-scripts eject"
21+
},
22+
"eslintConfig": {
23+
"extends": [
24+
"react-app",
25+
"react-app/jest"
26+
]
27+
},
28+
"browserslist": {
29+
"production": [
30+
">0.2%",
31+
"not dead",
32+
"not op_mini all"
33+
],
34+
"development": [
35+
"last 1 chrome version",
36+
"last 1 firefox version",
37+
"last 1 safari version"
38+
]
39+
}
40+
}

‎oci-opentelemetry-solution/example/client/public/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!-- Copyright (c) 2023 Oracle and/or its affiliates. -->
2+
<!-- Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl. -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="utf-8" />
8+
<link rel="icon" href="%PUBLIC_URL%/logo193.png" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
<meta name="theme-color" content="#c71a1a" />
11+
<meta
12+
name="description"
13+
content="Web site created using create-react-app"
14+
/>
15+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo193.png" />
16+
<!--
17+
manifest.json provides metadata used when your web app is installed on a
18+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
19+
-->
20+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
21+
<!--
22+
Notice the use of %PUBLIC_URL% in the tags above.
23+
It will be replaced with the URL of the `public` folder during the build.
24+
Only files inside the `public` folder can be referenced from the HTML.
25+
26+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
27+
work correctly both with client-side routing and a non-root public URL.
28+
Learn how to configure a non-root public URL by running `npm run build`.
29+
-->
30+
<title>Product Inventory</title>
31+
</head>
32+
<body>
33+
<noscript>You need to enable JavaScript to run this app.</noscript>
34+
<div id="root"></div>
35+
<!--
36+
This HTML file is a template.
37+
If you open it directly in the browser, you will see an empty page.
38+
39+
You can add webfonts, meta tags, or analytics to this file.
40+
The build step will place the bundled scripts into the <body> tag.
41+
42+
To begin the development, run `npm start` or `yarn start`.
43+
To create a production bundle, use `npm run build` or `yarn build`.
44+
-->
45+
</body>
46+
</html>

‎oci-opentelemetry-solution/example/client/public/logo193.png‎

5.22 KB
Loading

‎oci-opentelemetry-solution/example/client/public/manifest.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "logo193.png",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/png"
9+
},
10+
{
11+
"src": "logo193.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo193.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#c71a1a",
24+
"background_color": "#22355b"
25+
}

‎oci-opentelemetry-solution/example/client/src/App.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* Copyright (c) 2023 Oracle and/or its affiliates. */
2+
/* Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl. */
3+
4+
.App {
5+
text-align: center;
6+
}
7+
8+
.App-logo {
9+
height: 40vmin;
10+
pointer-events: none;
11+
}
12+
13+
@media (prefers-reduced-motion: no-preference) {
14+
.App-logo {
15+
animation: App-logo-spin infinite 20s linear;
16+
}
17+
}
18+
19+
.App-header {
20+
background-color: #22355b;
21+
min-height: 100vh;
22+
display: flex;
23+
flex-direction: column;
24+
align-items: center;
25+
justify-content: center;
26+
font-size: calc(10px + 2vmin);
27+
color: rgb(208, 64, 64);
28+
}
29+
30+
.App-link {
31+
color: #c71a1a;
32+
}
33+
34+
@keyframes App-logo-spin {
35+
from {
36+
transform: rotate(0deg);
37+
}
38+
to {
39+
transform: rotate(360deg);
40+
}
41+
}

0 commit comments

Comments
 (0)