Merge branch 'main' into islam/inp-458-find-way-to-sync-send-data-to-axiom-docs

Author: dasfmi

apps/vercel.mdx

@@ -24,7 +24,7 @@ Vercel provides a frictionless developer experience to take care of the hard thi
 
 Vercel makes it easy for frontend teams to develop, preview, and ship delightful user experiences, where performance is the default.
 
-## Sending logs to Axiom
+## Send logs to Axiom
 
 Simply install the [Axiom Vercel app from here](https://vercel.com/integrations/axiom) and be streaming logs and web vitals within minutes!
 
@@ -42,9 +42,11 @@ For function logs, if you call `console.log`, `console.warn` or `console.error`
 
 Axiom supports capturing and analyzing Web Vital data directly from your user’s browser without any sampling and with more data than is available elsewhere. It is perfect to pair with Vercel’s in-built analytics when you want to get really deep into a specific problem or debug issues with a specific audience (user-agent, location, region, etc).
 
-**NOTE: Web Vitals are only currently supported for Next.js websites. Expanded support is coming soon!**
+<Note>
+Web Vitals are only currently supported for Next.js websites. Expanded support is coming soon.
+</Note>
 
-#### Installation
+### Installation
 
 Perform the following steps to install Web Vitals:
 
@@ -76,7 +78,9 @@ export default function RootLayout() {
 }
 ```
 
-**Note:** WebVitals are sent only from production deployments.
+<Note>
+WebVitals are sent only from production deployments.
+</Note>
 
 4. Deploy your site and watch data coming into your Axiom dashboard.
 
@@ -137,7 +141,7 @@ export const GET = withAxiom((req: AxiomRequest) => {
 });
 ```
 
-## Using Next.js 12 for Web Vitals
+## Use Next.js 12 for Web Vitals
 
 If you’re using Next.js version 12, follow the instructions below to integrate Axiom for logging and capturing Web Vitals data.
 
@@ -147,7 +151,7 @@ In your `pages/_app.js` or `pages/_app.ts` and add the following line:
 export { reportWebVitals } from 'next-axiom';
 ```
 
-## Upgrading to Next.js 13 from Next.js 12
+## Upgrade to Next.js 13 from Next.js 12
 
 If you plan on upgrading to Next.js 13, you'll need to make specific changes to ensure compatibility:
 
@@ -237,7 +241,6 @@ You can **parse** the JSON using the [parse_json function](/apl/scalar-functions
 
 - Check out our [APL Documentation on how to use more functions](/apl/scalar-functions/string-functions) and run your own queries against your Vercel logs.
 
-
 ## Migrate from Vercel app to next-axiom
 
 In May 2024, Vercel [introduced higher costs](https://axiom.co/blog/changes-to-vercel-log-drains) for using Vercel Log Drains. Because the Axiom Vercel app depends on Log Drains, using the next-axiom library can be the cheaper option to analyze telemetry data for higher volume projects.
@@ -262,3 +265,7 @@ module.exports = withAxiom({
 ```
 
 For more configuration options, see the [documentation in the next-axiom GitHub repository](https://github.com/axiomhq/next-axiom).
+
+## Send logs from Vercel preview deployments
+
+To send logs from Vercel preview deployments to Axiom, enable preview deployments for the environment variable `NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT`. For more information, see the [Vercel documentation](https://vercel.com/docs/projects/environment-variables/managing-environment-variables).

dashboard-elements/create.mdx

@@ -23,7 +23,7 @@ To create new dashboard elements:
 1. Optional: [Configure chart options](/dashboard-elements/configure).
 1. Click **Save**.
 
-The new element appears in your dashboard. In the bottom, click **Save** to save your changes to the dashboard.
+The new element appears in your dashboard. At the bottom, click **Save** to save your changes to the dashboard.
 
 ## Change element’s position
 

dashboard-elements/monitor-list.mdx

@@ -0,0 +1,35 @@
+---
+title: Monitor list
+description: 'This section explains how to create monitor list dashboard elements and add them to your dashboard.'
+sidebarTitle: Monitor List
+tags:
+    ['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
+---
+
+import Prerequisites from "/snippets/dashboard-minimal-prerequisites.mdx"
+
+The monitor list dashboard element provides a visual overview of the monitors you specify. It offers a quick glance into important developments about the monitors such as their status and history.
+
+<Prerequisites />
+{/* list separator */}
+- [Create a monitor](/monitor-data/monitors).
+
+## Create monitor list
+
+1. Go to the Dashboards tab and open the dashboard where you want to add the monitor list.
+1. Click <img src="/doc-assets/icons/plus.svg" className="inline-icon" alt="Add chart" /> **Add chart** in the top right corner.
+1. Click **Monitor list** from the list.
+1. In **Columns**, select the type of information you want to display for each monitor:
+    - **Status** displays if the monitor state is normal, triggered, or disabled.
+    - **History** provides a visual overview of the recent runs of the monitor. Green squares mean normal operation and red squares mean triggered state.
+    - **Dataset** is the name of the dataset on which the monitor operates.
+    - **Type** is the type of the monitor.
+    - **Notifiers** displays the notifiers connected to the monitor.
+1. From the list, select the monitors you want to display on the dashboard.
+1. Click **Save**.
+
+The new element appears in your dashboard. At the bottom, click **Save** to save your changes to the dashboard.
+
+<Frame>
+  <img src="/doc-assets/shots/monitor-list.png" alt="Example monitor list" />
+</Frame>

dashboard-elements/note.mdx

@@ -14,10 +14,10 @@ The note dashboard element adds a textbox to your dashboard that you can customi
 
 ## Create note
 
-1. Go to the Dashboards tab and open the dashboard where you want to add the {elementName}.
+1. Go to the Dashboards tab and open the dashboard where you want to add the note.
 1. Click <img src="/doc-assets/icons/plus.svg" className="inline-icon" alt="Add chart" /> **Add chart** in the top right corner.
 1. Click **Note** from the list.
 1. Enter your text on the left in [GitHub Flavored Markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) format. You see the preview of the note dashboard element on the right.
 1. Click **Save**.
 
-The new element appears in your dashboard. In the bottom, click **Save** to save your changes to the dashboard.
+The new element appears in your dashboard. At the bottom, click **Save** to save your changes to the dashboard.

dashboard-elements/overview.mdx

@@ -22,6 +22,12 @@ Choose one of the following to learn more about a dashboard element:
     href="/dashboard-elements/log-stream"
 >
 </Card>
+<Card
+    title="Monitor list"
+    icon="desktop"
+    href="/dashboard-elements/monitor-list"
+>
+</Card>
 <Card
     title="Note"
     icon="note-sticky"

dashboard-elements/pie-chart.mdx

@@ -18,11 +18,11 @@ Pie charts can illustrate the distribution of different types of event data. Eac
 ## Example with Simple Query Builder
 
 <Frame>
-  <img src="/doc-assets/shots/pie-chart-builder.png" />
+  <img src="/doc-assets/shots/pie-chart-builder.png" alt="Pie chart example with Simple Query Builder" />
 </Frame>
 
 ## Example with Advanced Query Language
 
 <Frame>
-  <img src="/doc-assets/shots/pie-chart-apl.png" />
+  <img src="/doc-assets/shots/pie-chart-apl.png" alt="Pie chart example with Advanced Query Language" />
 </Frame>

dashboards/configure.mdx

@@ -25,7 +25,7 @@ To specify who can access a dashboard:
     - Select **Just Me** to make the dashboard private. Only you can access the dashboard.
     - Select a group in your Axiom organization. Only members of the selected group can access the dashboard. For more information about groups, see [Access](/reference/settings#access-overview).
     - Select **Everyone** to make the dashboard accessible to all users in your Axiom organization.
-1. In the bottom, click **Save** to save your changes to the dashboard.
+1. At the bottom, click **Save** to save your changes to the dashboard.
 
 <Note>
   The data that individual users see in the dashboard is determined by the datasets the users have access to. If a user has access to a dashboard but only to some of the datasets referenced in the dashboard’s charts, the user only sees data from the datasets they have access to.
@@ -40,7 +40,7 @@ To specify the types of annotations to display in all dashboard elements:
     - Show all annotations
     - Hide all annotations
     - Selective determine the annotations types to display
-1. In the bottom, click **Save** to save your changes to the dashboard.
+1. At the bottom, click **Save** to save your changes to the dashboard.
 
 ## Set dashboard as homepage
 

doc-assets/shots/monitor-list.png

@@ -1,10 +1,99 @@
 ---
 title: 'Send data from Go app to Axiom'
-description: 'This guide explains how to send data from a Go app to Axiom.'
+description: 'This page explains how to send data from a Go app to Axiom.'
 overview: 'Open-source programming language designed for simplicity and efficiency'
 sidebarTitle: Golang
 url: "https://github.com/axiomhq/axiom-go"
 tags: ['go', 'golang']
 logoId: 'go'
 enlargeLogo: true
 ---
+
+To send data from a Go app to Axiom, use the Axiom Go SDK.
+
+<Note>
+The Axiom Go SDK is an open-source project and welcomes your contributions. For more information, see the [GitHub repository](https://github.com/axiomhq/axiom-go).
+</Note>
+
+import Prerequisites from "/snippets/standard-prerequisites.mdx"
+
+<Prerequisites />
+
+## Install SDK
+
+To install the SDK, run the following:
+
+```shell
+go get github.com/axiomhq/axiom-go/axiom
+```
+
+Import the package:
+
+```go
+import "github.com/axiomhq/axiom-go/axiom"
+```
+
+If you use the [Axiom CLI](/reference/cli), run `eval $(axiom config export -f)` to configure your environment variables. Otherwise, [create an API token](/reference/tokens) and export it as `AXIOM_TOKEN`.
+
+Alternatively, configure the client using [options](https://pkg.go.dev/github.com/axiomhq/axiom-go/axiom#Option) passed to the `axiom.NewClient` function:
+
+```go
+client, err := axiom.NewClient(
+    axiom.SetPersonalTokenConfig("AXIOM_TOKEN"),
+)
+```
+
+## Use client
+
+Create and use a client in the following way:
+
+```go
+package main
+
+import (
+    "context"
+    "fmt"
+    "log"
+
+    "github.com/axiomhq/axiom-go/axiom"
+    "github.com/axiomhq/axiom-go/axiom/ingest"
+)
+
+func main() {
+    ctx := context.Background()
+
+    client, err := axiom.NewClient()
+    if err != nil {
+        log.Fatal(err)
+    }
+
+    if _, err = client.IngestEvents(ctx, "my-dataset", []axiom.Event{
+        {ingest.TimestampField: time.Now(), "foo": "bar"},
+        {ingest.TimestampField: time.Now(), "bar": "foo"},
+    }); err != nil {
+        log.Fatal(err)
+    }
+
+    res, err := client.Query(ctx, "['my-dataset'] | where foo == 'bar' | limit 100")
+    if err != nil {
+        log.Fatal(err)
+    } else if res.Status.RowsMatched == 0 {
+        log.Fatal("No matches found")
+    }
+
+    rows := res.Tables[0].Rows()
+    if err := rows.Range(ctx, func(_ context.Context, row query.Row) error {
+        _, err := fmt.Println(row)
+        return err
+    }); err != nil {
+        log.Fatal(err)
+    }
+}
+```
+
+For more examples, see the [examples in GitHub](https://github.com/axiomhq/axiom-go/tree/main/examples).
+
+## Adapters
+
+To use a logging package, see the [adapters in GitHub](https://github.com/axiomhq/axiom-go/tree/main/adapters).
+

doc-assets/shots/render-axiom-analytics.png

@@ -1,9 +1,102 @@
 ---
 title: 'Send data from JavaScript app to Axiom'
-description: 'This guide explains how to send data from a JavaScript app to Axiom.'
+description: 'This page explains how to send data from a JavaScript app to Axiom.'
 overview: 'High-level, interpreted programming language for web development'
 sidebarTitle: JavaScript
 url: "https://github.com/axiomhq/axiom-js"
 tags: ['js', 'javascript', 'node', 'typescript', 'ts', 'node.js']
 logoId: 'javascript'
 ---
+
+To send data from a JavaScript app to Axiom, use the Axiom JavaScript SDK.
+
+<Note>
+The Axiom JavaScript SDK is an open-source project and welcomes your contributions. For more information, see the [GitHub repository](https://github.com/axiomhq/axiom-js).
+</Note>
+
+import Prerequisites from "/snippets/standard-prerequisites.mdx"
+
+<Prerequisites />
+
+## Install SDK
+
+To install the SDK, run the following:
+
+```shell
+npm install @axiomhq/js
+```
+
+If you use the [Axiom CLI](/reference/cli), run `eval $(axiom config export -f)` to configure your environment variables. Otherwise, [create an API token](/reference/tokens) and export it as `AXIOM_TOKEN`.
+
+You can also configure the client using options passed to the constructor of the client:
+
+```ts
+import { Axiom } from '@axiomhq/js';
+
+const axiom = new Axiom({
+  token: process.env.AXIOM_TOKEN,
+});
+```
+
+## Send data
+
+The following example sends data to Axiom:
+
+```ts
+axiom.ingest('DATASET_NAME', [{ foo: 'bar' }]);
+await axiom.flush();
+```
+
+The client automatically batches events in the background. In most cases, you only want to call `flush()` before your application exits.
+
+## Query data
+
+The following example queries data from Axiom:
+
+```ts
+const res = await axiom.query(`['DATASET_NAME'] | where foo == 'bar' | limit 100`);
+console.log(res);
+```
+
+For more examples, see the [examples in GitHub](https://github.com/axiomhq/axiom-js/tree/main/examples).
+
+## Capture errors
+
+To capture errors, pass a method `onError` to the client:
+
+```ts
+let client = new Axiom({
+  token: '',
+  ...,
+  onError: (err) => {
+    console.error('ERROR:', err);
+  }
+});
+```
+
+By default, `onError` is set to `console.error`.
+
+## Create annotations
+
+The following example creates an annotation:
+
+```ts
+import { annotations } from '@axiomhq/js';
+
+const client = new annotations.Service({ token: process.env.AXIOM_TOKEN });
+
+await annotations.create({
+  type: 'deployment',
+  datasets: ['DATASET_NAME'],
+  title: 'New deployment',
+  description: 'Deployed version 1.0.0',
+})
+```
+
+## Log from Node.js
+
+While the Axiom JavaScript client works on both the backend and the browsers, Axiom provides transports for some of the popular loggers:
+
+- [Pino](/guides/pino)
+- [Winston](/guides/winston)
+