|
1 | | -# Using the CloudWatch RUM Web Client with Angular 12 |
| 1 | +# Using the CloudWatch RUM Web Client with Angular 12 |
2 | 2 |
|
3 | 3 | ## Add the snippet to index.html |
4 | 4 |
|
5 | 5 | To install the web client in an Angular application, add the snippet inside the \<head\> tag of `index.html`. |
6 | 6 |
|
7 | 7 | ```html |
8 | | -<!doctype html> |
| 8 | +<!DOCTYPE html> |
9 | 9 | <html lang="en"> |
10 | | -<head> |
11 | | - <script> |
12 | | - (function(n,i,v,r,s,c,u,x,z){x=window.AwsRumClient={q:[],n:n,i:i,v:v,r:r,c:c,u:u};window[n]=function(c,p){x.q.push({c:c,p:p});};z=document.createElement('script');z.async=true;z.src=s;document.head.insertBefore(z,document.getElementsByTagName('script')[0]);})('cwr','00000000-0000-0000-0000-000000000000','1.0.0','us-west-2','https://client.rum.us-east-1.amazonaws.com/1.0.2/cwr.js',{sessionSampleRate:1,identityPoolId:'us-west-2:00000000-0000-0000-0000-000000000000',endpoint:'https://dataplane.rum.us-west-2.amazonaws.com',telemetries:['errors','http','performance'],allowCookies:true}); |
13 | | - </script> |
14 | | - ... |
15 | | -</head> |
16 | | -<body> |
17 | | - ... |
18 | | -</body> |
| 10 | + <head> |
| 11 | + <script> |
| 12 | + (function (n, i, v, r, s, c, u, x, z) { |
| 13 | + x = window.AwsRumClient = { |
| 14 | + q: [], |
| 15 | + n: n, |
| 16 | + i: i, |
| 17 | + v: v, |
| 18 | + r: r, |
| 19 | + c: c, |
| 20 | + u: u |
| 21 | + }; |
| 22 | + window[n] = function (c, p) { |
| 23 | + x.q.push({ c: c, p: p }); |
| 24 | + }; |
| 25 | + z = document.createElement('script'); |
| 26 | + z.async = true; |
| 27 | + z.src = s; |
| 28 | + document.head.insertBefore( |
| 29 | + z, |
| 30 | + document.getElementsByTagName('script')[0] |
| 31 | + ); |
| 32 | + })( |
| 33 | + 'cwr', |
| 34 | + '00000000-0000-0000-0000-000000000000', |
| 35 | + '1.0.0', |
| 36 | + 'us-west-2', |
| 37 | + 'https://client.rum.us-east-1.amazonaws.com/1.0.2/cwr.js', |
| 38 | + { |
| 39 | + sessionSampleRate: 1, |
| 40 | + identityPoolId: |
| 41 | + 'us-west-2:00000000-0000-0000-0000-000000000000', |
| 42 | + endpoint: 'https://dataplane.rum.us-west-2.amazonaws.com', |
| 43 | + telemetries: ['errors', 'http', 'performance'], |
| 44 | + allowCookies: true |
| 45 | + } |
| 46 | + ); |
| 47 | + </script> |
| 48 | + ... |
| 49 | + </head> |
| 50 | + <body> |
| 51 | + ... |
| 52 | + </body> |
| 53 | +</html> |
19 | 54 | ``` |
20 | 55 |
|
21 | 56 | ## Instrument Routing to Record Page Views |
22 | 57 |
|
23 | | -If your application contains arguments in the URL's path, you likely want to |
24 | | -record custom page IDs so that the arguments can be removed and the pages will |
25 | | -be properly aggregated in CloudWatch. For example, if we have two URLs |
26 | | -`https://amazonaws.com/user/123` and `https://amazonaws.com/user/456`, we likely |
27 | | -want to remove the user ID from the path so that the page ID is `/user` for both |
28 | | -URLs. |
| 58 | +If your application contains arguments in the URL's path, you likely want to record custom page IDs so that the arguments can be removed and the pages will be properly aggregated in CloudWatch. For example, if we have two URLs `https://amazonaws.com/user/123` and `https://amazonaws.com/user/456`, we likely want to remove the user ID from the path so that the page ID is `/user` for both URLs. |
29 | 59 |
|
30 | | -For Angular applications, we can subscribe to the `NavigationEnd` event, and |
31 | | -record a custom page ID using the URL provided by the router: |
| 60 | +For Angular applications, we can subscribe to the `NavigationEnd` event, and record a custom page ID using the URL provided by the router: |
32 | 61 |
|
33 | 62 | ```typescript |
34 | 63 | import { Router, NavigationEnd } from '@angular/router'; |
35 | 64 |
|
36 | 65 | declare function cwr(operation: string, payload: any): void; |
37 | 66 |
|
38 | 67 | export class MyComponent implements OnInit { |
39 | | - |
40 | | - constructor(private router: Router) {} |
41 | | - |
42 | | - ngOnInit(): void { |
43 | | - this.router.events.subscribe(event => { |
44 | | - if (event instanceof NavigationEnd) { |
45 | | - console.log('this.router.url'); |
46 | | - cwr('recordPageView', this.router.url); |
47 | | - } |
48 | | - }); |
49 | | - } |
50 | | - |
| 68 | + constructor(private router: Router) {} |
| 69 | + |
| 70 | + ngOnInit(): void { |
| 71 | + this.router.events.subscribe((event) => { |
| 72 | + if (event instanceof NavigationEnd) { |
| 73 | + console.log('this.router.url'); |
| 74 | + cwr('recordPageView', this.router.url); |
| 75 | + } |
| 76 | + }); |
| 77 | + } |
51 | 78 | } |
52 | 79 | ``` |
53 | 80 |
|
54 | | - |
55 | 81 | ## Instrument Error Handling to Record Errors |
56 | 82 |
|
57 | | -Angular intercepts uncaught JavaScript errors that originate within the |
58 | | -Angular application. Because Angular intercepts these errors, they will not be |
59 | | -recorded by the web client. This can be fixed by creating an error handler that |
60 | | -records uncaught errors using the web client's `recordError` command: |
| 83 | +Angular intercepts uncaught JavaScript errors that originate within the Angular application. Because Angular intercepts these errors, they will not be recorded by the web client. This can be fixed by creating an error handler that records uncaught errors using the web client's `recordError` command: |
61 | 84 |
|
62 | 85 | ### 1. Create an error handler |
63 | 86 |
|
64 | 87 | `src/app/cwr-error-handler.ts` |
| 88 | + |
65 | 89 | ```typescript |
66 | | -import { ErrorHandler } from "@angular/core"; |
| 90 | +import { ErrorHandler } from '@angular/core'; |
67 | 91 |
|
68 | 92 | declare function cwr(operation: string, payload: any): void; |
69 | 93 |
|
70 | 94 | export class RumErrorHandler implements ErrorHandler { |
71 | | - handleError(error: any) { |
72 | | - cwr('recordError', error); |
73 | | - } |
| 95 | + handleError(error: any) { |
| 96 | + cwr('recordError', error); |
| 97 | + } |
74 | 98 | } |
75 | 99 | ``` |
76 | 100 |
|
77 | 101 | ### 2. Install the error handler in the root module: |
78 | 102 |
|
79 | 103 | `src/app/app.module.ts` |
| 104 | + |
80 | 105 | ```typescript |
81 | 106 | import { RumErrorHandler } from './cwr-error-handler'; |
82 | 107 | @NgModule({ |
|
0 commit comments