• Browser (e.g: Google Chrome)
• Access to Gcalls-docs repository
• Visual Studio Code
• git

2. Admin page:​

• (*) Note: Admin page will only commit to 1 branch: preview branch. It's not recommended to edit 1 document using both Admin page and Programmer's approach
• Go to docs.gcalls.co/admin (editor page powered by NetlifyCMS)
• Login with your GitLab account (the one has access to the repository)
• (*) Note: First time login requires you to grant a GitLab App permission to commit and push on this repository.

2.1 Create or edit a document:​

• Click on a collection you'd like to add or edit a doc
• Click New to add a new doc or click on a doc to edit it.
• Fill out your doc using the admin page or alternatively, use third-party online markdown editor (e.g: https://stackedit.io/app#)

2.2 Add metadata:​

Note: NetlifyCMS can only offer to create documents, not folders.

• Image: Click the plus sign (+) on the top right of menu bar and chose Image to open the Image board. From there, you can either pick an image on the system or upload a new one.

• Slugs: index name of your doc (e.g: if you name slug "example", your doc would be available to be accessed at https://docs.gcalls.co/your-folder/example)

• Tags: tags for your docs. Each separated by a comma (","). The more tags you add, the more likely your document get discovered.

• (Optional) Author's name, profile picture, title, ... are optional, though encouraged to be used for blogs. Anything other than blogs won't display author's information

2.3 Publish your doc​

• When you're ready, publish the doc

2.4 Other tips and tricks:​

• You can directly edit a document on the client UI by clicking Edit this page (Not recommended for end-user who has no experience with markdown)

3. Programmer's approach:​

This process can be achieved with just the operating system's default terminal. However, this guide will show you a more inclusive approach (for both tech and non-tech personnels).

3.1 One time setup:​

• Create a folder to store the source code.

• Open Visual Studio Code, click File > Open folder, select the folder you've just created.

• Click Terminal > New Terminal on the top menu bar. A new terminal will appear on the bottom of the window:

• Type in the terminal:

  • Initialize git:

    git init
    
  • Establish connection to Gcalls-Doc source code:

    git remote add origin https://gitlab.com/gcalls-opensource/gcalls-doc
    

3.2 Frequent Setup (Everytime, you want to start a something new)​

• Type in the terminal:
  • Get the latest update of the source code:

    git fetch
    
  • Check the curernt branch, it should return master:

    git branch
    
  • Download the latest update of the current branch (i.e: master):

    git pull
    
  • Create a new branch of your own:

    git checkout -b <branch_name>
    
  • At this point, you can start creating/editing/deleting documents.

3.3 Editing:​

• On the left side menu, select the document icon on top:
• It'll show a directory tree like this: .
• From there, you can:
  • Click on a folder to open it, click on documents to open them.
  • Right click on a document > Rename... to rename or Right click on a document > Delete to delete it.
  • Right click on a folder > Rename... to rename or Right click on a folder > Delete to delete it.
  • Right click on a folder > New file... to create a new file. Name it with extension .md (e.g: my-document.md)
• Document's metadata:
  • Metadata is used to identify document's core value.
  • Add the following configuration to the top of your document:

---
title: <title of your document>
slug: <index-name-of-your-document>
tags:
  - <tag, keyword for the document>
  - <tag, keyword for the document>
  - <tag, keyword for the document>
authors:
  - name: <Author's name>
    url: <Author's GitLab profile page>
    image_url: <Any>
    title: <Job title>
---

• (*) Note: Slugs: index name of your doc (i.e: if you name slug "example", your doc would be available to be accessed at https://docs.gcalls.co/your-folder/example) Tags: tags for your docs. The more tags you add, the more likely your document get discovered.
• For example:

---
title: How to contribute
slug: how-to-contribute
tags:
  - documentation
  - document
  - contribute
  - tutorial
  - guide
  - README
  - GettingStarted
  - Docusaurus
  - NetlifyCMS
  - ReactJS
authors:
  - name: Huỳnh Minh
    url: https://gitlab.com/huynhminh.le
    image_url: https://secure.gravatar.com/avatar/27c9cd7cb2e2645b12ae4281b9fb1231?s=192&d=identicon
    title: Customer Success Engineer
---

3.4 Create a new folder:​

• To create or edit a folder, simply create a folder in root / of project. Add at least 1 document to that folder (e.g: intro.md).

a. Configure a folder for client page:​

• A folder can only be used as a collection when it's properly configured in docusaurus.config.js.
• By default, Docusaurus has only 2 folders: blogs and docs (display name is Tutorial). With blogs being blog by type, docs being docs by type. The big difference between type blog and type doc is that blog displays author's information while doc doesn't.
• This project uses a plugin called @docusaurus/plugin-content-docs, which enables user to add more folders/collections under the type of doc. Docusaurus also has another plugin called @docusaurus/plugin-content-blogs for type blog.

a1. Add configuration for docusaurus.config.js​

• In docusaurus.config.js, you can find this configuration:

plugins: [
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'tech',
        path: 'tech',
        routeBasePath: 'tech',
        sidebarPath: require.resolve('./sidebars.js'),
      }, 
    ],
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'sale',
        path: 'sale',
        routeBasePath: 'sale',
        sidebarPath: require.resolve('./sidebars.js'),
      }, 
    ],
  ],

• This configuration was configured to add 2 additional folders (tech and sales). To add more folder, add another item as seen in this configuration and replace id, path, routeBasePath with the name of the folder (no CAP).
• Then scroll down and you'll see this configuration:

themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        title: 'Gcalls',
        logo: {
          alt: 'Gcalls Logo',
          src: 'https://app.gcalls.co/assets/img/favicon.png',
        },
        items: [
          {
            type: 'doc',
            docId: 'intro',
            position: 'left',
            label: 'Tutorial',
          },
          {to: '/blog', label: 'Blog', position: 'left', activeBaseRegex: `/docs/`,},
          {to: '/tech/intro', label: 'Tech', position: 'left', activeBaseRegex: `/docs/`,},
          {to: '/sale/intro', label: 'Sale', position: 'left', activeBaseRegex: `/docs/`,},
          {
            href: 'https://gitlab.com/gcalls-opensource/gcalls-doc',
            label: 'GitLab',
            position: 'right',
          },
          {
            type: 'custom-myDocSearch', 
            position: "left",
            itemProp: 44, 
            anotherProp: "xyz"
          },
          {
            type: 'search',
            position: 'right',
          },
        ],
      },
      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Tutorial',
                to: '/docs/handbook-structure-and-style-guide',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/facebook/docusaurus',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),

• Add this line to the configuration above to add link to navigation bar and footer.

{to: '/<folder_name>/<document_index_name>', label: '<Folder Name>', position: 'left', activeBaseRegex: `/docs/`,},

• If the folder is empty, add 1 document with its attribute slug
• (*) Note: <document_index_name> is the index name aka slug of the first document in this folder. With type docs, The Url must link to an existing fixed document. If this document is deleted, the url wouldn't work properly and it must be replaced by an existing document's index name.

a2. Configure a nested folder for client page:​

• To add a folder within a folder, simply create another folder inside a folder in root / of the project (e.g: docs, blogs, tech, sale, ...)
• Add a json file (e.g: _category_.json) to the folder that contains the nested folder. The content includes:

{
  "label": "Docusaurus Tutorial",
  "position": 2,
  "link": {
    "type": "generated-index",
    "description": "5 minutes to learn the most important Docusaurus concepts."
  }
}

• Parameters:
  • label: Display name of the current directory/folder, the doc resides in.
  • position: position of the current directory.
  • link.type: type of link
  • link.description: description of current directory
• You can add another _category_.json file to the nested folder to configure its display name, index, etc, ...

b. Configure a folder for admin page:​

• The admin page is powered by NetlifyCMS or Netlify Content Management System.
• In order for the admin page to edit a document, it needs to access the document's folder/directory/collection.
• Open static/admin/config.yml and add your folder configuration:

- name: sale
  label: "sale"
  folder: sale
  identifier_field: title
  extension: md
  widget: "list"
  create: true
  slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
  fields:
    - { name: title, label: Title, widget: string }
    - { name: body, label: Body, widget: markdown }
    - { name: slug, label: Slug, widget: string }
    - label: "Tags"
      name: "tags"
      widget: "list"
    - label: "Authors"
      name: "authors" 
      widget: "list"
      fields:
        - { name: name, label: Name, widget: string }
        - { name: title, label: Title, widget: string } 
        - { name: url, label: URL, widget: string } 
        - { name: imageUrl, label: ImageURL, widget: string } 

• The configuration above adds a collection named sale which is also the sale folder in root / of this project.

3.5 Images:​

• Images can be placed anywhere in the designated folders in root / (except src,node_modules,build, and .docusaurus). Though it's recommended to put images in a folder which isn't displayed on navigation bar (e.g: static/img/).
• To add image to static/img, simple move an image into that folder.
• Images uploaded via admin page will be in static/img/.
• Images can be referenced by relative path.

![image description](<relative_path_to_image>)

For example: ![how-to-document-thumb15](../static/img/tech/how-to-document/how-to-document-thumb15.png) will display an image called how-to-document-thumb15.png with alternative title "how-to-document-thumb15"

3.6 Publishing:​

• When you're done with the documentation process, add your changes to git:

  git add <path to document> <path to document2> <path to document3>
  
  Tip: You can also right click on your document > Copy Path to get its path
• Commit your changes and add a message for your commit:

  git commit -m "<your message>"
  
• Push your changes to the source code to generate a temporary preview page of docs.gcalls.co. If this is your first time pushing on a new branch:

  git push -u origin <your_branch_name>
  
  else:

  git push -u origin
  

4. View the publishing process (on GitLab):​

• Go back to Gcalls-docs repository
• On the left side menu bar, click on CI/CD > Pipelines. You can see a list of available jobs triggered by Cloudflare Pages. On the top row, click on the running/passed button to view the latest job.
• Click Cloudflare Pages when it turns green to view the preview version of docs.gcalls.co with your changes.
• It will open a preview link with your changes

npm install --save @sentry/node

Sentry nên được khởi tạo càng sớm trong ứng dụng của bạn càng tốt:

import express from "express";
import * as Sentry from "@sentry/node";

// or using CommonJS
// const express = require('express');
// const Sentry = require('@sentry/node');

const app = express();

Sentry.init({ dsn: "https://examplePublicKey@o0.ingest.sentry.io/0" });

// The request handler must be the first middleware on the app
app.use(Sentry.Handlers.requestHandler());

// All controllers should live here
app.get("/", function rootHandler(req, res) {
  res.end("Hello world!");
});

// The error handler must be before any other error middleware and after all controllers
app.use(Sentry.Handlers.errorHandler());

// Optional fallthrough error handler
app.use(function onError(err, req, res, next) {
  // The error id is attached to `res.sentry` to be returned
  // and optionally displayed to the user for support.
  res.statusCode = 500;
  res.end(res.sentry + "\n");
});

app.listen(3000);

Cách để kiểm thử sentry với một api và trả về lỗi :

app.get("/debug-sentry", function mainHandler(req, res) {
  throw new Error("My first Sentry error!");
});

requestHandler Tùy biến một số tùy chọn cho phép bạn quyết định dữ liệu nào sẽ được đưa vào sự kiện được gửi tới Sentry.

Các tùy chọn có thể là:

// keys to be extracted from req
request?: boolean | string[]; // default: true = ['cookies', 'data', 'headers', 'method', 'query_string', 'url']

// server name
serverName?: boolean; // default: true

// generate transaction name
//   path == request.path (eg. "/foo")
//   methodPath == request.method + request.path (eg. "GET|/foo")
//   handler == function name (eg. "fooHandler")
transaction?: boolean | 'path' | 'methodPath' | 'handler'; // default: true = 'methodPath'

// keys to be extracted from req.user
user?: boolean | string[]; // default: true = ['id', 'username', 'email']

// client ip address
ip?: boolean; // default: false

// node version
version?: boolean; // default: true

// timeout for fatal route errors to be delivered
flushTimeout?: number; // default: undefined

Ví dụ: nếu bạn muốn bỏ qua tên máy chủ và chỉ thêm người dùng, bạn sẽ sử dụng requestHandler như sau:

app.use(
  Sentry.Handlers.requestHandler({
    serverName: false,
    user: ["email"],
  })
);

Mặc định thì errorHandler sẽ chỉ nắm bắt các lỗi với mã trạng thái là 500 hoặc cao hơn. Nếu bạn muốn thay đổi nó, hãy cung cấp cho nó shouldHandleError , chấp nhận error làm đối số của nó và quyết định xem có nên gửi lỗi hay không bằng cách trả về một giá trị boolean thích hợp.

app.use(
  Sentry.Handlers.errorHandler({
    shouldHandleError(error) {
      // Capture all 404 and 500 errors
      if (error.status === 404 || error.status === 500) {
        return true;
      }
      return false;
    },
  })
);

Nếu bạn sử dụng TypeScript, bạn cần truyền trình xử lý của chúng tôi để thể hiện các loại cụ thể. Chúng hoàn toàn tương thích, vì vậy điều duy nhất bạn cần thay đổi là:

// from
const express = require('express');
// to
import * as express from 'express';


// from
app.use(Sentry.Handlers.requestHandler());
// to
app.use(Sentry.Handlers.requestHandler() as express.RequestHandler);


// from
app.use(Sentry.Handlers.errorHandler());
// to
app.use(Sentry.Handlers.errorHandler() as express.ErrorRequestHandler);

Monitor Performance​

Có thể thêm theo dõi quá trình ghi nhật ký các sự kiện diễn ra trong một yêu cầu, thường là trên nhiều dịch vụ cho tất cả các khuôn khổ phổ biến. Tuy nhiên, chúng tôi chỉ cung cấp các trình xử lý mặc định cho Express.

const Sentry = require("@sentry/node");
const express = require("express");
const app = express();

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    // enable HTTP calls tracing
    new Sentry.Integrations.Http({ tracing: true }),
    // enable Express.js middleware tracing
    new Sentry.Integrations.Express({
      // to trace all requests to the default router
      app,
      // alternatively, you can specify the routes you want to trace:
      // router: someRouter,
    }),
  ],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

// RequestHandler creates a separate execution context using domains, so that every
// transaction/span/breadcrumb is attached to its own Hub instance
app.use(Sentry.Handlers.requestHandler());
// TracingHandler creates a trace for every incoming request
app.use(Sentry.Handlers.tracingHandler());

// the rest of your app

app.use(Sentry.Handlers.errorHandler());
app.listen(3000);

Các bước được cung cấp cho các hoạt động sau trong một sentry:

• Yêu cầu HTTP được thực hiện với request
• get cuộc gọi sử dụng http và https
• Middleware (Express.js only)

Troubleshooting​

Khi chụp lỗi cục bộ, hãy đảm bảo rằng bộ lọc dữ liệu của dự án để lọc các sự kiện máy chủ cục bộ đã được tắt:

Điều này đảm bảo rằng các lỗi do trình duyệt của bạn tạo ra (chẳng hạn như lỗi do các phương thức HTTP tạo ra) được ghi lại đúng cách.

Sentry thu thập dữ liệu bằng cách sử dụng SDK trong thời gian chạy ứng dụng của bạn.

# Using npm
npm install --save @sentry/react

# Using yarn
yarn add @sentry/react

II.Cấu hình​

Cấu hình càng sớm càng tốt trong ứng dụng của bạn :

import { createRoot } from "react-dom/client";
import React from "react";
import * as Sentry from "@sentry/react";
import App from "./App";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new Sentry.BrowserTracing()],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

const container = document.getElementById(“app”);
const root = createRoot(container);
root.render(<App />);

Khi điều này được thực hiện, tất cả các ngoại lệ chưa được xử lý sẽ được Sentry tự động ghi lại.

III.Thêm lỗi​

Nếu đang sử dụng React 16 trở lên, bạn có thể sử dụng thành phần error boundary để tự động gửi lỗi Javascript từ bên trong cây thành phần tới Sentry và đặt giao diện người dùng dự phòng.

IV.Cài đặt React Router​

Tích hợp React Router được thiết kế để hoạt động với tính năng theo dõi của chúng tôi. Quá trình ghi nhật ký các sự kiện diễn ra trong một yêu cầu, thường xuyên trên nhiều gói dịch vụ.

V.Xác thực​

Đoạn mã này bao gồm một lỗi cố ý, vì vậy bạn có thể kiểm tra xem mọi thứ có hoạt động ngay khi bạn thiết lập không:

return <button onClick={() => methodDoesNotExist()}>Break the world</button>;

Để xem và giải quyết lỗi đã ghi, hãy đăng nhập và mở dự án của bạn. Nhấp vào tiêu đề của lỗi sẽ mở ra một trang nơi bạn có thể xem thông tin chi tiết và đánh dấu nó là đã giải quyết.

VI. Ngăn chứa lỗi​

Tùy thuộc vào cách bạn đã thiết lập dự án JavaScript của mình, dấu vết ngăn xếp trong các lỗi Sentry của bạn có thể không giống mã thực của bạn.

Getting Started​

Get started by creating a new site.

Or try Docusaurus immediately with docusaurus.new.

What you'll need​

• Node.js version 16.14 or above:
  • When installing Node.js, you are recommended to check all checkboxes related to dependencies.

Generate a new site​

Generate a new Docusaurus site using the classic template.

The classic template will automatically be added to your project after you run the command:

npm init docusaurus@latest my-website classic

You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.

The command also installs all necessary dependencies you need to run Docusaurus.

Start your site​

Run the development server:

cd my-website
npm run start

The cd command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.

The npm run start command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.

Open docs/intro.md (this page) and edit some lines: the site reloads automatically and displays your changes.

## Lipsym orem:

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat.

2. Semper Fidelis

## Consectetur egsigasum:

1. hallaluyuh 2. amen 3. illuminati

1. Veni, vidi, vici