Browser agent

Prerequisites

For prerequisite checks for agent installation, see Prerequisite checks for agent installation.
URL/IP of the SixthSense collector (your tenant URL which will be provided by Customer Support)
Access token from the SixthSense portal. For accessing the token, see Accessing your Access Token.
PACKAGE_TOKEN provided by Customer Support.

Downloading the agent

Download the SixthSense agent into your project dependencies "@sixthsense/sixthsense-javascript-agent": "^3.7.3" (Add this dependency to the package.json file of your application).

Example:

"dependencies": {
  "async": "^1.5.2",
  "body-parser": "^1.15.1",
  "cookie-parser": "^1.4.3",
  "express": "^4.13.4",
  "express-session": "^1.13.0",
  "finalhandler": "^0.4.1",
  "request": "^2.72.0",
  "serve-static": "^1.10.2",
  "prom-client": "^6.3.0",
  "morgan": "^1.7.0",
  "connect-redis": "^3.2.0",
  "@sixthsense/sixthsense-javascript-agent": "^3.7.3”
}

Configuring the agent

Agent configurations will be added to the entry point of your application.

ClientMonitor.register	ClientMonitor.setPerformance	About
service:	service:	Name of the application (must be same for both)
collector:	collector:	(tenant URL which will be provided by the onboarding team)
authorization:	authorization:	Get the access token from the SixthSense portal

Upgrade the following in mains.ts file.

import ClientMonitor from "@sixthsense/sixthsense-javascript-agent";
 
ClientMonitor.register({
  service: "BM Client App", // Name the app
  collector: ' https://http-collector-observability.sixthsense.rakuten.com,
  pagePath:"index.html",
  serviceVersion: "1.2.1",
  enableSPA: true,
  useFmp: true,
  autoTracePerf: true,
  detailMode: true,
  enableDirectFetchPatching: false,
  environment: "production",
  authorization: "$SIXTHSENSE_TOKEN",
});
 
ClientMonitor.setPerformance({
  service: "BM Client App", 
  collector: 'https://http-collector-observability.sixthsense.rakuten.com',
  serviceVersion: "1.2.1",
  perfInterval: 1000,
  useFmp: true,
  authorization: "$SIXTHSENSE_TOKEN" 
 });

For OneCloud Platform, use the following command:

import ClientMonitor from "@sixthsense/sixthsense-javascript-agent";

ClientMonitor.register({
 service: "BM Client App", // Name the app
  collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap ',

  // For connectivity to backend using onecloud private network: https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap
  
  // For connectivity to backend using intra public network: https://observability-backend-core.sixthsense.rakuten.com/oap

 pagePath:"index.html",
 serviceVersion: "1.2.1",
 enableSPA: true,
 useFmp: true,
 autoTracePerf: true,
 detailMode: true,
 enableDirectFetchPatching: false,
 environment: "production",
 authorization: "$SIXTHSENSE_TOKEN",
});

ClientMonitor.setPerformance({
 service: "BM Client App", 
 collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap/ ',
 serviceVersion: "1.2.1",
 perfInterval: 1000,
 useFmp: true,
 authorization: "$SIXTHSENSE_TOKEN" 
});

Update the app.component.ts

constructor(private router: Router, private http: HttpClient) {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        ClientMonitor.setPerformance({
    collector: 'https://http-collector-observability.sixthsense.rakuten.com',
          service: "BM Client App", // Name the app
          serviceVersion: “1.2.1”,
          pagePath: location.href,
          useFmp: true,
    authorization: "$SIXTHSENSE_TOKEN"
        });
      }
    });
      }

For OneCloud Platform, use the following command:

constructor(private router: Router, private http: HttpClient) {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        ClientMonitor.setPerformance({
    collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap/ ',

    // For connectivity to backend using onecloud private network: https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap
   
   // For connectivity to backend using intra public network: https://observability-backend-core.sixthsense.rakuten.com/oap

          service: "BM Client App", // Name the app
          serviceVersion: “1.2.1”,
          pagePath: location.href,
          useFmp: true,
    authorization: "$SIXTHSENSE_TOKEN"
        });
      }
    });
      }

Update the app.module.ts

Add only if you are using global error handler.

export class AppGlobalErrorhandler implements ErrorHandler {
  handleError(error: any) {
    ClientMonitor.reportFrameErrors(
      {
    collector: 'https://http-collector-observability.sixthsense.rakuten.com',
          service: "BM Client App", // Name the app
          serviceVersion: “1.2.1”,
          pagePath: location.href,
          useFmp: true,
    authorization: "$SIXTHSENSE_TOKEN"
        },
      error
    );
  }
}

For OneCloud Platform, use the following command:

export class AppGlobalErrorhandler implements ErrorHandler {
  handleError(error: any) {
    ClientMonitor.reportFrameErrors(
      {
    collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap/',

    // For connectivity to backend using onecloud private network: https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap
   
   // For connectivity to backend using intra public network: https://observability-backend-core.sixthsense.rakuten.com/oap

          service: "BM Client App", // Name the app
          serviceVersion: “1.2.1”,
          pagePath: location.href,
          useFmp: true,
    authorization: "$SIXTHSENSE_TOKEN"
        },
      error
    );
  }
}

note

Rakuten does not recommended hardcoding the authorization token in the codebase. In order to make it dynamic, you can use the following method.

Add the token to .env file as SS_AUTH_TOKEN or any other way so that your Webpack picks it from the environment variable while generating the bundle.
In your code base use it as process.env.SS_AUTH_TOKEN instead of hardcoding the actual token in your code.
Ensure that you add to .env while building your bundle and not after building UI bundle.
Get Access token. For accessing the token, see Accessing your Access Token.
Add access token to the token_from_ui.

Run your application

Run the following commands before the npm install command.

npm config set @sixthsense:registry https://artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/ && \
npm config set -- '//artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/:_authToken' "${PACKAGE_TOKEN}"

PACKAGE_TOKEN which will be provided by Customer Support.
Run npm install command to download all the dependencies (npm i @sixthsense/sixthsense-javascript-agent).
Run the start command to run your application.

Installing on a Docker

For agent integration in Docker, follow the procedure in Agent Configuration.

Adding the dependency download configuration in Docker file

The SixthSense agent is hosted in Rakuten self-hosted private Package manager. To download the package, an additional step is required for authentication.
Add the following code snippet in your docker file before the npm install command.

npm config set @sixthsense:registry https://artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/ && \
npm config set -- '//artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/:_authToken' "${PACKAGE_TOKEN}"

This will set the configuration to identify the SixthSense package registry. It also tells the dependency to download from the URL which you defined with the same name in the package.json file.
SixthSense package manager URL - https://artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/
_authToken' "PACKAGE_TOKEN"– Since the package is hosted in a private package manager, it requires some authentication to identify the user. This auth token will be defined during onboarding.
For ease, the auth token is placed in the docker file. However, if you don’t wish to add in the docker file and push it to your version control repository, you can pass this auth token based on your credential management by setting the environment variable, passing the secrets from Jenkins CI/CD, and so on.
Build your application with Docker build and run the Docker image/container. The agent is integrated with your application and you will start seeing the metrics in the SixthSense dashboard.

Pass the PACKAGE_TOKEN as build arguments.

docker build --build-arg PACKAGE_TOKEN=${PACKAGE_TOKEN_VALUE} -t service:tag .

Example: Docker Configuration

FROM node:10-alpine
ENV NODE_ENV "production"
ENV PORT 8079
EXPOSE 8079
RUN addgroup mygroup && adduser -D -G mygroup myuser && mkdir -p /usr/src/app && chown -R myuser /usr/src/app
 
# Prepare app directory
WORKDIR /usr/src/app
COPY package.json /usr/src/app/
COPY yarn.lock /usr/src/app/
RUN chown myuser /usr/src/app/yarn.lock
 
USER myuser
RUN mkdir sixthsense-logs
ARG PAT
RUN npm config set "@sixthsense:registry" https://artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/ && \
    npm config set -- '//artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/:_authToken' "${PAT}"
# RUN yarn add @sixthsense/sixthsense-javascript-agent
RUN yarn install
 
COPY . /usr/src/app
 
# Start the app
CMD ["/usr/local/bin/npm", "start"]

Using Bundle for jQuery and HTML:

Download bundle.js to resources/ static folder.
Add the bundle to HTML page script tag.

Add the SixthSense code.

ClientMonitor.register({
  service: "Sprint 6",
  collector: 'https://http-collector-observability.sixthsense.rakuten.com ',
  pagePath: "index.html"
  serviceVersion: "1.2.1",
  enableSPA: true,
  useFmp: true,
  autoTracePerf: true,
  detailMode: true,
  environment: "testing",
  authorization: "$SIXTHSENSE_TOKEN"
});
ClientMonitor.setPerformance({
  service: "BM Client App",
  collector: 'https://http-collector-observability.sixthsense.rakuten.com',
  serviceVersion: "1.2.1",
  perfInterval: 1000,
  useFmp: true,
  authorization: "$SIXTHSENSE_TOKEN"
});

For OneCloud Platform, use the following command:

ClientMonitor.register({
  service: "Sprint 6",
  collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap/ ',
  pagePath: "index.html"
  serviceVersion: "1.2.1",
  enableSPA: true,
  useFmp: true,
  autoTracePerf: true,
  detailMode: true,
  environment: "testing",
  authorization: "$SIXTHSENSE_TOKEN"
});
ClientMonitor.setPerformance({
  service: "BM Client App",
  collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap/ ',
  serviceVersion: "1.2.1",
  perfInterval: 1000,
  useFmp: true,
  authorization: "$SIXTHSENSE_TOKEN"
});

#Prerequisites

#Downloading the agent

#Configuring the agent

note

#Run your application

#Installing on a Docker

#Adding the dependency download configuration in Docker file

Prerequisites

Downloading the agent

Configuring the agent

Run your application

Installing on a Docker

Adding the dependency download configuration in Docker file