Skip to content

Commit 8ad1c1d

Browse files
oshalyginsteren
authored andcommitted
Add ReactJS usage instructions (#12)
- There are numerous options to how the library can be consumed and used within a ReactJs application and the examples/instructions given in the README.md are merely examples of how the stackdriver-error-js library can be instrumented within a ReactJs application. - Once the library is published to npm, the instructions to import the module will be updated accordingly. - Additition of a best practices section which helps guide users on how the library can be used in conjunction with Webpack and as a standalone modular utility. Addresses #11
1 parent f96d7da commit 8ad1c1d

1 file changed

Lines changed: 81 additions & 0 deletions

File tree

README.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,88 @@ Uncaught exception in angular expressions will now be reported to Stackdriver Er
119119

120120
If you wish, you can manually delegate exceptions, e.g. `try { ... } catch(e) { $exceptionHandler(e); }` or simply `$exceptionHandler('Something broke!');`.
121121

122+
## Setup for ReactJS
122123

124+
Follow the general instructions denoted in _Setup for JavaScript_ to load and initialize the library.
125+
126+
There is nothing specific that needs to be done with React, other than making sure to initialize the library in your root entry point(typically `index.js`).
127+
128+
## Best Practices
129+
130+
### Only reporting in the production environment with Webpack
131+
132+
If using webpack and the `DefinePlugin`, it is advisable to wrap the initialization logic to only occur in your production environment. Otherwise, with local development you will receive 403s if you restricted your API key to your production environment(which is _HIGHLY_ recommended). The code for this would look something along these lines:
133+
134+
```javascript
135+
// webpack.production.js
136+
// The rest of your webpack configuration
137+
// ...
138+
plugins: [
139+
new webpack.DefinePlugin({
140+
'process.env.NODE_ENV': JSON.stringify('production')
141+
}),
142+
// Your other plugins
143+
]
144+
// ...
145+
// The rest of your webpack configuration
146+
```
147+
148+
```javascript
149+
// index.js
150+
const environment = process.env.NODE_ENV;
151+
152+
if (environment === 'production') {
153+
const errorHandler = new StackdriverErrorReporter();
154+
errorHandler.start({
155+
key: '<my-project-id>',
156+
projectId: '<my-project-id>',
157+
service: '<my-service>', // (optional)
158+
version: '<my-service-version>' // (optional)
159+
});
160+
}
161+
```
162+
163+
### Usage as a utility
164+
165+
If you would like to use the error logger throughout your application, there are many options that exist. The simplest is to pull the initialization logic into its own file and reference it as necessary throughout your application as a module. An example would be as follows:
166+
167+
```javascript
168+
// errorHandlerUtility.js
169+
170+
const environment = process.env.NODE_ENV;
171+
172+
let errorHandler;
173+
174+
if (environment === 'production') {
175+
176+
errorHandler = new StackdriverErrorReporter();
177+
errorHandler.start({
178+
key: '<my-project-id>',
179+
projectId: '<my-project-id>',
180+
service: '<my-service>', // (optional)
181+
version: '<my-service-version>' // (optional)
182+
});
183+
184+
} else {
185+
errorHandler = console.error;
186+
}
187+
188+
export default errorHandler;
189+
190+
```
191+
192+
Consumption of the errorHandlerUtility would essentially follow the following pattern:
193+
194+
```javascript
195+
// MyComponent.jsx
196+
import errorHandler from './errorHandlerUtility';
197+
198+
// Some example code that throws an error
199+
.catch(error) {
200+
errorHandler.report(error);
201+
}
202+
203+
```
123204

124205
## FAQ
125206

0 commit comments

Comments
 (0)