# JavaScript quick start guide

Where do you want to collect your JavaScript logs from?

- [Node.js backend only](#logging-from-node-js)
- [Browser only](#logging-from-browser)
- [Both browser and Node.js backend](#logging-from-browser-and-node-js)

## Logging from Node.js

Collect logs from the backend code of your application.

### 1. Install

Install the `@logtail/node` npm package:

```bash
[label Install @logtail/node]
npm install @logtail/node
```

### 2. Set up

Set up the Better Stack client:

```javascript
[label Set up the client]
const { Logtail } = require("@logtail/node");
const logtail = new Logtail("$SOURCE_TOKEN", {
  endpoint: 'https://$INGESTING_HOST',
});

// Forward console.log(), console.warn() and similar to Better Stack too
logtail.replaceConsoleMethods();
```



### 3. Start logging

```javascript
[label Send logs to Better Stack]
logtail.error("Something bad happened.");
logtail.info("Log message with structured data.", {
    item: "Orange Soda",
    price: 100.00
});

// Ensure that all logs are sent to Logtail
logtail.flush()
```

You should see your logs in [Better Stack → Live tail](https://telemetry.betterstack.com/team/0/tail ";_blank").

[warning]
#### Node.js 12 or higher is required
[/warning]


## Logging from browser

Collect logs from your frontend code.

### 1. Install

Install the `@logtail/browser` npm package:

```bash
[label Install @logtail/browser]
npm install @logtail/browser
```

### 2. Set up

Set up the Better Stack client:

```javascript
[label Set up the client]
import { Logtail } from "@logtail/browser";
const logtail = new Logtail("$SOURCE_TOKEN", {
  endpoint: 'https://$INGESTING_HOST',
});

// Forward console.log(), console.warn() and similar to Better Stack too
logtail.replaceConsoleMethods();
```

#### Prefer using a Content Delivery Network?

Add the Better Stack import to your HTML page instead of the `import`:

```html
[label Import Better Stack]
<script src="https://cdnjs.cloudflare.com/ajax/libs/logtail-browser/0.6.1/dist/umd/logtail.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```

### 3. Start logging

```javascript
[label Send logs to Better Stack]
logtail.error("Something bad happened.");
logtail.info("Log message with structured data.", {
    item: "Orange Soda",
    price: 100.00
});

// Ensure that all logs are sent to Logtail
logtail.flush()
```

You should see your logs in [Better Stack → Live tail](https://telemetry.betterstack.com/team/0/tail ";_blank").

## Logging from browser and Node.js

Collect logs from both backend and frontend code of your Node.js application.


### 1. Install

Install the `@logtail/js` npm package:

```bash
[label Install @logtail/js]
npm install @logtail/js
```

### 2. Set up

Set up the Better Stack client in backend and frontend code:

[code-tabs]
```javascript
[label Backend code]
const { Node: Logtail } = require("@logtail/js");
const logtail = new Logtail("$SOURCE_TOKEN", {
  endpoint: 'https://$INGESTING_HOST',
});

// Forward console.log(), console.warn() and similar to Better Stack too
logtail.replaceConsoleMethods();
```
```javascript
[label Frontend code]
import { Browser as Logtail } from "@logtail/js";
const logtail = new Logtail("$SOURCE_TOKEN", {
  endpoint: 'https://$INGESTING_HOST',
});

// Forward console.log(), console.warn() and similar to Better Stack too
logtail.replaceConsoleMethods();
```
[/code-tabs]



### 3. Start logging

Log the same way in backend and frontend:

```javascript
[label Send logs to Better Stack]
logtail.error("Something bad happened.");
logtail.info("Log message with structured data.", {
    item: "Orange Soda",
    price: 100.00
});

// Ensure that all logs are sent to Logtail
logtail.flush()
```

You should see your logs in [Better Stack → Live tail](https://telemetry.betterstack.com/team/0/tail ";_blank").

[warning]
#### Node.js 12 or higher is required
[/warning]

## Need help?

Please let us know at hello@betterstack.com.  
We're happy to help! 🙏

## Additional information

- Want to learning more about **log levels** and **middleware** in Node.js?  
Continue to the [Advanced usage of Better Stack JavaScript client](https://betterstack.com/docs/logs/javascript/logging/).

- New to logging? See the [Intro guide to Node.js logging](https://betterstack.com/community/guides/logging/how-to-start-logging-with-node-js/) and the [Best practices for logging in Node.js](https://betterstack.com/community/guides/logging/nodejs-logging-best-practices/).

- Logging from browser? Some browsers (e.g. Brave, or some browser extensions) may block your logs from being sent. If you need to work around this issue, see [possible workarounds on GitHub](https://github.com/logtail/logtail-js/issues/74).

- Using [Bun](https://bun.sh) runtime? No worries, our logging packages are tested in Bun as well as Node.

- Using helper function for logging in Node.js? You can fix the logged `context.runtime` info by passing `stackContextHint` to the logger. See the [usage in the Winston transport](https://github.com/logtail/logtail-js/blob/master/packages/winston/src/winston.ts#L40) to learn more.

### NPM packages

Package [@logtail/js](https://www.npmjs.com/package/@logtail/js) provides a convenient way to install and manage both [@logtail/node](https://www.npmjs.com/package/@logtail/node) and [@logtail/browser](https://www.npmjs.com/package/@logtail/browser) NPM packages.
You can install the packages separately if you wish to.