Troubleshooting / Debugging

Outsmartly

Search…

Introduction

Performance Best Practices / High Performance Checklist

Edge Slice Re-rendering

Troubleshooting / Debugging

Outsmartly offers a number of helpers that can greatly simplify the process of debugging code running across our edge networks.
Overrides
Overrides are a core product offering of Outsmartly, allowing you to write code that will run across our edge networks and modify (or 'override') the default props that were originally passed into your React components during Static Site Generation or Server Side Rendering.
To aid with debugging Outsmartly ships logging from the edge to the Browser's console. There are two types of logs that can be viewed in the browser's console:
1. Outsmartly default and error logs.
Outsmartly's logs will notify you of error that may have occurred when running your code on our edge servers.
Debugging Logs Example
2. User generated logs from logging calls in your code.
Users may also write explicit logging statements of their own. This is possible by using the event.log() method located on the event object passed to your getOverrideProps(event) method of your Override that runs on the CDN edge servers. These logs will appear remotely in the browser's console for convenient debugging.
You can use these directly in an Override as follows:
1
overrides: [
2
  {
3
    component: 'ExampleComponent',
4
    async getOverrideProps(event) {
5
      event.log('Hello Logger');
6
      event.warn('This is not good');
7
      event.error('This is really bad');
8
​
9
      // you can also pass objects
10
      event.log({ hello: 'World' });
11
    },
12
  },
13
];
Copied!
It is a common pattern to break code up into function. When doing so you can pass the event object into any function that needs to make logging calls.
1
overrides: [
2
  {
3
    component: 'ExampleComponent',
4
    async getOverrideProps(event) {
5
      // notice we are passing the event object here
6
      const data = await getSomeData(event);
7
      // ...                         ^^^^^
8
    },
9
  },
10
];
Copied!
And then in the getSomeData function:
1
async function getSomeData(event) {
2
  //                       ^^^^^
3
  event.log('Hello Logger');
4
  event.warn('This is not good');
5
  event.error('This is really bad');
6
}
Copied!
Regular console.log() calls—not event.log()—from within your overrides are NOT logged to the browser.

Using Typescript

Last modified 2mo ago

Copy link

Contents

Overrides

1. Outsmartly default and error logs.

2. User generated logs from logging calls in your code.