|
| 1 | +# AppSignal for JavaScript |
| 2 | + |
| 3 | +- [AppSignal.com website][appsignal] |
| 4 | +- [Documentation][docs] |
| 5 | +- [Support][contact] |
| 6 | + |
| 7 | +[](https://lerna.js.org/) [](https://github.com/prettier/prettier) |
| 8 | + |
| 9 | +## Description |
| 10 | + |
| 11 | +## Usage |
| 12 | + |
| 13 | +First, make sure you've installed AppSignal in your application by following the steps in [Installation](#installation). |
| 14 | + |
| 15 | +### Track any error |
| 16 | + |
| 17 | +Catch an error and report it to AppSignal: |
| 18 | + |
| 19 | +```js |
| 20 | +try { |
| 21 | + // do something that might throw an error |
| 22 | +} catch (error) { |
| 23 | + appsignal.sendError(error) |
| 24 | + // handle the error |
| 25 | +} |
| 26 | + |
| 27 | +// You can catch errors asynchronously by listening to Promises... |
| 28 | +asyncActionThatReturnsAPromise().catch(error => appsignal.sendError(error)) |
| 29 | + |
| 30 | +// ...or by using async/await |
| 31 | +async function() { |
| 32 | + try { |
| 33 | + const result = await asyncActionThatReturnsAPromise() |
| 34 | + } catch (error) { |
| 35 | + appsignal.sendError(error) |
| 36 | + // handle the error |
| 37 | + } |
| 38 | +} |
| 39 | + |
| 40 | +// ...or in an event handler or callback function |
| 41 | +events.on("event", (err) => { |
| 42 | + appsignal.sendError(err) |
| 43 | +}) |
| 44 | +``` |
| 45 | + |
| 46 | +**NOTE:** Uncaught exceptions are **not** captured by default. We made the decision to not include this functionality as part of the core library due to the high amount of noise from browser extensions, ad blockers etc. that generally makes libraries such as this less effective. |
| 47 | + |
| 48 | +We recommend using a relevant [integration](#integrations) as a better way to handle exceptions, or, if you _would_ prefer capture uncaught exceptions, you can do so by using the `@appsignal/plugin-window-events` package alongside this one (available soon). |
| 49 | + |
| 50 | +## Installation |
| 51 | + |
| 52 | +First, sign up for an AppSignal account and add the `@appsignal/javascript` package to your `package.json`. Then, run `yarn install`/`npm install`. |
| 53 | + |
| 54 | +You can also add these packages to your `package.json` on the command line: |
| 55 | + |
| 56 | +```bash |
| 57 | +yarn add @appsignal/javascript |
| 58 | +npm install --save @appsignal/javascript |
| 59 | +``` |
| 60 | + |
| 61 | +You can then import and use the package in your bundle: |
| 62 | + |
| 63 | +```js |
| 64 | +import Appsignal from "@appsignal/javascript" // For ES Module |
| 65 | +const Appsignal = require("@appsignal/javascript").default // For CommonJS module |
| 66 | + |
| 67 | +const appsignal = new Appsignal({ |
| 68 | + key: "YOUR FRONTEND API KEY" |
| 69 | +}) |
| 70 | +``` |
| 71 | + |
| 72 | +It's recommended (although not necessarily required) to use the instance of the `Appsignal` object like a singleton. One way that you can do this is by `export`ing an instance of the library from a `.js`/`.ts` file somewhere in your project. |
| 73 | + |
| 74 | +```js |
| 75 | +import Appsignal from "@appsignal/javascript" |
| 76 | + |
| 77 | +export default new Appsignal({ |
| 78 | + key: "YOUR FRONTEND API KEY" |
| 79 | +}) |
| 80 | +``` |
| 81 | + |
| 82 | +Currently, we have no plans to supply a CDN-hosted version of this library. |
| 83 | + |
| 84 | +If you're stuck, feel free to [contact us][contact] for help! |
| 85 | + |
| 86 | +## Integrations |
| 87 | + |
| 88 | +An integration is a module that can consume the `Appsignal` object to catch errors from popular libraries or frameworks. These integrations may come in a variety of different forms, and we aim to generally provide APIs that are consistent, and feel idiomatic to use, with the libraries and/or frameworks that you're using. |
| 89 | + |
| 90 | +These currently include: |
| 91 | + |
| 92 | +* React (beta) - `@appsignal/react` |
| 93 | + |
| 94 | +## Supported browsers |
| 95 | + |
| 96 | +This package can be used in any ECMAScript 5 compatible browser. We aim for compatibility down to Internet Explorer 9 [(roughly 0.22% of all browsers used today)](https://www.w3counter.com/globalstats.php). All browsers older than this can only supported on a "best effort" basis, and full functionality cannot be guaranteed. |
| 97 | + |
| 98 | +When developing, don't forget to check browser support on [Can I Use?](https://caniuse.com/) and the [ES6 Compatibility Table](https://kangax.github.io/compat-table/es6/), and provide the appropriate polyfills or fallbacks. **In a small percentage of browsers, a `Promise` polyfill may be required to use this library.** |
| 99 | + |
| 100 | +## Development |
| 101 | + |
| 102 | +### Installation |
| 103 | + |
| 104 | +This repository is a Lerna-managed monorepo, containing packages (located in the `/packages` directory) that map to separate `npm` modules. |
| 105 | + |
| 106 | +To install the dependencies: |
| 107 | + |
| 108 | +```bash |
| 109 | +yarn install |
| 110 | +lerna bootstrap |
| 111 | +``` |
| 112 | + |
| 113 | +You can then run the following to start the compiler in _watch_ mode. This automatically compiles both the ES Module and CommonJS variants: |
| 114 | + |
| 115 | +```bash |
| 116 | +yarn build:watch |
| 117 | +``` |
| 118 | + |
| 119 | +You can also build the library without watching the directory: |
| 120 | + |
| 121 | +``` |
| 122 | +yarn build # build both CJS and ESM |
| 123 | +yarn build:cjs # just CJS |
| 124 | +yarn build:esm # just ESM |
| 125 | +``` |
| 126 | + |
| 127 | +### Testing |
| 128 | + |
| 129 | +The tests for this library use [Jest](https://jestjs.io) as the test runner. Once you've installed the dependencies, you can run the following command in the root of this repository to run the tests for all packages, or in the directory of a package to run only the tests pertaining to that package: |
| 130 | + |
| 131 | +```bash |
| 132 | +yarn test |
| 133 | +``` |
| 134 | + |
| 135 | +### Versioning |
| 136 | + |
| 137 | +This repo uses [Semantic Versioning][semver] (often referred to as _semver_). Each package in the repository is versioned independently from one another. |
| 138 | + |
| 139 | +@TODO: define how this works once we know more about releasing |
| 140 | + |
| 141 | +## Contributing |
| 142 | + |
| 143 | +Thinking of contributing to this repo? Awesome! 🚀 |
| 144 | + |
| 145 | +Please follow our [Contributing guide][contributing-guide] in our documentation and follow our [Code of Conduct][coc]. |
| 146 | + |
| 147 | +Also, we would be very happy to send you Stroopwafles. Have look at everyone we send a package to so far on our [Stroopwafles page][waffles-page]. |
| 148 | + |
| 149 | +## Support |
| 150 | + |
| 151 | +[Contact us][contact] and speak directly with the engineers working on AppSignal. They will help you get set up, tweak your code and make sure you get the most out of using AppSignal. |
| 152 | + |
| 153 | +Also see our [SUPPORT.md file](SUPPORT.md). |
| 154 | + |
| 155 | +[appsignal]: https://appsignal.com |
| 156 | +[appsignal-sign-up]: https://appsignal.com/users/sign_up |
| 157 | +[contact]: mailto:[email protected] |
| 158 | +[coc]: https://docs.appsignal.com/appsignal/code-of-conduct.html |
| 159 | +[waffles-page]: https://appsignal.com/waffles |
| 160 | +[docs]: http://docs.appsignal.com |
| 161 | +[contributing-guide]: http://docs.appsignal.com/appsignal/contributing.html |
| 162 | + |
| 163 | +[semver]: http://semver.org/ |
0 commit comments