2 | 
3 |
6 |
7 | # Table of contents
8 |
9 | * [Getting Started](#getting-started)
10 | * [Installation](#installation)
11 | * [React Native](#react-native)
12 | * [Initializing](#initializing)
13 | * [Options](#options)
14 | * [Required](#required)
15 | * [`uri`](#uri)
16 | * [Optional](#optional)
17 | * [`debug`](#debug)
18 | * [`publish`](#publish)
19 | * [`interval`](#interval)
20 | * [`environment`](#environment)
21 | * [Usage](#usage)
22 |
23 | # Getting started
24 |
25 | ## Installation
26 |
27 | ```
28 | # With npm
29 | npm install @pleak/react-perf-monitor
30 |
31 | # With yarn
32 | yarn add @pleak/react-perf-monitor
33 | ```
34 |
35 | ### React Native
36 |
37 | If you're using this package with a React Native app, you must link native dependencies to your project with [react-native-cli](https://www.npmjs.com/package/react-native-cli).
38 |
39 | ```
40 | react-native link
41 | ```
42 |
43 | This command will automatically find native dependencies and link them to your project.
44 |
45 | ## Initializing
46 |
47 | We recommend you to initialize the lib in a separate file and then import it when you need it.
48 |
49 | ```js
50 | import { Pleak } from '@pleak/react-perf-monitor';
51 |
52 | const pleak = new Pleak({
53 | uri: 'YOUR_PLEAK_DSN',
54 | });
55 |
56 | export default pleak;
57 | ```
58 |
59 | ### Options
60 |
61 | #### **Required**
62 |
63 | #### `uri`
64 |
65 | Your Pleak DSN, required to publish to Pleak. The structure of your DSN should look like this:
66 |
67 | ```
68 | https://{publicKey}@{host}/{appId}
69 | ```
70 |
71 | #### **Optional**
72 |
73 | #### `debug`
74 |
75 | _Defaults to false_
76 |
77 | If true, informations about events and publishing will be logged in console.
78 |
79 | #### `publish`
80 |
81 | _Defaults to true_
82 |
83 | If true, collected events will be published on Pleak.
84 |
85 | #### `interval`
86 |
87 | _Defaults to 5000_
88 |
89 | Events are not published one by one, they are stored and published in batch at an interval in milliseconds defined by this option.
90 |
91 | #### `environment`
92 |
93 | _Defaults to `process.env.NODE_ENV`_
94 |
95 | Define tracked environment of your app in Pleak.
96 |
97 | # Usage
98 |
99 | Once you installed and initialized the lib you can use it to monitor your React components like so:
100 |
101 | ```js
102 | import React, { Component } from 'react';
103 | import pleak from '../pleak'; // Import the Pleak instance you defined earlier
104 |
105 | class MyComponent extends Component {
106 | state = { user: null };
107 |
108 | constructor(props) {
109 | super(props);
110 |
111 | // Capture your component's performance
112 | pleak.captureComponentPerfs(this, {
113 | // Optional. Use the excludes option to avoid collecting events on specific methods
114 | excludes: ['render'],
115 | });
116 | }
117 |
118 | componentDidMount() {
119 | /* Optional.
120 | This allows you to attach a context to any event triggered by this method */
121 | pleak.setContext({
122 | time: Date.now(),
123 | });
124 |
125 | this.loadData();
126 | }
127 |
128 | loadData = async () => {
129 | const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
130 | const user = await res.json();
131 |
132 | /* Optional.
133 | This allows you to attach a context to all events,
134 | from the moment when this method is triggered (overwritable) */
135 | pleak.setGlobalContext({
136 | user,
137 | });
138 |
139 | this.setState({
140 | user,
141 | });
142 | };
143 |
144 | render() {
145 | const { user } = this.state;
146 |
147 | return
3 | @pleak/react-perf-monitor
4 |Performance monitoring for React and React Native apps with Pleak.
5 |Hello, {user ? user.name : 'world'}!
;
148 | }
149 | }
150 | ```
151 |
--------------------------------------------------------------------------------
/ios/PleakDeviceInfo/PleakDeviceInfo.m:
--------------------------------------------------------------------------------
1 | #import "PleakDeviceInfo.h"
2 |
3 | @implementation PleakDeviceInfo
4 |
5 | RCT_EXPORT_MODULE()
6 |
7 | + (BOOL) requiresMainQueueSetup {
8 | return YES;
9 | }
10 |
11 | - (NSString *) userAgent
12 | {
13 | if (TARGET_OS_TV) {
14 | return @"OS TV, user agent not available";
15 | } else {
16 | UIWebView* webView = [[UIWebView alloc] initWithFrame:CGRectZero];
17 | return [webView stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];
18 | }
19 | }
20 |
21 | - (NSString *) deviceId
22 | {
23 | struct utsname systemInfo;
24 |
25 | uname(&systemInfo);
26 |
27 | NSString* deviceId = [NSString stringWithCString:systemInfo.machine
28 | encoding:NSUTF8StringEncoding];
29 |
30 | if ([deviceId isEqualToString:@"i386"] || [deviceId isEqualToString:@"x86_64"] ) {
31 | deviceId = [NSString stringWithFormat:@"%s", getenv("SIMULATOR_MODEL_IDENTIFIER")];
32 | }
33 |
34 | return deviceId;
35 | }
36 |
37 | - (NSString *) model
38 | {
39 | static NSDictionary* modelsById = nil;
40 |
41 | if (!modelsById) {
42 | modelsById = @{
43 | @"iPod1,1": @"iPod Touch", // (Original)
44 | @"iPod2,1": @"iPod Touch", // (Second Generation)
45 | @"iPod3,1": @"iPod Touch", // (Third Generation)
46 | @"iPod4,1": @"iPod Touch", // (Fourth Generation)
47 | @"iPod5,1": @"iPod Touch", // (Fifth Generation)
48 | @"iPod7,1": @"iPod Touch", // (Sixth Generation)
49 | @"iPhone1,1": @"iPhone", // (Original)
50 | @"iPhone1,2": @"iPhone 3G", // (3G)
51 | @"iPhone2,1": @"iPhone 3GS", // (3GS)
52 | @"iPad1,1": @"iPad", // (Original)
53 | @"iPad2,1": @"iPad 2",
54 | @"iPad2,2": @"iPad 2",
55 | @"iPad2,3": @"iPad 2",
56 | @"iPad2,4": @"iPad 2",
57 | @"iPad3,1": @"iPad", // (3rd Generation)
58 | @"iPad3,2": @"iPad", // (3rd Generation)
59 | @"iPad3,3": @"iPad", // (3rd Generation)
60 | @"iPhone3,1": @"iPhone 4", // (GSM)
61 | @"iPhone3,2": @"iPhone 4", // iPhone 4
62 | @"iPhone3,3": @"iPhone 4", // (CDMA/Verizon/Sprint)
63 | @"iPhone4,1": @"iPhone 4S",
64 | @"iPhone5,1": @"iPhone 5", // (model A1428, AT&T/Canada)
65 | @"iPhone5,2": @"iPhone 5", // (model A1429, everything else)
66 | @"iPad3,4": @"iPad", // (4th Generation)
67 | @"iPad3,5": @"iPad", // (4th Generation)
68 | @"iPad3,6": @"iPad", // (4th Generation)
69 | @"iPad2,5": @"iPad Mini", // (Original)
70 | @"iPad2,6": @"iPad Mini", // (Original)
71 | @"iPad2,7": @"iPad Mini", // (Original)
72 | @"iPhone5,3": @"iPhone 5c", // (model A1456, A1532 | GSM)
73 | @"iPhone5,4": @"iPhone 5c", // (model A1507, A1516, A1526 (China), A1529 | Global)
74 | @"iPhone6,1": @"iPhone 5s", // (model A1433, A1533 | GSM)
75 | @"iPhone6,2": @"iPhone 5s", // (model A1457, A1518, A1528 (China), A1530 | Global)
76 | @"iPhone7,1": @"iPhone 6 Plus",
77 | @"iPhone7,2": @"iPhone 6",
78 | @"iPhone8,1": @"iPhone 6s",
79 | @"iPhone8,2": @"iPhone 6s Plus",
80 | @"iPhone8,4": @"iPhone SE",
81 | @"iPhone9,1": @"iPhone 7", // (model A1660 | CDMA)
82 | @"iPhone9,3": @"iPhone 7", // (model A1778 | Global)
83 | @"iPhone9,2": @"iPhone 7 Plus", // (model A1661 | CDMA)
84 | @"iPhone9,4": @"iPhone 7 Plus", // (model A1784 | Global)
85 | @"iPhone10,3": @"iPhone X", // (model A1865, A1902)
86 | @"iPhone10,6": @"iPhone X", // (model A1901)
87 | @"iPhone10,1": @"iPhone 8", // (model A1863, A1906, A1907)
88 | @"iPhone10,4": @"iPhone 8", // (model A1905)
89 | @"iPhone10,2": @"iPhone 8 Plus", // (model A1864, A1898, A1899)
90 | @"iPhone10,5": @"iPhone 8 Plus", // (model A1897)
91 | @"iPad4,1": @"iPad Air", // 5th Generation iPad (iPad Air) - Wifi
92 | @"iPad4,2": @"iPad Air", // 5th Generation iPad (iPad Air) - Cellular
93 | @"iPad4,3": @"iPad Air", // 5th Generation iPad (iPad Air)
94 | @"iPad4,4": @"iPad Mini 2", // (2nd Generation iPad Mini - Wifi)
95 | @"iPad4,5": @"iPad Mini 2", // (2nd Generation iPad Mini - Cellular)
96 | @"iPad4,6": @"iPad Mini 2", // (2nd Generation iPad Mini)
97 | @"iPad4,7": @"iPad Mini 3", // (3rd Generation iPad Mini)
98 | @"iPad4,8": @"iPad Mini 3", // (3rd Generation iPad Mini)
99 | @"iPad4,9": @"iPad Mini 3", // (3rd Generation iPad Mini)
100 | @"iPad5,1": @"iPad Mini 4", // (4th Generation iPad Mini)
101 | @"iPad5,2": @"iPad Mini 4", // (4th Generation iPad Mini)
102 | @"iPad5,3": @"iPad Air 2", // 6th Generation iPad (iPad Air 2)
103 | @"iPad5,4": @"iPad Air 2", // 6th Generation iPad (iPad Air 2)
104 | @"iPad6,3": @"iPad Pro 9.7-inch", // iPad Pro 9.7-inch
105 | @"iPad6,4": @"iPad Pro 9.7-inch", // iPad Pro 9.7-inch
106 | @"iPad6,7": @"iPad Pro 12.9-inch", // iPad Pro 12.9-inch
107 | @"iPad6,8": @"iPad Pro 12.9-inch", // iPad Pro 12.9-inch
108 | @"iPad7,1": @"iPad Pro 12.9-inch", // 2nd Generation iPad Pro 12.5-inch - Wifi
109 | @"iPad7,2": @"iPad Pro 12.9-inch", // 2nd Generation iPad Pro 12.5-inch - Cellular
110 | @"iPad7,3": @"iPad Pro 10.5-inch", // iPad Pro 10.5-inch - Wifi
111 | @"iPad7,4": @"iPad Pro 10.5-inch", // iPad Pro 10.5-inch - Cellular
112 | @"AppleTV2,1": @"Apple TV", // Apple TV (2nd Generation)
113 | @"AppleTV3,1": @"Apple TV", // Apple TV (3rd Generation)
114 | @"AppleTV3,2": @"Apple TV", // Apple TV (3rd Generation - Rev A)
115 | @"AppleTV5,3": @"Apple TV", // Apple TV (4th Generation)
116 | @"AppleTV6,2": @"Apple TV 4K", // Apple TV 4K
117 | };
118 | }
119 |
120 | NSString* model = [modelsById objectForKey:self.deviceId];
121 |
122 | if (!model) {
123 | if ([self.deviceId rangeOfString:@"iPod"].location != NSNotFound) {
124 | model = @"iPod Touch";
125 | } else if ([self.deviceId rangeOfString:@"iPad"].location != NSNotFound) {
126 | model = @"iPad";
127 | } else if ([self.deviceId rangeOfString:@"iPhone"].location != NSNotFound) {
128 | model = @"iPhone";
129 | } else if ([self.deviceId rangeOfString:@"AppleTV"].location != NSNotFound) {
130 | model = @"Apple TV";
131 | }
132 | }
133 |
134 | return model;
135 | }
136 |
137 | - (NSString *) bundleId
138 | {
139 | return [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleIdentifier"];
140 | }
141 |
142 | - (NSString *) appVersion
143 | {
144 | return [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleShortVersionString"];
145 | }
146 |
147 | - (NSString *) systemName
148 | {
149 | return self.currentDevice.systemName;
150 | }
151 |
152 | - (NSString *) systemVersion
153 | {
154 | return self.currentDevice.systemVersion;
155 | }
156 |
157 | - (NSString *) deviceUniqueId
158 | {
159 | return [[self.currentDevice identifierForVendor]UUIDString];
160 | }
161 |
162 | - (UIDevice *) currentDevice
163 | {
164 | return [UIDevice currentDevice];
165 | }
166 |
167 | - (NSDictionary *) constantsToExport
168 | {
169 | return @{
170 | @"userAgent": self.userAgent ?: [NSNull null],
171 | @"brand": @"Apple",
172 | @"model": self.model ?: [NSNull null],
173 | @"deviceUniqueId": self.deviceUniqueId ?: [NSNull null],
174 | @"bundleId": self.bundleId ?: [NSNull null],
175 | @"appVersion": self.appVersion ?: [NSNull null],
176 | @"systemName": self.systemName,
177 | @"systemVersion": self.systemVersion,
178 | };
179 | }
180 |
181 | @end
182 |
--------------------------------------------------------------------------------
/ios/PleakDeviceInfo/PleakDeviceInfo.xcodeproj/project.pbxproj:
--------------------------------------------------------------------------------
1 | // !$*UTF8*$!
2 | {
3 | archiveVersion = 1;
4 | classes = {
5 | };
6 | objectVersion = 46;
7 | objects = {
8 |
9 | /* Begin PBXBuildFile section */
10 | 13BE3DEE1AC21097009241FE /* PleakDeviceInfo.m in Sources */ = {isa = PBXBuildFile; fileRef = 13BE3DED1AC21097009241FE /* PleakDeviceInfo.m */; };
11 | /* End PBXBuildFile section */
12 |
13 | /* Begin PBXCopyFilesBuildPhase section */
14 | 58B511D91A9E6C8500147676 /* CopyFiles */ = {
15 | isa = PBXCopyFilesBuildPhase;
16 | buildActionMask = 2147483647;
17 | dstPath = "include/$(PRODUCT_NAME)";
18 | dstSubfolderSpec = 16;
19 | files = (
20 | );
21 | runOnlyForDeploymentPostprocessing = 0;
22 | };
23 | /* End PBXCopyFilesBuildPhase section */
24 |
25 | /* Begin PBXFileReference section */
26 | 134814201AA4EA6300B7C361 /* libPleakDeviceInfo.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libPleakDeviceInfo.a; sourceTree = BUILT_PRODUCTS_DIR; };
27 | 13BE3DEC1AC21097009241FE /* PleakDeviceInfo.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = PleakDeviceInfo.h; sourceTree = "