# JavaScript ## Requirements * JavaScript application written in: * Node.js * See [demo Node.js app](https://github.com/RevDeBug/revdebug-tutorial-nodeweb) * React * See [demo React app](https://github.com/RevDeBug/revdebug-tutorial-react-js) * Vue * See [demo Vue app](https://github.com/RevDeBug/revdebug-tutorial-vue-js) * Angular (TypeScript) * See [demo Angular app](https://github.com/RevDeBug/revdebug-tutorial-angular) * [Configured & installed RevDeBug Server ](/revdebug/installing-revdebug-server.md) To setup RevDeBug you will need to: 1. [Add RevDeBug.json configuration file to your project](#configure-revdebug.json-with-your-project) 2. [Install RevDeBug package from RevDeBug NPM repository](#install-revdebug-npm-repository) ## **Configure RevDeBug.json with your project** Create a file `revdebug.json` in main app folder of your project where you have package.json to set up a connection with RevDeBug Monitor. {% tabs %} {% tab title="Node.js" %} {% code title="revdebug.json" %} ```json { "host": "revdebug.server.address", "secure": true, "apm": true, "mode": "onevent", "solution": "Node.js Application", // Server instrumentation options ".server": { "application": "Node.js Application Server", "target": "node", // All js files that are responsible for the server side // If you want to instrument all js files type ""**/*.js"" "files": ["src/*.js", "app.js"] }, // Browser Recording instrumentation options // If you only want to use monitoring of the server side, remove this section ".client": { "application": "Node.js Application Client", "useFMP": true, "screen": true, "target": "web", "sourceMap": true, "files": "public/YourFrontendScript.js", "index": "public/index.html" } } ``` {% endcode %} {% endtab %} {% tab title="Angular" %} {% code title="revdebug.json" %} ```json { "host": "revdebug.server.address", "secure": true, "apm": true, "screen": true, "screenTime": 10, "solution": "Angular Example", "application": "Angular Example", "type": "module", "mode": "onevent", "sourceMap": true, "path": "src", "files": "**/*.{js,ts}", "index": "src/index.html", "target": "web", "entrySpan": "single", "useFMP": true, "postPath": "dist", "postFiles": "*.js", "framework": "angular" } ``` {% endcode %} {% endtab %} {% tab title="Vue.js" %} {% code title="revdebug.json" %} ```json { "host": "revdebug.server.address", "secure": true, "apm": true, "solution": "Vue Project", "application": "Vue Example", "sw_trace_ignore_path": "/sockjs-node/**", "vueErrors": true, "screen": true, "screenTime": 10, "target": "web", "type": "module", "mode": "onevent", "logging": "info", "sourceMap": true, "path": "src", "files": "**/*.{js,vue}", "index": "public/index.html", "entrySpan": "single", "useFMP": true } ``` {% endcode %} {% endtab %} {% tab title="React - JavaScript" %} {% code title="revdebug.json" %} ```json { "host": "revdebug.server.address", "secure": true, "apm": true, "screen": true, "screenTime": 10, "solution": "React Project", "application": "React Example", "type": "module", "mode": "onevent", "sourceMap": true, "path": "src", "files": "**/*.js", "index": "public/index.html", "excludeInst": "import", "target": "web", "entrySpan": "single", "useFMP": true } ``` {% endcode %} {% endtab %} {% tab title="React - TypeScript" %} {% code title="revdebug.json" %} ```json { "host": "revdebug.server.address", "secure": true, "apm": true, "screen": true, "screenTime": 10, "solution": "TypeScript and React", "application": "TypeScript and React Example", "type": "module", "mode": "onevent", "sourceMap": true, "path": "src", "files": "**/*.{ts,tsx}", "index": "public/index.html", "excludeInst": "import", "target": "web", "entrySpan": "single", "useFMP": true } ``` {% endcode %} {% endtab %} {% endtabs %} ## **Install RevDeBug NPM repository** Before compiling your project with RevDeBug you should have configured `revdebug.json`. Everything is done using the `revd` script. Depending on how you have the RevDeBug npm module installed you either execute it directly or run it with `npx revd`. For a full list of options run `revd --help`. First, add a reference to the @revdebug module repository: ```powershell npm config set @revdebug:registry https://nexus.revdebug.com/repository/npm/ ``` Or you can just set the repository for a single project by adding an `.npmrc` file with the line: ``` @revdebug:registry=https://nexus.revdebug.com/repository/npm/ ``` Then install as a local dependency: ``` npm install @revdebug/revdebug ``` You can verify that RevDeBug is available by running node in interactive mode and doing: ```javascript require('@revdebug/revdebug') {} ``` Instrument your project with RevDeBug: ``` npx revd ``` {% hint style="info" %} RevDeBug will instrument your application's code in-place and will preserve the original code in the “\_\_revd/” folder in your project’s directory. Running “npx revd --remove” will reverse the operation. Instrumentation is meant to be executed on CI/CD Server and not on local development environment, but when running locally keep in mind the above and use “npx revd --remove” to restore the codebase to its uninstrumented state. If you would locally change the kept original source files in “\_\_revd/” folder, running “npx revd” again will instrument the altered code (i.e. your uninstrumented code is kept safe in “\_\_revd/” folder). {% endhint %} ## **Basic setup** | Parameter | Effect | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`host`** | The hostname or IP address as a string of the RevDeBug Server. | | **`secure`** | Indicates whether to use a secure HTTPS connection. | | **`port`** | The port of the RevDeBug Server, this must be a number. | | **`webPort`** | The port of the record server for web projects, this must be a number. A value of 0 indicates that the appropriate port 80 or 443 be used according to the secure status. | | **`release`** | The release string, normally git commit hash (retrieved automatically if not provided). | | **`version`** | Human readable version string. If package.json is present this comes from the version field. | | **`solution`** | Solution name. If package.json is present this comes from the name field. | | **`application`** | Application name. If package.json is present this comes from the main field. | | **`type`** | How to parse .js and .jsx files, can be commonjs or module. If package.json is present this comes from the type field. All .mjs, .ts and .tsx" files are always parsed as module and all .cjs files are parsed as commonjs regardless of this setting. | | **`runtime`** | How the RevDeBug runtime is incorporated into the project, can be inject, local or global. The default is global, see below for details. | | **`mode`** | The record mode you want this project to start in, options are continuous, onevent or standby. When in standby nothing will be recorded even if an unhandled exception occurs. A project that is set to standby or onevent can not be set to continuous through the use of the RevDeBug API and a project in standby can not be changed either. Though this setting can be overridden through the use of environment variables, see below for details. | | **`sourceMap`** | Specifies whether file.map source maps are to be written alongside instrumented sources, true or false, default is false. | | **`path`** | This allows you to specify a common path prefix for any files or excludes you specify for the current project or subproject. This value will also be excluded from any web project exception localization filename matching. Paths are inherited from parent projects and this path is joined with and treated as a subpath of the parent. | | **`files`** | This is where you specify the files to be instrumented for this project. If a project has files then it is a full project and not just a bunch of options for command line compiling or subprojects. This can be specified as either a string or an array of strings, and each one is treated as a wildcard match specifier and all files in the current path which match are included in the project. All files of all subprojects of this project are also automatically excluded from this project. | | **`index`** | For a web runtime type inject or global this specifies the name of the index HTML-ish file to be modified for the inclusion of the RevDeBug script. For a global project a \