# 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 Logtail Node NPM package:

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

### 2. Setup

Set up Logtail client:

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



### 3. Start logging 🎉

```javascript
[label Send logs to Logtail]
logtail.error("Something bad happend.");
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://logtail.com/team/0/tail ";_blank").

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


## Logging from browser

Collect logs from your frontend code.

### 1. Install

Install Logtail Browser NPM package:

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

### 2. Setup

Set up Logtail client:

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



**Prefer using a Content Delivery Network?**   
Add Logtail import to your HTML page:

```html
[label Import Logtail]
<script src="https://cdnjs.cloudflare.com/ajax/libs/logtail-browser/0.4.19/dist/umd/logtail.min.js" integrity="sha512-EYdnWL7Lrn+96R4BDaOxCgCWWOoZQiMSsfy+3NKYSJxK/CAt6y7cPLvGHRWONYO8Y0SsGuk5Y+lC1w3up7f7OA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```

### 3. Start logging 🎉

```javascript
[label Send logs to Logtail]
logtail.error("Something bad happend.");
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://logtail.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 Logtail JavaScript NPM package:

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

### 2. Setup

Set up Logtail 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',
});
```
```javascript
[label Frontend code]
import { Browser as Logtail } from "@logtail/js";
const logtail = new Logtail("$SOURCE_TOKEN", {
  endpoint: 'https://$INGESTING_HOST',
});
```
[/code-tabs]



### 3. Start logging 🎉

Log the same way in backend and frontend:

```javascript
[label Send logs to Better Stack]
logtail.error("Something bad happend.");
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://logtail.com/team/0/tail ";_blank").

[warning]
**Node.js version 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 example project](https://github.com/logtail/logtail-js/blob/master/example-project/index.js#L59) 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.