Skip to content
This repository was archived by the owner on Oct 3, 2023. It is now read-only.

Commit 484fbe7

Browse files
crdgonzalezcadraffensperger
crdgonzalezca
authored and
draffensperger
committed
Detect route transitions and send 'Navigation' traces. (#102)
1 parent 7169724 commit 484fbe7

11 files changed

Lines changed: 293 additions & 74 deletions

File tree

‎examples/user_interaction/client/package-lock.json‎

Lines changed: 102 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/user_interaction/client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@opencensus/web-all": "^0.0.2",
1616
"react": "^16.8.6",
1717
"react-dom": "^16.8.6",
18+
"react-router-dom": "^5.0.1",
1819
"react-scripts": "3.0.1",
1920
"zone.js": "^0.9.1"
2021
},

‎examples/user_interaction/client/public/index.html‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,37 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>OpenCensus Web User Interaction tracing</title>
5-
<meta charset="utf-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<!--
3+
4+
<head>
5+
<title>OpenCensus Web User Interaction tracing</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="theme-color" content="#000000" />
9+
<!--
910
manifest.json provides metadata used when your web app is installed on a
1011
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1112
-->
12-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13-
<!-- Load bootstrap to see a resource load span -->
14-
<link
15-
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
16-
rel="stylesheet"
17-
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
18-
crossorigin="anonymous">
19-
</head>
20-
<body>
21-
<h1>OpenCensus Web User Interaction Tracing!</h1>
13+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14+
<!-- Load bootstrap to see a resource load span -->
15+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"
16+
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
17+
</head>
18+
19+
<body>
20+
<h1>OpenCensus Web User Interaction Tracing!</h1>
21+
22+
<p>
23+
This example demonstrates client side browser spans in the same trace for an initial page load
24+
and user iteractions.
25+
</p>
26+
<p>
27+
Sample application that shows how user interaction tracing works.
28+
</p>
29+
<p>
30+
The idea of this example is to show a series of network calls to Node.js backend and JS executions
31+
when a button is clicked. Also, adds a route transition to show this use case and see the 'navigation'
32+
naming approach.
33+
</p>
34+
<div id="root"></div>
35+
</body>
2236

23-
<p>This example demonstrates client side browser spans in the same trace as
24-
server side spans for an initial page load and user iteractions.</p>
25-
<p>The idea of this example is to show a series of network calls to Node.js backend when a button is clicked.
26-
This example will shows how user interaction tracing works.
27-
</p>
28-
<div id="root"></div>
29-
</body>
30-
</html>
37+
</html>

‎examples/user_interaction/client/src/App.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ class App extends React.Component {
2727
}
2828

2929
handleClick() {
30-
console.log("Entering handle click.");
31-
3230
// Use promises to test behavior on MicroTasks.
3331
const promise = new Promise(resolve => {
3432
setTimeout(function () {
@@ -60,6 +58,7 @@ class App extends React.Component {
6058
const data = JSON.parse(xhr.responseText)
6159
const result = this.callCalculatePi();
6260
this.setState({ pi: result, prime_numbers: data });
61+
this.props.history.push('/second_page');
6362
}
6463
};
6564

‎examples/user_interaction/client/src/App.test.js‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎examples/user_interaction/client/src/SecondPage.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Copyright 2019, OpenCensus Authors
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* gRPC://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
19+
class SecondPage extends React.Component {
20+
21+
render() {
22+
return (
23+
<div>
24+
<h5>Second page</h5>
25+
<p>Rendering a second page in order to test the change of route and Navigation naming.</p>
26+
</div>
27+
);
28+
}
29+
}
30+
31+
export default SecondPage;

‎examples/user_interaction/client/src/index.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,32 @@
1717
import React from 'react';
1818
import ReactDOM from 'react-dom';
1919
import App from './App';
20+
import SecondPage from './SecondPage';
2021
import { exportRootSpanAfterLoadEvent } from '@opencensus/web-all';
2122
import { startInteractionTracker } from '@opencensus/web-instrumentation-zone';
2223

24+
import { Route, BrowserRouter as Router, Link } from 'react-router-dom'
2325
// Necessary import for @opencensus/web-instrumentation-zone
2426
import { Zone, ZoneType, Task } from 'zone.js';
2527

26-
ReactDOM.render(<App />, document.getElementById('root'));
28+
const routing = (
29+
<Router>
30+
<div>
31+
<ul>
32+
<li>
33+
<Link to="/">Home</Link>
34+
</li>
35+
<li>
36+
<Link to="/second_page">Second Page</Link>
37+
</li>
38+
</ul>
39+
<Route exact path="/" component={App} />
40+
<Route path="/second_page" component={SecondPage} />
41+
</div>
42+
</Router>
43+
)
44+
45+
ReactDOM.render(routing, document.getElementById('root'));
2746

2847
window.ocAgent = 'http://localhost:55678';
2948
window.ocSampleRate = 1.0; // Sample at 100% for test only. Default is 1/10000.

‎packages/opencensus-web-core/src/trace/model/tracer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ export class Tracer extends TracerBase implements webTypes.Tracer {
6969
},
7070
},
7171
};
72-
const newZone = Zone.root.fork(zoneSpec);
7372

73+
const newZone = Zone.current.fork(zoneSpec);
7474
return newZone.run(() => {
7575
super.startRootSpan(options, root => {
7676
// Set the currentRootSpan to the new created root span.

0 commit comments

Comments
 (0)