异常处理

因为是基于 Midway、Vue 3 组装的 SSR 框架，所以 Midway 自带了异常处理机制。

Midway 异常处理

你可以查看官网文档。

404 处理

两种处理方式

第一种：直接Midway处理

框架内部，如果未匹配到路由，会抛出一个 NotFoundError 的异常。通过异常处理器，我们可以自定义其行为。

比如跳转到某个页面，或者返回特定的结果：

// src/filter/notfound.filter.ts
import { Catch } from '@midwayjs/decorator';
import { httpError, MidwayHttpError } from '@midwayjs/core';
import { Context } from '@midwayjs/koa';

@Catch(httpError.NotFoundError)
export class NotFoundFilter {
  async catch(err: MidwayHttpError, ctx: Context) {
    // 404 错误会到这里
    ctx.redirect('/404.html');

    // 或者直接返回一个内容
    return {
      code: 404,
      msg: err.message,
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

然后在 src/configuration.ts 中将404处理过滤器应用上

import { Configuration, App, Catch } from '@midwayjs/decorator';
import { join } from 'path';
import * as koa from '@midwayjs/koa';
import { NotFoundFilter } from './filter/notfound.filter';

@Configuration({
  imports: [
    koa
  ],
})
export class ContainerConfiguration {

  @App()
  app: koa.Application;

  async onReady() {
    this.app.useFilter([NotFoundFilter]);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

第二种：Midway过度路由，Vue前端处理

Midway过度跳转到/404：

// src/filter/notfound.filter.ts
import { Catch } from '@midwayjs/decorator';
import { httpError, MidwayHttpError } from '@midwayjs/core';
import { Context } from '@midwayjs/koa';

@Catch(httpError.NotFoundError)
export class NotFoundFilter {
  async catch(err: MidwayHttpError, ctx: Context) {
    // 404 错误会到这里
    ctx.redirect('/404');    
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

然后在 src/controller/home.controller.ts 中绑定404路由

@Controller('/')
export class HomeController {
  @App()
  app: Application;

  @Inject()
  ctx: Context;

  @Get('/')
  @Get('/about')
  @Get('/detail')
  @Get('/localapi')
  @Get('/404')
  @ContentType('text/html')
  async home(): Promise<void> {
    this.ctx.body = render(this.ctx, this.app);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

然后在 src/configuration.ts 中将404处理过滤器应用上

import { Configuration, App, Catch } from '@midwayjs/decorator';
import { join } from 'path';
import * as koa from '@midwayjs/koa';
import { NotFoundFilter } from './filter/notfound.filter';

@Configuration({
  imports: [
    koa
  ],
})
export class ContainerConfiguration {

  @App()
  app: koa.Application;

  async onReady() {
    this.app.useFilter([NotFoundFilter]);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Vue前端接手路由处理

// /web/config/router.ts

export const createRouter = (type: RouterType): Router => {
  const router = _createRouter({
    // ...
    routes: [
      // ...
      {
        name: 'notfound',
        path: '/404',
        meta: {
          title: 'Not Found',
        },
        component: () => import('@/views/404/index.vue'),
      },
    ],
  });

  return router;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

500 处理

两种处理方式

第一种：直接Midway处理

当不传递装饰器参数时，将捕获所有的错误。

比如，捕获所有的错误，并返回特定的 JSON 结构，示例如下。

// src/filter/default.filter.ts

import { Catch } from '@midwayjs/decorator';
import { MidwayError } from '@midwayjs/core';
import { Context } from '@midwayjs/koa';

@Catch()
export class DefaultErrorFilter {
  async catch(err: MidwayError, ctx: Context) {
    console.log('err', err.cause);
    // 所有的未分类错误会到这里
    return {
      code: Number(err.code ?? 500),
      msg: err.message,
    };
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

然后在 src/configuration.ts 中将500处理过滤器应用上

import { Configuration, App, Catch } from '@midwayjs/decorator';
import { join } from 'path';
import * as koa from '@midwayjs/koa';
import { DefaultErrorFilter } from './filter/default.filter';

@Configuration({
  imports: [
    koa
  ],
})
export class ContainerConfiguration {

  @App()
  app: koa.Application;

  async onReady() {
    this.app.useFilter([DefaultErrorFilter]);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

第二种：Midway过度路由，Vue前端处理

Midway过度跳转到/500：

// src/filter/default.filter.ts

import { Catch } from '@midwayjs/decorator';
import { Context } from '@midwayjs/koa';

@Catch()
export class DefaultErrorFilter {
  async catch(err: Error, ctx: Context) {
    // 500 错误会到这里
    ctx.redirect('/500'); 
  }

}

1
2
3
4
5
6
7
8
9
10
11
12
13

然后在 src/controller/home.controller.ts 中绑定500路由

@Controller('/')
export class HomeController {
  @App()
  app: Application;

  @Inject()
  ctx: Context;

  @Get('/')
  @Get('/about')
  @Get('/detail')
  @Get('/localapi')
  @Get('/500')
  @ContentType('text/html')
  async home(): Promise<void> {
    this.ctx.body = render(this.ctx, this.app);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

然后在 src/configuration.ts 中将500处理过滤器应用上

import { Configuration, App, Catch } from '@midwayjs/decorator';
import { join } from 'path';
import * as koa from '@midwayjs/koa';
import { DefaultErrorFilter } from './filter/default.filter';

@Configuration({
  imports: [
    koa
  ],
})
export class ContainerConfiguration {

  @App()
  app: koa.Application;

  async onReady() {
    this.app.useFilter([DefaultErrorFilter]);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Vue前端接手路由处理

// /web/config/router.ts

export const createRouter = (type: RouterType): Router => {
  const router = _createRouter({
    // ...
    routes: [
      // ...
      {
        name: 'error',
        path: '/500',
        meta: {
          title: 'Server Error',
        },
        component: () => import('@/views/500/index.vue'),
      },
    ],
  });

  return router;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

异常处理 #

Midway 异常处理 #

404 处理 #

第一种：直接Midway处理 #

第二种：Midway过度路由，Vue前端处理 #

500 处理 #

第一种：直接Midway处理 #

第二种：Midway过度路由，Vue前端处理 #

异常处理

Midway 异常处理

404 处理

第一种：直接Midway处理

第二种：Midway过度路由，Vue前端处理

500 处理

第一种：直接Midway处理

第二种：Midway过度路由，Vue前端处理